Sarakkeet
Opi muokkaamaan sarakkeita kourallisilla kohdistus-, järjestys- ja offset-vaihtoehdoilla flexbox-ruudukkojärjestelmämme ansiosta. Lisäksi katso, kuinka sarakeluokkien avulla voit hallita muiden kuin ruudukkoelementtien leveyksiä.
Miten ne toimivat
-
Sarakkeet rakentuvat ruudukon flexbox-arkkitehtuurille. Flexbox tarkoittaa, että meillä on vaihtoehtoja muuttaa yksittäisiä sarakkeita ja muokata sarakeryhmiä rivitasolla . Voit valita, miten sarakkeet kasvavat, pienenevät tai muutoin muuttuvat.
-
Kun rakennat ruudukkoasetteluja, kaikki sisältö menee sarakkeisiin. Bootstrapin ruudukon hierarkia kulkee säilöstä riviin sarakkeeseen sisältöösi. Harvinaisissa tapauksissa voit yhdistää sisällön ja sarakkeen, mutta muista, että sillä voi olla ei-toivottuja seurauksia.
-
Bootstrap sisältää ennalta määritellyt luokat nopeiden, reagoivien asettelujen luomiseen. Jokaisella ruudukkotasolla on kuusi keskeytyspistettä ja tusina saraketta, joten meillä on jo valmiina kymmeniä luokkia, joiden avulla voit luoda haluamasi asettelut. Tämä voidaan halutessasi poistaa käytöstä Sassin kautta.
Tasaus
Käytä flexbox-kohdistusapuohjelmia sarakkeiden kohdistamiseen pysty- ja vaakasuunnassa.
Pystysuuntainen kohdistus
<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>
Vaakasuora kohdistaminen
<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>
Sarakkeen kääre
Jos yhdelle riville sijoitetaan enemmän kuin 12 saraketta, jokainen ylimääräisten sarakkeiden ryhmä rivittyy yhtenä yksikkönä uudelle riville.
Koska 9 + 4 = 13 > 12, tämä 4 sarakkeen levyinen div kääritään uudelle riville yhtenä yhtenäisenä yksikkönä.
Seuraavat sarakkeet jatkavat uutta riviä pitkin.
<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>
Sarake katkeaa
Sarakkeiden katkaiseminen uudelle riville flexboxissa vaatii pienen hakkeroinnin: lisää elementti uudelle riville, width: 100%
missä haluat rivittää sarakkeet. Normaalisti tämä suoritetaan useilla .row
s:illä, mutta kaikki toteutustavat eivät voi ottaa huomioon tätä.
<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>
Voit myös käyttää tätä taukoa tietyissä keskeytyspisteissä responsiivisten näyttöapuohjelmiemme avulla .
<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>
Järjestetään uudelleen
Tilaa luokat
Käytä .order-
luokkia hallitaksesi sisältösi visuaalista järjestystä . Nämä luokat ovat responsiivisia, joten voit asettaa order
keskeytyskohdan (esim. .order-1.order-md-2
). Sisältää tuen 1
läpikäymiselle 5
kaikilla kuudella ruudukkotasolla.
<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>
On myös responsiivisia .order-first
ja .order-last
luokkia, jotka muuttavat order
elementin soveltamista order: -1
ja order: 6
vastaavasti. Nämä luokat voidaan myös tarvittaessa sekoittaa numeroituihin .order-*
luokkiin.
<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>
Sarakkeiden offsetointi
Voit siirtää ruudukon sarakkeita kahdella tavalla: responsiiviset .offset-
ruudukkoluokat ja marginaaliapuohjelmamme . Ruudukkoluokat on mitoitettu vastaamaan sarakkeita, kun taas marginaalit ovat hyödyllisempiä nopeissa asetteluissa, joissa siirtymän leveys vaihtelee.
Offset-luokat
Siirrä sarakkeita oikealle .offset-md-*
luokkien avulla. Nämä luokat lisäävät sarakkeen vasenta marginaalia *
sarakkeilla. Esimerkiksi .offset-md-4
siirtyy .col-md-4
neljän sarakkeen yli.
<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>
Responsiivisten keskeytyspisteiden sarakkeen tyhjentämisen lisäksi saatat joutua nollaamaan siirtymät. Katso tämä toiminnassa ruudukkoesimerkissä .
<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>
Marginaaliset apuohjelmat
Kun olet siirtynyt flexboxiin v4:ssä, voit käyttää marginaaliapuohjelmia, kuten .me-auto
pakottaa sisarussarakkeet poispäin toisistaan.
<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>
Itsenäiset sarakeluokat
Luokkia .col-*
voidaan käyttää myös a:n ulkopuolella .row
antamaan elementille tietty leveys. Aina kun sarakeluokkia käytetään rivin ei-suorina lapsina, täytteet jätetään pois.
<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>
Luokkia voidaan käyttää yhdessä apuohjelmien kanssa responsiivisten kelluvien kuvien luomiseen. Muista kääriä sisältö .clearfix
kääreeseen poistaaksesi kellunta, jos teksti on lyhyempi.
Kappale paikkamerkkitekstiä. Käytämme sitä tässä osoittamaan clearfix-luokan käyttöä. Lisäämme tähän muutamia merkityksettömiä lauseita osoittamaan, kuinka sarakkeet ovat vuorovaikutuksessa kelluvan kuvan kanssa.
Kuten näet, kappaleet kietoutuvat kauniisti kelluvan kuvan ympärille. Kuvittele nyt, miltä tämä näyttäisi todellisen sisällön kanssa, sen sijaan, että tämä tylsä paikkamerkkiteksti jatkuu ja jatkuu, mutta ei välitä konkreettista tietoa. Se yksinkertaisesti vie tilaa, eikä sitä todellakaan pidä lukea.
Ja kuitenkin, tässä sinä olet edelleen sinnikkäästi lukemassa tätä paikkamerkkitekstiä, toivoen lisää oivalluksia tai jotain piilotettua pääsiäismunaa. Ehkä vitsi. Valitettavasti täällä ei ole sellaista.
<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>