Pylder
Learje hoe't jo kolommen kinne wizigje mei in hantsjefol opsjes foar ôfstimming, oardering en kompensaasje troch ús flexbox-rastersysteem. Plus, sjoch hoe't jo kolomklassen brûke om breedtes fan net-rastereleminten te behearjen.
Hoe't se wurkje
-
Kolommen bouwe op de flexbox-arsjitektuer fan it raster. Flexbox betsjut dat wy opsjes hawwe foar it feroarjen fan yndividuele kolommen en it wizigjen fan groepen fan kolommen op it rigelnivo . Jo kieze hoe't kolommen groeie, krimpje of oars feroarje.
-
By it bouwen fan rasteryndielingen giet alle ynhâld yn kolommen. De hiërargy fan Bootstrap's raster giet fan kontener nei rige nei kolom nei jo ynhâld. By seldsume gelegenheden kinne jo ynhâld en kolom kombinearje, mar wês bewust dat d'r ûnbedoelde gefolgen kinne wêze.
-
Bootstrap omfettet foarôf definieare klassen foar it meitsjen fan rappe, responsive layouts. Mei seis brekpunten en in tsiental kolommen op elke rastertier, hawwe wy tsientallen klassen al boud foar jo om jo winske yndielingen te meitsjen. Dit kin útskeakele wurde fia Sass as jo wolle.
Alignment
Brûk flexbox-ôfstimmingsprogramma's om kolommen fertikaal en horizontaal út te rjochtsjen.
Fertikale ôfstimming
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Horizontale ôfstimming
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-evenly">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Column wrapping
As mear as 12 kolommen wurde pleatst binnen ien rige, sil elke groep fan ekstra kolommen, as ien ienheid, wrap op in nije rigel.
Sûnt 9 + 4 = 13 > 12, dizze 4-kolom-wide div wurdt ferpakt op in nije line as ien oanienwei ienheid.
Folgjende kolommen trochgean lâns de nije line.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
Kolom brekt
It brekken fan kolommen nei in nije rigel yn flexbox fereasket in lytse hack: foegje in elemint ta mei width: 100%
wêr't jo jo kolommen yn in nije rigel wolle wrapje. Normaal wurdt dit dien mei meardere .row
s, mar net elke útfiering metoade kin rekken mei dit.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
Jo kinne dizze brek ek tapasse op spesifike brekpunten mei ús responsive display-hulpprogramma's .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Weromoardieling
Klassen bestelle
Brûk .order-
klassen foar it kontrolearjen fan de fisuele folchoarder fan jo ynhâld. Dizze klassen binne responsyf, dus jo kinne it order
troch brekpunt ynstelle (bygelyks .order-1.order-md-2
). Omfettet stipe foar 1
troch 5
alle seis rasterlagen.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
D'r binne ek responsive .order-first
en .order-last
klassen dy't de order
fan in elemint feroarje troch respektivelik oan te passen order: -1
en order: 6
. Dizze klassen kinne ek wurde kombinearre mei de nûmere .order-*
klassen as nedich.
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Offset kolommen
Jo kinne rasterkolommen op twa manieren kompensearje: ús responsive .offset-
rasterklassen en ús marzje-nutsbedriuwen . Gridklassen binne grutte om te passen by kolommen, wylst marzjes handiger binne foar rappe opmaak wêr't de breedte fan 'e offset fariabel is.
Offset klassen
Ferpleats kolommen nei rjochts mei help fan .offset-md-*
klassen. Dizze klassen fergrutsje de loftermarge fan in kolom troch *
kolommen. Bygelyks, .offset-md-4
beweecht .col-md-4
oer fjouwer kolommen.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
Neist kolom wiskjen by responsive brekpunten, moatte jo miskien offsets weromsette. Sjoch dit yn aksje yn it rasterfoarbyld .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
Margin utilities
Mei de ferhuzing nei flexbox yn v4, kinne jo marzje-hulpprogramma's brûke lykas sibbenkolommen fan inoar .me-auto
ôf te twingen.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
</div>
<div class="row">
<div class="col-auto me-auto">.col-auto .me-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Standalone kolomklassen
De .col-*
klassen kinne ek brûkt wurde bûten in .row
te jaan in elemint in spesifike breedte. Wannear't kolomklassen brûkt wurde as net-direkte bern fan in rige, wurde de paddings weilitten.
<div class="col-3 bg-light p-3 border">
.col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: width of 75% above sm breakpoint
</div>
De klassen kinne wurde brûkt tegearre mei nutsbedriuwen om responsive driuwende ôfbyldings te meitsjen. Soargje derfoar dat de ynhâld yn in .clearfix
wrapper is om de float te wiskjen as de tekst koarter is.
In paragraaf fan plakhâlder tekst. Wy brûke it hjir om it gebrûk fan 'e clearfix-klasse sjen te litten. Wy foegje hjir nochal wat sinleaze frases ta om te demonstrearjen hoe't de kolommen hjir ynteraksje mei it driuwende byld.
Sa't jo sjen kinne, wrapje de paragrafen sierlik om it driuwende byld. Stel jo no foar hoe dit der útsjen soe mei wat aktuele ynhâld hjiryn, ynstee fan allinich dizze saaie plakhâldertekst dy't trochgiet en trochgiet, mar eins gjin taastbere ynformaasje oerbringt. It nimt gewoan romte yn en moat net echt lêzen wurde.
En dochs, hjir binne jo, noch trochhâldend yn it lêzen fan dizze plakhâldertekst, hoopje op wat mear ynsjoch, of wat ferburgen peaskeaai fan ynhâld. In grapke, miskien. Spitigernôch is d'r hjir neat fan.
<div class="clearfix">
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>
<p>
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
</p>
<p>
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
</p>
</div>