logo   Bootstrap 4 - Grid (gitter)




Bootstrap er bygget op omkring 3 grundprincipper,

Klasser
Grid (gitter)
Mobile first

der har afgørende indflydelse på design senest fra wireframing og fremefter.


Klasser

En væsentlig udfordring ved udformningen af en responsiv side er, at det layout der passer til / er hensigtsmæssigt til en mindre telefon ikke er passende / hensigtsmæssigt på f.eks. en 30" skærm med dobbelt HD opløsning og v.v.


Den sitiation søger Bootstrap at kompensere for ved at give mulighed for, at de samme data dynamisk kan vises på fem forskellige måder (kaldet klasser). Dynamikken styres af en kombination af opsætning og det interval bredden på den aktuelle skærm ligger indenfor - kaldet viewport. Skillepunktet mellem to klasser kaldes et"breakpoint".


(På de fleste Bootstrap-baserede sites anvendes dog kun 2 eller måske 3 klasser - xs og en eller to af de efterliggende). Bootstrap læser nedefra, og skifter først layout, når kode for en ny overliggende klasse mødes. Den nederste klasse (xs) er fast til stede. De andre kan bruges / undlades individuelt.


Fra Bootstrap anvender browserne de GLOBALE selektorer og den klasse selektorer som udstyrets aktuelle viewport ligger indenfor. Browserne kan dog have en nedre grænse, der kan gøre sidelæns scrolling nødvendig.


Klasserne og deres skærmbredder etc. kan ses nedenfor. (Forskellen mellem skærmbredde og containerbredde skyldes padding for at tekst etc. af visuelle hensyn ikke skal gå helt ud til kanten / kolonneadskillelse).


KlassenavnKlasse
id
Skærm
bredde
på akt.
udstyr
(Viewport)
Kolonne
bredde
(col)
Max.
container
bredde
Extra small (phones vertical)xs0-575 pxAutoAutoxs
Small (phones horizontal)sm576 - 767 px45 px540 pxsm
Medium (tablets)md768 - 991 px60 px720 pxmd
Large (laptop)lg991 - 1199 px80 px960 pxlg
Extra large (desktop)xl1200 - xxxx pxca. 98 px1140 pxlg


Klasserne kan også betragtes som værende 5 sideordnede grids.


Den visuelle tilpasning til de enkelte klasser styres af at bredden på 'container' ændres automatisk baseret på CSS-data og den aktuelle 'viewport'.




Grid


Et grid opbygges to-dimensionelt som:

Et antal lag efter hinanden ned over siden hinanden til f.eks. header, content og footer.
Inddeling af hvert lag i 1-12 kolonner / søjler ved siden af hinanden.


Indenfor bredden på den enkelte klasse foretages via CSS en underopdeling af den aktuelle skærmbredde i 12 kolonner / søjler. De kan via CSS samles efter behov til at indeholde de databærende kolonner i forskellige kombinationer. Omkring kolonner indsættes automatisk padding på 15 pixel på hver side for at skabe mellemrum mellem dataene i de enkelte kolonner. Dette mellemrum kaldes "gutter".


Denne opdeling i 12 søjler er den målestok man har til at designe det vertikale layout med. Det er væsentligt, at den tværgående sum af søjler altid er 12. Ved mere end 12 foretages automatisk wrap.


Hver gruppe af kolonner samles automatisk i en blok, der vil fremstå som et felt (header, nav, main etc.) på brugerens skærm.


Inde i hver tværgående opdeling af skærmen kan der indlejres en ny 12te-dels opdeling. Den kan igen have sin egen 12-dels opdeling.


Ved anvendelsen af Bootstrap er man således afskåret fra design på pixel-niveau som man kan ved traditionelt design, men er nødt til at tænke i 12te dele.


lppfp


Udover den meget liniære beskrivelse ovenfor kan grids opbygges med indlejrede offsets.


offset


Endelig kan et grid indlejres i en datakolonne.


nested


Konceptet indebærer således, at en HTML-side opbygges med et valgfrit antal lag under hinanden, der hver især kan indeholde:
- fra 1 datakolonne
- til (teoretisk) 12 datakolonner ved siden af hinanden. Hver af dem kan evt. indeholde indtil 12 datakolonner ved siden af hinanden etc. Det er dog i praksis sjældent at se selv den første indlejring.




Mobile first


wireframeBlandt de fem klasser er Extra Small (xs) default i bunden af hierarkiet og visning af den kan ikke fravælges. Derfra forbliver den aktiv op igennem klasserne uanset større skærmstørrelse, indtil den bliver erstattet af en anden klasse. Denne anden fortsætter derefter, indtil den bliver erstattet. Det synes at være praksis, at anvende to eller oftest 3 klasser ved opbygning af Bootstrap-baserede sider.


Extra Small (xs) er samtidig formatmæssigt sat op til at vise alle sidens datablokke under hinanden i en kolonne med de enkelte blokke vist under hinanden.


Konceptet er således, at Bootstrap ved visning af data automatisk falder tilbage til den smalleste skærmbredde medmindre andet er til rådighed via CSS-selektorer.



Antal klasser

Det kan vælges at udvikle til alle klasser. Dette må dog betragtes som et overkill. Derefter synes der ikke at være nogen regel for, hvor mange klasser, der skal udvikles til. Følgende opinion er set på nettet:

Du skal bruge det antal klasser du selv finder nødvendigt. Dvs. du udvikler enten til desktop eller mobil først, og så skalerer du browservinduet langsomt hen mod det du ikke har udviklet til; og hvis det på noget tidspunkt ser dumt ud (f.eks. at elementer bliver ulæseligt små eller alt for brede), så tilføjer du en klasse til det, for at lave det anderledes.

Der er ingen "krav" om at benytte mere end én klasse. Det er kun til hjælp.

Hvis du vil dække alt, så er xs til telefoner, sm til tablets, md til små laptops (netbooks) og lg til store laptops og desktops. I de fleste tilfælde kan du nå alle ved at bruge xs og lg.


Forskellen mellem udvikling til de enkelte klasser vil typisk være, at XS-klassen vil være opbygget ganske simpelt med hovedvægten på at få data præsenteret. Overskueligheden vil ofte være begrænset.

Ved den højeste anvendte klasse (LG eller XL) vil der derimod være lagt vægt på en pæn og visuel tiltalende og overskuelig responsiv-fri præsentation af data - oftest med flere kolonner til rådighed.

I et evt. mellemliggende niveau vil designet typisk være en mellemting mellem de to nævnte yderpunkter.



Menuer

Ved responsivt design vil vandrette menuer umiddelbart være at foretrække, om ikke for andet så for at friholde hele den aktuelle bredde til data. Men den løsning er dog ofte langt fra uden problemer.


Bootstrap's egen menu kan anvendes på begge ledder, med den vandrette som den i emange henseender mest hensigtsmæssige. Ved visning i XS-format skiftes automatisk til "burger"-menu.


Problemet opstår især ved brug af de smalle klasser og for menuer med behov for en del hoved- og underpunkter. Her er der imidlertid ikke plads til ret mange hovedpunkter og problemet er etableret. Nogen god løsning synes ikke umiddelbart at foreligge - medmindre man vil bruge "burger"-menuen højere op, end den er tilsigtet.



Udviklingsmetode

Med XS som default har det været naturligt for Bootstrap at prædike for den udviklingsmetode, der er kendt under buzzwordet "Mobile first". Der er dog intet til hinder for i stedet at udvikle til "Mobile last".


Uanset hvilken af de to metoder der vælges, kan der igen vælges mellem to metoder:

  • Kolonnevis
    Udvikling foretages for hele sitet for en klasse ad gangen før der fortsættes med den næste klasse.
  • Sidevis
    Udvikling foretages for en side ad gangen for alle relevante klasser før der fortsættes med den næste side.


Den valgte udviklingsmetode vil antagelig ofte være "sidevis fra XS mod LG eller XL som den sidste og med en af de andre ind imellem".


Uanset hvilken metode, der benyttes må / skal der påregnes en del iteration undervejs - især i begyndelsen.


Under udvikling af sider på struktur-niveau kan det indledningsvis være en fordel at undgå afhængighed af for meget tekst etc. men i stedet lade hvert datafelt præsentere ved en midlertidig baggrundsfarve for hvert enkelt felt.




Struktur


Ved den strukturelle opbygning (de ydre rammer) af en HTML-side med Bootstrap er der tre sæt selektorer, der er meget væsentlige:


  • .container eller .container-fluid
  • .row
  • .col-xx-xx


Container, row og col er nestede og minder konceptuelt meget om table, tr og td.




.container / .container-fluid


På Bootstrap-baserede sider er det ikke nødvendigt med en samlende container / wrapper omkring alle sidens data. Alle data skal dog være indlejret i en "container" eller "container-fluid" selektor knyttet til <div-bokse.

I vandrette lag ned over siden kan <div-boks blokke med "container" og "container-fluid" blandes efter behov.


Bootstrap knytter følgende selektorer til dem.:


.container.container-fluid
"fixed""fluid"
Hele skærmbredden bruges, men sidebredden tilpasses trinvis efter aktuel viewportHele skærmbredden bruges og sidebredden forbliver glidende som aktuel viewport.
xs .container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
width: 100%; }
.container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
width: 100% }
sm @media (min-width: 576px) {
   .container {
    max-width: 540px;
   }
}
md @media (min-width: 768px) {
   .container {
    max-width: 720px;
   }
}
lg @media (min-width: 992px) {
   .container {
    max-width: 960px;
   }
}
xl @media (min-width: 1200px) {
   .container {
    max-width: 1140px;
   }
}

Det vil dog være nemt, at udvide bredden på XL ved at ændre '1140' til et hvilketsomhelst højere tal.




.container


Når .container selektoren anvendes, bliver data altid vist centreret. De fire @media selektorer følger automatisk med. De er især relevante i tre sammenhænge:


  • Data bliver aldrig vist med en bredde på mere end 1140 px uanset hvor meget bredere viewport (den skærm / størrelse på browservindue, hvorpå dataene vises) er.
  • Sidernes "responsivitet" begynder først når viewport er nået ned på 1199 px.
  • Ved et viewport på under 576 px vises data fra "kolonnesider" altid som en enkelt kolonne (næsten alle sider indeholder kolonner i et eller andet omfang). Sidens datablokke wrappes i den rækkefølge, de mødes.


Tilstedeværelsen af de fire @media-selektorer medfører at sidernes "responsivitet" som udgangspunkt sker glidende, men at der med anvendelsen af "col"-selektorerne (se nedenfor) er mulighed for at underopdele responsiviteten i 5 klasser".


KlassenavnIdentMin.
skærm
viewport
Kolonne
bredde
Max.
container
bredde
Extra small (phones)xs0 - 575AutoAuto
Small (phones)sm576 - 76745 px540 px
Medium (tablets)md768 - 99160 px720 px
Large (desktop)lg992-119980 px960 px
Extra large (desktop)xl1200 - ~95 px1140 px


Forskellen mellem de to bredder skyldes automatiseret tilstedeværelse af padding.


Dataene (incl. css) i tags der lægges udenfor / udenom .container vil bruge hele skærmens viewport - f.eks. tilbaggrundsfarve.


Data, der skal klassestyres, placeres i:

<div class="container">
data
</div>    <!-- container slut -->




.container-fluid


Ved anvendelse af .container-fluid er der ingen hjælp / begrænsninger til opbygning af sider. .container-fluid sikrer alene responsivitet i 1 klasse.


Data vises fra kant til kant indenfor viewport(den skærm / størrelse på browservindue, hvorpå dataene vises).


.container-fluid kan opbygges nøjagtigt som .container - også i .row og .col-aa-nn.


.container-fluid afviger fra .container på 3 punkter:


  1. Udnytter altid hele viewport.
  2. Ingen mulighed for trinvis ændring af design.
  3. Kolonner bliver stående ved siden af hinanden - også når viewport nærmer sig 0 px bredde.


Data, der ikke skal klassestyres, placeres i:

<div class="container-fluid"> eller
<div class="navbar"> eller
<div class="jumbotron">
data
</div>    <!-- container-fluid slut --> eller
</div>    <!-- navbar slut --> eller
</div>    <!-- jumbotron slut -->




B landede


Data, der skal have "fluid"-styret baggrund og klassestyret indhold, placeres i:

<div class="container-fluid"> eller
<div class="navbar"> eller
<div class="jumbotron"> og
<div class="container">
data
</div>    <!-- container slut --> og
</div>    <!-- container-fluid slut --> eller
</div>    <!-- navbar slut --> eller
</div>    <!-- jumbotron slut -->




.row


For at sikre, at der altid er lidt luft mellem yderkant af viewport og viste data etc, er .container og .container-fluid født med en padding i siderne på 15 px. Det samme gælder for 'col'-selektorer.


Denne kombination (der er valgt af meget tekniske årsager) vil umiddelbart føre til en kant på 30 px langs siderne på viewport, hvilket kan være uhensigtsmæssigt på især små enheder.


.row knyttet til en indlejret div-boks inde i en .container div-boks og udenom en eller flere rækker col div-bokse løser to opgaver på en gang:


  • Den 'modregner' det ene af de to sæt paddings beskrevet ovenfor. .row skal derfor bl.a. altid benyttes som "mellemlæg" mellem .container og databærende col-kolonner. Deraf ligheden med <tr-taggen i tabeller.
  • Den anvendes som 'container' omkring indlejrede kolonner, der skal være sidestillede. (F.eks et billedgalleri med varierende størrelse tekster).


En div-boks med .row bør / skal derfor altid placeres udenom hvert enkelt lag i gitteret - og også omkring indlejrede lag.


.row {
margin-right: -15px;
margin-left: -15px;
}


Denne side viser en col-xs-12 blok med "row" og en anden uden x.


<div class="row">
<div class="col-md-6">
<table class="table">




<-div bokse:

container

row
col                        

col                        


row
col                        

col                        


col-selektorer


Ved første øjekast indeholder Bootstrap så mange 'col'-selektorer, at det kan give bange anelser om uoverskuelighed. Det er imidlertid ikke tilfældet, idet de kan systematiseres ned til, at man reelt kun skal kende fire. Resten kan udledes fra dem.


col-selektorerne anvendes til at opbygge Bootstrap's gittersystem (grid). De udgør dermed 'fundamentet' under anvendelsen af Bootstrap.


Totalt indeholder Bootstrap 268 col-selektorer: 60 col-aa-nn selektorer og 52 af hver af 'pull'-, 'push'- og offset'-selektorer.


  • aa-nn
    Matematikken i disse selektorer er: 5 klasser og 12 klonner. Indenfor hver klasse kan en fysisk kolonne angives at være 1 - 12 virtuelle kolonner bred. Det samlede antal virtuelle kolonner i bredden må ikke overstige 12. Med 'aa' kan styres at den definerede kolonne skal anvendes fra den pågældende klasse og opefter indtil en definition for en højere klasse mødes.
    De 60 selektorer og deres css er:
    col-xs-1, col-sm-1, col-md-1, col-lg-1, col-xl-1, col-xs-2, col-sm-2, col-md-2, col-lg-2, col-xl-2,
    col-xs-3, col-sm-3, col-md-3, col-lg-3, col-xl-3, col-xs-4, col-sm-4, col-md-4, col-lg-4, col-xl-4,
    col-xs-5, col-sm-5, col-md-5, col-lg-5, col-xl-5, col-xs-6, col-sm-6, col-md-6, col-lg-6, col-xl-6,
    col-xs-7, col-sm-7, col-md-7, col-lg-7, col-xl-7, col-xs-8, col-sm-8, col-md-8, col-lg-8, col-xl-8,
    col-xs-9, col-sm-9, col-md-9, col-lg-9, col-xl-9, col-xs-10, col-sm-10, col-md-10, col-lg-10, col-xl-10,
    col-xs-11, col-sm-11, col-md-11, col-lg-11, col-xl-11, col-xs-12, col-sm-12, col-md-12, col-lg-12, col-xl-12


  • offset
    Anvendes sammen med almindelige 'col'-selektorer. Indsætter det anførte antal kolonner foran 'col'-selektoren. F.eks:
    <div class="col-md-8 col-md-offset-4">
  • aa-pull-nn
    Div-blokken vises det anførte antal kolonner længere til venstre. F.eks:
    <div class="col-md-8 col-md-pull-4">
  • aa-push-nn
    Div-blokken vises det anførte antal kolonner længere til højre. F.eks:
    <div class="col-md-8 col-md-push-4">
  • offsetpullpush
    * = sx | sm | md | lg
    col-*-offset-0
    ...
    col-*-offset-12
    col-*-pull-0
    ...
    col-*-pull-12
    col-*-push-0
    ...
    .col-*-push-12




hidden / visible


Anvendes til at styre om et col-felt skal afvige fra dets aktuelle default og være skjult eller synligt i en klasse.


  • hidden
    Styring af i hvilken specifik klasse dataene vil være skjulte
  • visible
    Styring af i hvilken specifik klasse dataene vil være synlige

  • hiddenvisible
    hidden-xs
    hidden-sm
    hidden-md
    hidden-lg
    hidden-xl
    hidden-print
    visible-xs
    visible-sm
    visible-md
    visible-lg
    visible-xl
    visible-print




Flex



Eksempler på anvendelse af col-selektorer


Tre datafelter i samme størrelse
<div class="row">
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
</div>
3 datafelter ved siden af hinanden på hver 4 kolonner. Knyttet til anvendelse i sm-kategorien.
Tre datafelter i forskellig størrelse
<div class="row">
    <div class="col-sm-3">.col-md-3</div>
    <div class="col-sm-6">.col-md-6</div>
    <div class="col-sm-3">.col-md-3</div>
</div>
3 datafelter ved siden af hinanden i to forskellige størrelser. Knyttet til anvendelse i md-kategoriien.
multibel anvendelse
<div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
2 datafelter med multibel anvendelse:<br />
I xs-kategorien vises dataene i to datafelter under hinanden på hhv. 12 og 6 kolonner.<br />
I md-kategorien vises dataene i to datafelter ved siden af hinanden på hhv. 8 og 4 kolonner.
Multibel anvendelse
<div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
    <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
</div>
I xs-kategorien vises dataene i to datafelter under hinanden på hhv. 12 og 6 kolonner.
I sm-kategorien vises dataene i det første datafelt på 6 kolonner.
I lg-kategorien vises dataene i to datafelter ved siden af hinanden på hhv. 8 og 4 kolonner.
Offset
<div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
Det første datafelt vises som 5 kolonner bred i sm-kategorgien og 6 kolonner i md-kategorien.
Det første datafelt vises som 5 kolonner bred i sm-kategorgien og 6 kolonner i md-kategorien. I sm er der indskudt et datafrit felt på 2 kolonner foran de 5 kolonner.
Push og pull
<div class="row">
    <div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
    <div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>
Det første datafelt trækkes 8 kolonner til venstre før det vises.
Det andet datafelt skubbes 4 kolonner til højre før det vises.
Datafelt Wrapping
<div class="row">
    <div class="col-xs-9">.col-xs-9</div>
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-6">.col-xs-6</div>
</div>
Med mulighed for max. 12 kolonner ved siden af hinanden wrapper felt 2 ned på næste linie. Linie 3 lægger sig her i forlængelse af linie 2.
Indlejrede kolonner
<div class="row">
    <div class="col-sm-9">
       Level 1: .col-sm-9
       <div class="row">
          <div class="col-xs-8 col-sm-6">
             Level 2: .col-xs-8 .col-sm-6
          </div>
          <div class="col-xs-4 col-sm-6">
             Level 2: .col-xs-4 .col-sm-6
          </div>
       </div> <!-- row 2 slut -->
    </div>
</div>
Den indlejrede row indebærer, at dens to datafelter indsættes i det ydre datafelt.
Inde i den indlejrede row kan der igen anvendes 12 kolonner.
Denne procudure kan teknisk set gentages et ubegrænset antal gange.




















x
x