Režģa sistēma
Izmantojiet mūsu jaudīgo mobilajām ierīcēm paredzēto flexbox režģi, lai izveidotu visu formu un izmēru izkārtojumus, pateicoties divpadsmit kolonnu sistēmai, pieciem noklusējuma reaģējošiem līmeņiem, Sass mainīgajiem un mixiniem, kā arī desmitiem iepriekš definētu klašu.
Kā tas strādā
Bootstrap režģa sistēma izmanto virkni konteineru, rindu un kolonnu, lai izkārtotu un izlīdzinātu saturu. Tas ir izveidots ar flexbox un pilnībā reaģē. Tālāk ir sniegts piemērs un padziļināts ieskats režģa veidošanā.
Vai esat jauns vai nepazīstat flexbox? Izlasiet šo CSS triku flexbox rokasgrāmatu , lai uzzinātu pamatinformāciju, terminoloģiju, vadlīnijas un koda fragmentus.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Iepriekš minētajā piemērā tiek izveidotas trīs vienāda platuma kolonnas mazās, vidējās, lielās un īpaši lielās ierīcēs, izmantojot mūsu iepriekš definētās režģa klases. Šīs kolonnas ir centrētas lapā ar vecāku .container
.
Sadalot to, tas darbojas šādi:
- Konteineri nodrošina iespēju centrēt un horizontāli polsterēt jūsu vietnes saturu. Izmantojiet
.container
adaptīvam pikseļu platumam vai.container-fluid
visiemwidth: 100%
skata loga un ierīces izmēriem. - Rindas ir kolonnu iesaiņojumi. Katrai kolonnai ir horizontāla
padding
(saukta par noteku), lai kontrolētu atstarpi starp tām. Pēcpadding
tam tas tiek neitralizēts rindās ar negatīvām starpībām. Tādējādi viss jūsu sleju saturs tiek vizuāli izlīdzināts kreisajā pusē. - Režģa izkārtojumā saturs ir jāievieto kolonnās, un tikai kolonnas var būt tiešie rindu atvasinājumi.
- Pateicoties flexbox, režģa kolonnas bez noteiktas
width
tiks automātiski izkārtotas kā vienāda platuma kolonnas. Piemēram, četri gadījumi.col-sm
automātiski būs 25% platumā no mazā pārtraukuma punkta un uz augšu. Vairāk piemēru skatiet sadaļā Automātiskā izkārtojuma kolonnas . - Kolonnu klases norāda kolonnu skaitu, ko vēlaties izmantot no 12 iespējamajām rindām. Tātad, ja vēlaties trīs vienāda platuma kolonnas šķērsām, varat izmantot
.col-4
. - Kolonnas
width
s ir iestatītas procentos, tāpēc tās vienmēr ir mainīgas un izmērītas attiecībā pret galveno elementu. - Kolonnām ir horizontāli
padding
, lai izveidotu notekcaurules starp atsevišķām kolonnām, taču jūs varat noņemtmargin
no rindām unpadding
kolonnām.no-gutters
, izmantojot.row
. - Lai režģis būtu adaptīvs, ir pieci režģa pārtraukuma punkti, viens katram adaptīvajam pārtraukuma punktam : visi pārtraukuma punkti (īpaši mazi), mazi, vidēji, lieli un īpaši lieli.
- Režģa pārtraukuma punkti ir balstīti uz minimālā platuma multivides vaicājumiem, kas nozīmē, ka tie attiecas uz šo vienu pārtraukuma punktu un visiem tiem, kas atrodas virs tā (piemēram,
.col-sm-4
attiecas uz mazām, vidējām, lielām un īpaši lielām ierīcēm, bet ne uz pirmoxs
pārtraukuma punktu). - Varat izmantot iepriekš definētas režģa klases (piemēram,
.col-4
) vai Sass mixins , lai iegūtu vairāk semantiskas iezīmēšanas.
Ņemiet vērā ierobežojumus un kļūdas saistībā ar flexbox , piemēram, nespēju izmantot dažus HTML elementus kā elastīgus konteinerus .
Režģa iespējas
Lai gan Bootstrap izmanto em
s vai rem
s, lai definētu lielāko daļu izmēru, px
s tiek izmantoti režģa pārtraukuma punktiem un konteineru platumiem. Tas ir tāpēc, ka skatvietas platums ir norādīts pikseļos un nemainās līdz ar fonta lielumu .
Skatiet, kā Bootstrap režģa sistēmas aspekti darbojas vairākās ierīcēs, izmantojot ērtu tabulu.
Īpaši mazs <576 pikseļi |
Mazs ≥576 pikseļi |
Vidēja ≥768 pikseļi |
Liels ≥992 pikseļi |
Īpaši liels ≥1200 pikseļi |
|
---|---|---|---|---|---|
Maksimālais konteinera platums | Nav (automātiski) | 540 pikseļi | 720 pikseļi | 960 pikseļi | 1140 pikseļi |
Klases prefikss | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
Kolonnu skaits | 12 | ||||
Notekas platums | 30 pikseļi (15 pikseļi katrā kolonnas pusē) | ||||
Nestabils | Jā | ||||
Kolonnu sakārtošana | Jā |
Automātiskā izkārtojuma kolonnas
Izmantojiet pārtraukuma punktam raksturīgās kolonnu klases, lai atvieglotu kolonnu lieluma noteikšanu bez nepārprotamas numurētas klases, piemēram, .col-sm-6
.
Vienāda platuma
Piemēram, šeit ir divi režģa izkārtojumi, kas attiecas uz katru ierīci un skata logu, no xs
līdz xl
. Pievienojiet neierobežotu skaitu klases bez vienībām katram nepieciešamajam pārtraukuma punktam, un katra kolonna būs vienāda platuma.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Vienāda platuma daudzrindu
Izveidojiet vienāda platuma kolonnas, kas aptver vairākas rindiņas, ievietojot vietu, .w-100
kur vēlaties, lai kolonnas pāriet uz jaunu rindiņu. Padariet pārtraukumus atsaucīgus, sajaucot .w-100
ar dažām adaptīvām displeja utilītiem .
Bija Safari flexbox kļūda , kas neļāva tai darboties bez skaidra flex-basis
vai border
. Ir risinājumi vecākām pārlūkprogrammu versijām, taču tie nav nepieciešami, ja jūsu mērķa pārlūkprogrammas neietilpst kļūdainās versijās.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
Vienas kolonnas platuma iestatīšana
Flexbox režģa kolonnu automātiskais izkārtojums arī nozīmē, ka varat iestatīt vienas kolonnas platumu un automātiski mainīt ap to esošo kolonnu izmērus. Varat izmantot iepriekš definētas režģa klases (kā parādīts zemāk), režģa kombinācijas vai iekļauto platumu. Ņemiet vērā, ka pārējās kolonnas tiks mainītas neatkarīgi no centrālās kolonnas platuma.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Mainīga platuma saturs
Izmantojiet col-{breakpoint}-auto
klases, lai iestatītu kolonnu izmērus, pamatojoties uz to satura dabisko platumu.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Atsaucīgas klases
Bootstrap režģī ir iekļauti pieci iepriekš definētu klašu līmeņi, lai izveidotu sarežģītus, atsaucīgus izkārtojumus. Pielāgojiet sleju izmērus īpaši mazās, mazās, vidējās, lielās vai īpaši lielās ierīcēs, kā vien vēlaties.
Visi pārtraukuma punkti
Režģiem, kas ir vienādi no mazākajām ierīcēm līdz lielākajiem, izmantojiet .col
un .col-*
klases. Norādiet numurētu klasi, ja nepieciešama īpaša izmēra kolonna; pretējā gadījumā jūtieties brīvi pieturēties pie .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Sakrauts horizontāli
Izmantojot vienu .col-sm-*
klašu kopu, varat izveidot pamata režģa sistēmu, kas sākas sakrauta un kļūst horizontāla mazajā pārtraukuma punktā ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Sajauc un savieno
Vai nevēlaties, lai jūsu kolonnas vienkārši tiktu sakrautas dažos režģa līmeņos? Katram līmenim pēc vajadzības izmantojiet dažādu klašu kombināciju. Skatiet tālāk sniegto piemēru, lai iegūtu labāku priekšstatu par to, kā tas viss darbojas.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Notekcaurules
Notekcaurules var atbilstoši pielāgot, izmantojot pārtraukuma punktam raksturīgu polsterējumu un negatīvas piemales lietderības klases. Lai mainītu notekcaurules noteiktā rindā, savienojiet pārī negatīvās piemales utilītu uz s .row
un atbilstošo polsterējuma utilītu .col
. Lai izvairītos no nevēlamas pārplūdes, iespējams, būs jāpielāgo arī pamatelements .container
vai vecāks, izmantojot vēlreiz atbilstošu polsterējuma utilītu..container-fluid
Šeit ir piemērs Bootstrap režģa pielāgošanai lielajā ( lg
) pārtraukuma punktā un augstāk. Mēs esam palielinājuši .col
polsterējumu ar .px-lg-5
, neitralizējuši to, izmantojot .mx-lg-n5
vecāku .row
un pēc tam pielāgojām .container
aptinumu ar .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
Rindu kolonnas
Izmantojiet adaptīvās .row-cols-*
klases, lai ātri iestatītu to kolonnu skaitu, kas vislabāk atveido jūsu saturu un izkārtojumu. Tā kā parastās .col-*
klases attiecas uz atsevišķām kolonnām (piemēram, .col-md-4
), rindu kolonnu klases ir iestatītas vecākajā .row
kā saīsne.
Izmantojiet šīs rindu kolonnu klases, lai ātri izveidotu pamata režģa izkārtojumus vai kontrolētu karšu izkārtojumus.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Varat arī izmantot pievienoto Sass mixin, row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Izlīdzināšana
Izmantojiet flexbox līdzināšanas utilītas, lai vertikāli un horizontāli izlīdzinātu kolonnas. Internet Explorer 10–11 neatbalsta elastīgo vienumu vertikālo līdzināšanu, ja elastīgajam konteineram ir, min-height
kā parādīts tālāk. Plašāku informāciju skatiet Flexbugs #3.
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>
Nekādu notekcauruļu
Notekcaurules starp kolonnām mūsu iepriekš definētajās režģa klasēs var noņemt, izmantojot .no-gutters
. Tādējādi tiek noņemti negatīvie margin
s no visām tiešajām atvasinātajām kolonnām .row
un horizontālie elementi.padding
Šeit ir avota kods šo stilu izveidei. Ņemiet vērā, ka kolonnu ignorēšanas tvērums attiecas tikai uz pirmajām pakārtotajām kolonnām un tiek atlasīts, izmantojot atribūtu atlasītāju . Lai gan tas ģenerē specifiskāku atlasītāju, kolonnu polsterējumu joprojām var pielāgot, izmantojot atstarpju utilītas .
Nepieciešams dizains no malas līdz malai? Atlaidiet vecāku .container
vai .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Praksē tas izskatās šādi. Ņemiet vērā, ka varat turpināt to izmantot ar visām pārējām iepriekš definētajām režģa klasēm (tostarp kolonnu platumiem, adaptīviem līmeņiem, pārkārtojumiem un citiem).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</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 12
visos piecos 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-12">
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: 13
( order: $columns + 1
). Šī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ītprogrammas, piemēram .mr-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 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Ligzdošana
Lai ligzdotu saturu ar noklusējuma režģi, esošajā kolonnā pievienojiet jaunu kolonnu .row
kopu . Ligzdotajās rindās ir jāietver kolonnu kopa, kurā ir 12 vai mazāk (nav obligāti jāizmanto visas 12 pieejamās kolonnas)..col-sm-*
.col-sm-*
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Sass mixins
Izmantojot Bootstrap avota Sass failus, jums ir iespēja izmantot Sass mainīgos un mixins, lai izveidotu pielāgotus, semantiskus un atsaucīgus lapu izkārtojumus. Mūsu iepriekš definētās režģa klases izmanto šos pašus mainīgos un miksus, lai nodrošinātu visu lietošanai gatavu klašu komplektu ātri reaģējošiem izkārtojumiem.
Mainīgie lielumi
Mainīgie un kartes nosaka kolonnu skaitu, notekas platumu un multivides vaicājuma punktu, kurā sākt peldošās kolonnas. Mēs tos izmantojam, lai ģenerētu iepriekš definētās režģa klases, kas dokumentētas iepriekš, kā arī tālāk uzskaitītajiem pielāgotajiem maisījumiem.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
Maisījumi
Mixins tiek izmantoti kopā ar režģa mainīgajiem, lai ģenerētu semantisko CSS atsevišķām režģa kolonnām.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Lietošanas piemērs
Varat modificēt mainīgos uz savām pielāgotajām vērtībām vai vienkārši izmantot mixinus ar to noklusējuma vērtībām. Šeit ir piemērs noklusējuma iestatījumu izmantošanai, lai izveidotu divu kolonnu izkārtojumu ar atstarpi.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Režģa pielāgošana
Izmantojot mūsu iebūvētos režģa Sass mainīgos un kartes, ir iespējams pilnībā pielāgot iepriekš definētās režģa klases. Mainiet līmeņu skaitu, multivides vaicājuma izmērus un konteinera platumus un pēc tam atkārtoti kompilējiet.
Kolonnas un notekcaurules
Režģa kolonnu skaitu var mainīt, izmantojot Sass mainīgos. $grid-columns
tiek izmantots, lai ģenerētu katras atsevišķas kolonnas platumu (procentos), vienlaikus $grid-gutter-width
iestatot kolonnu noteku platumu.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Režģa līmeņi
Pārvietojoties ārpus pašām kolonnām, varat arī pielāgot režģa līmeņu skaitu. Ja vēlaties tikai četrus režģa līmeņus, atjauniniet $grid-breakpoints
un $container-max-widths
uz kaut ko līdzīgu:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Veicot izmaiņas Sass mainīgajos vai kartēs, izmaiņas ir jāsaglabā un jāpārkompilē. To darot, tiks izvadīts pavisam jauns iepriekš definētu režģa klašu komplekts kolonnu platumam, nobīdēm un secībai. Tiks atjauninātas arī atsaucīgās redzamības utilītas, lai izmantotu pielāgotos pārtraukumpunktus. Noteikti iestatiet režģa vērtības px
(nevis rem
, em
, vai %
).