Kolonnas
Uzziniet, kā modificēt kolonnas, izmantojot vairākas līdzināšanas, kārtošanas un nobīdes iespējas, pateicoties mūsu flexbox režģa sistēmai. Turklāt uzziniet, kā izmantot kolonnu klases, lai pārvaldītu ar režģi nesaistītu elementu platumu.
Kā viņi strādā
-
Kolonnas balstās uz režģa flexbox arhitektūru. Flexbox nozīmē, ka mums ir iespējas mainīt atsevišķas kolonnas un modificēt kolonnu grupas rindu līmenī . Jūs izvēlaties, kā kolonnas palielinās, samazinās vai citādi mainās.
-
Veidojot režģa izkārtojumus, viss saturs tiek ievietots kolonnās. Bootstrap režģa hierarhija mainās no konteinera uz rindu uz kolonnu līdz jūsu saturam. Retos gadījumos varat apvienot saturu un kolonnu, taču ņemiet vērā, ka var būt neparedzētas sekas.
-
Bootstrap ietver iepriekš definētas klases ātru, atsaucīgu izkārtojumu izveidei. Ar sešiem pārtraukuma punktiem un desmitiem kolonnu katrā režģa līmenī mēs jau esam izveidojuši desmitiem klašu, lai jūs varētu izveidot vēlamos izkārtojumus. Ja vēlaties, to var atspējot, izmantojot Sass.
Izlīdzināšana
Izmantojiet flexbox līdzināšanas utilītas, lai vertikāli un horizontāli izlīdzinātu kolonnas.
Vertikālā izlīdzināšana
<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>
Horizontālā izlīdzināšana
<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>
Kolonnu ietīšana
Ja vienā rindā ir ievietotas vairāk nekā 12 kolonnas, katra papildu kolonnu grupa kā viena vienība tiks aplauzta jaunā rindā.
Tā kā 9 + 4 = 13 > 12, šis 4 kolonnu platums tiek ietīts jaunā rindā kā viena blakus vienība.
Nākamās kolonnas turpinās pa jauno līniju.
<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>
Kolonnu pārtraukumi
Lai sadalītu kolonnas uz jaunu rindiņu programmā flexbox, ir nepieciešams neliels uzlauzums: pievienojiet elementu ar vietu, width: 100%
kur vēlaties aplauzt kolonnas, jaunai rindai. Parasti tas tiek paveikts ar vairākiem .row
s, bet ne katra ieviešanas metode var to ņemt vērā.
<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>
Varat arī lietot šo pārtraukumu noteiktos pārtraukuma punktos, izmantojot mūsu adaptīvās displeja utilītas .
<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>
Pārkārtošana
Pasūtiet nodarbības
Izmantojiet .order-
klases, lai kontrolētu sava satura vizuālo secību . Šīs klases ir adaptīvas, tāpēc varat iestatīt order
pēc pārtraukuma punktu (piemēram, .order-1.order-md-2
). Ietver atbalstu 1
caurbraukšanai 5
visos sešos režģa līmeņos.
<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>
Ir arī adaptīvās .order-first
un .order-last
klases, kas maina order
elementa vērtību, attiecīgi piemērojot order: -1
un order: 6
. Šīs nodarbības pēc vajadzības var arī sajaukt ar numurētajām .order-*
klasēm.
<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>
Kolonnu nobīde
Varat kompensēt režģa kolonnas divos veidos: mūsu adaptīvās .offset-
režģa klases un mūsu rezerves utilītas . Režģa klases ir pielāgotas kolonnām, savukārt piemales ir noderīgākas ātrajiem izkārtojumiem, kur nobīdes platums ir mainīgs.
Ofseta klases
Pārvietojiet kolonnas pa labi, izmantojot .offset-md-*
klases. Šīs klases palielina kolonnas kreiso malu par *
kolonnām. Piemēram, .offset-md-4
pārvietojas .col-md-4
pa četrām kolonnām.
<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>
Papildus kolonnu dzēšanai adaptīvos pārtraukumpunktos, iespējams, būs jāatiestata nobīdes. Skatiet to darbībā režģa piemērā .
<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>
Maržas komunālie pakalpojumi
Pārejot uz flexbox 4. versijā, varat izmantot piemales utilītas, piemēram .me-auto
, lai piespiestu kolonnas atdalīt vienu no otras.
<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>
Atsevišķas kolonnu klases
Klases .col-*
var izmantot arī ārpus a .row
, lai piešķirtu elementam noteiktu platumu. Ikreiz, kad kolonnu klases tiek izmantotas kā rindas netiešas atvases, pildījumi tiek izlaisti.
<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>
Klases var izmantot kopā ar utilītprogrammām, lai izveidotu reaģējošus peldošus attēlus. Noteikti ietiniet saturu .clearfix
iesaiņojumā, lai notīrītu pludiņu, ja teksts ir īsāks.
Viettura teksta rindkopa. Mēs to izmantojam šeit, lai parādītu clearfix klases izmantošanu. Mēs šeit pievienojam dažas bezjēdzīgas frāzes, lai parādītu, kā kolonnas šeit mijiedarbojas ar peldošo attēlu.
Kā redzat, rindkopas graciozi apvij peldošo attēlu. Tagad iedomājieties, kā tas izskatītos ar reālu saturu, nevis tikai šo garlaicīgo viettura tekstu, kas turpinās un turpinās, bet patiesībā nenodod taustāmu informāciju. Tas vienkārši aizņem vietu, un to īsti nevajadzētu lasīt.
Un tomēr, lūk, jūs joprojām neatlaidīgi lasāt šo viettura tekstu, cerot uz vēl kādu atziņu vai kādu slēptu satura Lieldienu olu. Joks, iespējams. Diemžēl šeit nekā tāda nav.
<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>