Stupci
Naučite kako modificirati stupce s pregršt opcija za poravnanje, redoslijed i pomak zahvaljujući našem sustavu mreže flexbox. Osim toga, pogledajte kako koristiti klase stupaca za upravljanje širinama elemenata koji nisu rešetkasti.
Kako rade
-
Stupci se grade na mrežnoj flexbox arhitekturi. Flexbox znači da imamo opcije za mijenjanje pojedinačnih stupaca i modificiranje grupa stupaca na razini retka . Vi birate kako će se stupci povećavati, smanjivati ili na drugi način mijenjati.
-
Prilikom izrade mrežnih izgleda, sav sadržaj ide u stupce. Hijerarhija Bootstrapove rešetke ide od spremnika preko retka do stupca do vašeg sadržaja. U rijetkim slučajevima možete kombinirati sadržaj i kolumnu, ali imajte na umu da može doći do neželjenih posljedica.
-
Bootstrap uključuje unaprijed definirane klase za stvaranje brzih, responzivnih izgleda. Sa šest prijelomnih točaka i desetak stupaca na svakoj razini rešetke, imamo desetke klasa koje su već izgrađene za vas da kreirate željene izglede. Ovo se može onemogućiti putem Sassa ako želite.
Poravnanje
Upotrijebite pomoćne programe za poravnanje flexbox za okomito i vodoravno poravnavanje stupaca.
Okomito poravnanje
<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>
Horizontalno poravnanje
<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>
Omatanje stupaca
Ako je više od 12 stupaca postavljeno unutar jednog retka, svaka grupa dodatnih stupaca će se, kao jedna cjelina, prebaciti u novi redak.
Budući da je 9 + 4 = 13 > 12, ovaj div sa širinom od 4 stupca premotava se u novi redak kao jedna susjedna jedinica.
Sljedeći stupci nastavljaju duž novog retka.
<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>
Lomovi stupaca
Razbijanje stupaca u novi redak u flexboxu zahtijeva mali hack: dodajte element width: 100%
gdje god želite prelomiti svoje stupce u novi redak. Obično se to postiže s više .row
s, ali ne može svaka metoda implementacije to objasniti.
<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>
Ovaj prekid također možete primijeniti na određenim prijelomnim točkama s našim uslužnim programima za responzivni prikaz .
<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>
Preuređivanje
Red klase
Koristite .order-
klase za kontrolu vizualnog poretka vašeg sadržaja. Ove su klase responzivne, tako da možete postaviti order
točku prekida (npr. .order-1.order-md-2
). Uključuje podršku za 1
kroz 5
svih šest razina mreže.
<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>
Također postoje responsive .order-first
i .order-last
klase koje mijenjaju order
element primjenom order: -1
i order: 6
, respektivno. Ove se klase također mogu po potrebi miješati s numeriranim .order-*
klasama.
<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>
Odstupanje stupaca
Stupce rešetke možete pomaknuti na dva načina: našim responzivnim .offset-
klasama rešetke i našim alatima za margine . Klase mreže veličine su tako da odgovaraju stupcima, dok su margine korisnije za brze rasporede gdje je širina pomaka varijabilna.
Offset klase
Pomaknite stupce udesno koristeći .offset-md-*
klase. Ove klase povećavaju lijevu marginu stupca po *
stupac. Na primjer, .offset-md-4
pomiče se .col-md-4
preko četiri stupca.
<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>
Uz brisanje stupaca na responzivnim prijelomnim točkama, možda ćete morati ponovno postaviti pomake. Pogledajte ovo na djelu u primjeru mreže .
<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>
Marginalne usluge
S prelaskom na flexbox u v4, možete koristiti pomoćne programe za margine kao što .me-auto
je prisilno udaljavanje srodnih stupaca jedan od drugog.
<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>
Samostalne klase stupaca
Klase .col-*
se također mogu koristiti izvan a .row
da bi se elementu dala određena širina. Kad god se klase stupaca koriste kao neizravna djeca retka, ispune su izostavljene.
<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>
Klase se mogu koristiti zajedno s uslužnim programima za stvaranje odgovarajućih plutajućih slika. Obavezno zamotajte sadržaj u .clearfix
omot kako biste uklonili float ako je tekst kraći.
Odlomak teksta rezerviranog mjesta. Ovdje ga koristimo da pokažemo korištenje klase clearfix. Ovdje dodajemo dosta besmislenih fraza kako bismo pokazali kako stupci ovdje komuniciraju s lebdećom slikom.
Kao što vidite, odlomci se graciozno omotavaju oko lebdeće slike. Sada zamislite kako bi ovo izgledalo s nekim stvarnim sadržajem ovdje, a ne samo s ovim dosadnim tekstom rezerviranog mjesta koji se nastavlja i nastavlja, ali zapravo ne prenosi nikakve opipljive informacije. Jednostavno zauzima prostor i ne treba ga baš čitati.
Pa ipak, evo vas, još uvijek ustrajete u čitanju ovog rezerviranog teksta, nadajući se još nekim uvidima ili nekom skrivenom uskršnjem jajetu sadržaja. Šala, možda. Nažalost, ovdje toga nema.
<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>