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, sešiem noklusējuma reaģējošiem līmeņiem, Sass mainīgajiem un mixiniem, kā arī desmitiem iepriekš definētu klašu.
Piemērs
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 skaidrojums par to, kā tīkla sistēma tiek apvienota.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Iepriekš minētajā piemērā tiek izveidotas trīs vienāda platuma kolonnas visās ierīcēs un skata portos, izmantojot mūsu iepriekš definētās režģa klases. Šīs kolonnas ir centrētas lapā ar vecāku .container
.
Kā tas strādā
Sadalot to, režģa sistēma tiek apvienota šādi:
-
Mūsu režģis atbalsta sešus atsaucīgus pārtraukumpunktus . Pārtraukuma punkti ir balstīti uz
min-width
multivides vaicājumiem, kas nozīmē, ka tie ietekmē šo pārtraukuma punktu un visus tos, kas atrodas virs tā (piemēram,.col-sm-4
attiecas uzsm
,md
,lg
,xl
, unxxl
). Tas nozīmē, ka varat kontrolēt konteinera un kolonnas izmērus un darbību pēc katra pārtraukuma punkta. -
Konteineri centrējiet un horizontāli novietojiet saturu. Izmantojiet
.container
adaptīvam pikseļu platumam,.container-fluid
visiemwidth: 100%
skata logiem un ierīcēm vai reaģējošu konteineru (piem.,.container-md
) mainīga un pikseļu platuma kombinācijai. -
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 piemalēm, lai nodrošinātu, ka jūsu kolonnu saturs ir vizuāli izlīdzināts kreisajā pusē. Rindas atbalsta arī modifikatoru klases, lai vienādi piemērotu kolonnu izmērus , un noteku klases , lai mainītu satura atstarpi. -
Kolonnas ir neticami elastīgas. Katrā rindā ir pieejamas 12 veidņu kolonnas, kas ļauj izveidot dažādas elementu kombinācijas, kas aptver jebkuru kolonnu skaitu. Kolonnu klases norāda veidnes kolonnu skaitu, kas jāpārklāj (piemēram,
col-4
aptver četras).width
s ir iestatīti procentos, tāpēc jums vienmēr ir vienāds relatīvais lielums. -
Arī notekcaurules ir atsaucīgas un pielāgojamas. Notekcaurules ir pieejamas visos pārtraukuma punktos ar tādiem pašiem izmēriem kā mūsu piemaļu un polsterējuma atstatums . Mainiet horizontālās notekas ar
.gx-*
klasēm, vertikālās notekas ar.gy-*
, vai visas notekcaurules ar.g-*
klasēm..g-0
ir pieejams arī notekcauruļu noņemšanai. -
Sass mainīgie, kartes un kombinācijas nodrošina tīklu. Ja nevēlaties izmantot iepriekš definētās režģa klases programmā Bootstrap, varat izmantot mūsu režģa avotu Sass , lai izveidotu savu ar vairāk semantisko iezīmējumu. Mēs arī iekļaujam dažus pielāgotus CSS rekvizītus, lai izmantotu šos Sass mainīgos, lai nodrošinātu vēl lielāku elastību.
Ņ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
Bootstrap režģa sistēma var pielāgoties visiem sešiem noklusējuma pārtraukuma punktiem un visiem jūsu pielāgotajiem pārtraukuma punktiem. Seši noklusējuma režģa līmeņi ir šādi:
- Īpaši mazs (xs)
- Mazs (sm)
- Vidēja (md)
- Liels (lg)
- Īpaši liels (xl)
- Īpaši īpaši liels (xxl)
Kā minēts iepriekš, katram no šiem pārtraukuma punktiem ir savs konteiners, unikāls klases prefikss un modifikatori. Lūk, kā mainās režģis šajos pārtraukuma punktos.
xs <576 pikseļi |
sm ≥576 pikseļi |
md ≥768 pikseļi |
lg ≥992 pikseļi |
xl ≥1200 pikseļi |
xxl ≥1400 pikseļi |
|
---|---|---|---|---|---|---|
Konteinersmax-width |
Nav (automātiski) | 540 pikseļi | 720 pikseļi | 960 pikseļi | 1140 pikseļi | 1320 pikseļi |
Klases prefikss | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
Kolonnu skaits | 12 | |||||
Notekas platums | 1,5 rem (0,75 rem kreisajā un labajā pusē) | |||||
Pielāgotas notekcaurules | Jā | |||||
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 xxl
. 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>
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 seši iepriekš definētu klašu līmeņi, lai izveidotu sarežģītus reaģējošus 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>
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., .col-md-4
), rindu kolonnu klases ir iestatītas vecākajā .row
kā noklusējuma iestatījums ietvertajām kolonnām. Ar .row-cols-auto
jūs varat piešķirt kolonnām to dabisko platumu.
Izmantojiet šīs rindu kolonnu klases, lai ātri izveidotu pamata režģa izkārtojumus vai kontrolētu karšu izkārtojumus un, ja nepieciešams, ignorētu kolonnu līmenī.
<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-auto">
<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>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">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);
}
}
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-3">
Level 1: .col-sm-3
</div>
<div class="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
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: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
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();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@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: 1.5rem !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 %
).