Tinklelio sistema
Naudokite mūsų galingą mobiliesiems skirtą „flexbox“ tinklelį, kad sukurtumėte visų formų ir dydžių maketus dėl dvylikos stulpelių sistemos, šešių numatytųjų reaguojančių pakopų, „Sass“ kintamųjų ir mišinių bei daugybės iš anksto nustatytų klasių.
Pavyzdys
„Bootstrap“ tinklelio sistema naudoja daugybę konteinerių, eilučių ir stulpelių, kad išdėstytų ir sulygiuotų turinį. Jis sukurtas naudojant „ flexbox “ ir visiškai reaguoja. Žemiau pateikiamas pavyzdys ir išsamus paaiškinimas, kaip tinklelio sistema susijungia.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Aukščiau pateiktame pavyzdyje sukuriami trys vienodo pločio stulpeliai visuose įrenginiuose ir peržiūros srityse, naudojant mūsų iš anksto nustatytas tinklelio klases. Tie stulpeliai yra puslapio centre su pirminiu stulpeliu .container
.
Kaip tai veikia
Išskaidžius tai, kaip sujungiama tinklelio sistema:
-
Mūsų tinklelis palaiko šešis reaguojančius pertraukos taškus . Lūžio taškai pagrįsti
min-width
medijos užklausomis, tai reiškia, kad jie veikia tą lūžio tašką ir visus virš jo esančius (pvz.,.col-sm-4
taikomasm
,md
,lg
,xl
, irxxl
). Tai reiškia, kad galite valdyti sudėtinio rodinio ir stulpelio dydį ir elgesį pagal kiekvieną pertraukos tašką. -
Sudėtiniai rodiniai centre ir horizontaliai užpildykite turinį. Naudokite
.container
jautriam pikselių pločiui,.container-fluid
visomswidth: 100%
peržiūros sritims ir įrenginiams arba reaguojantį konteinerį (pvz.,.container-md
) skysčių ir pikselių pločių deriniui. -
Eilutės yra stulpelių įvyniojimai. Kiekviena kolona turi horizontalią
padding
(vadinamą lataku), skirtą tarpai tarp jų valdyti. Tadapadding
tai neutralizuojama eilutėse su neigiamomis paraštėmis, siekiant užtikrinti, kad jūsų stulpelių turinys būtų vizualiai išlygiuotas kairėje pusėje. Eilutės taip pat palaiko modifikavimo klases, kad vienodai pritaikytų stulpelių dydį , ir latakų klases , kad pakeistumėte turinio tarpus. -
Stulpeliai yra neįtikėtinai lankstūs. Vienoje eilutėje yra 12 šablonų stulpelių, todėl galite sukurti skirtingus elementų derinius, apimančius bet kokį stulpelių skaičių. Stulpelių klasės nurodo šablono stulpelių skaičių (pvz.,
col-4
apima keturis).width
s nustatomi procentais, todėl visada turite tą patį santykinį dydį. -
Latakai taip pat yra jautrūs ir pritaikomi. Latakų klasės yra prieinamos visuose lūžio taškuose, kurių dydžiai yra tokie pat kaip ir paraštės ir tarpai tarp kamšalų . Pakeiskite horizontalius latakus su
.gx-*
klasėmis, vertikalius latakus su.gy-*
, arba visus latakus su.g-*
klasėmis..g-0
taip pat galima pašalinti latakus. -
Sass kintamieji, žemėlapiai ir mišiniai maitina tinklą. Jei nenorite naudoti iš anksto nustatytų tinklelio klasių „Bootstrap“, galite naudoti mūsų tinklelio šaltinį „Sass“ , kad sukurtumėte savo su semantiniu žymėjimu. Taip pat įtraukiame kai kurias pasirinktines CSS ypatybes, kad galėtume naudoti šiuos Sass kintamuosius, kad galėtumėte naudotis dar didesniu lankstumu.
Žinokite apie „flexbox“ apribojimus ir klaidas , pvz., negalėjimą naudoti kai kurių HTML elementų kaip lanksčiuosius konteinerius .
Tinklelio parinktys
„Bootstrap“ tinklelio sistema gali prisitaikyti prie visų šešių numatytųjų pertraukos taškų ir visų jūsų tinkintų lūžio taškų. Šešios numatytosios tinklelio pakopos yra tokios:
- Itin mažas (xs)
- Mažas (sm)
- Vidutinė (md)
- Didelis (lg)
- Itin didelis (xl)
- Ypač didelis (xxl)
Kaip minėta aukščiau, kiekvienas iš šių lūžio taškų turi savo konteinerį, unikalų klasės priešdėlį ir modifikatorius. Štai kaip tinklelis keičiasi šiuose lūžio taškuose:
xs <576px |
sm ≥ 576px |
md ≥ 768 piks |
lg ≥ 992 piks |
xl ≥ 1200 pikselių |
xxl ≥ 1400 pikselių |
|
---|---|---|---|---|---|---|
Konteinerismax-width |
Nėra (automatinis) | 540 pikselių | 720 taškų | 960 taškų | 1140 taškų | 1320 taškų |
Klasės priešdėlis | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# stulpelių | 12 | |||||
Latakų plotis | 1,5 rem (.75 rem kairėje ir dešinėje) | |||||
Latakai pagal užsakymą | Taip | |||||
Nestabilus | Taip | |||||
Stulpelių užsakymas | Taip |
Automatinio išdėstymo stulpeliai
Norėdami lengvai nustatyti stulpelių dydį be aiškios sunumeruotos klasės, pvz., , naudokite lūžio taško stulpelių klases .col-sm-6
.
Vienodo pločio
Pavyzdžiui, čia yra du tinklelio išdėstymai, taikomi kiekvienam įrenginiui ir peržiūros zonai nuo xs
iki xxl
. Pridėkite bet kokį klasių be vienetų skaičių prie kiekvieno reikalingo lūžio taško ir kiekvienas stulpelis bus tokio pat pločio.
<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>
Vieno stulpelio pločio nustatymas
Automatinis „flexbox“ tinklelio stulpelių išdėstymas taip pat reiškia, kad galite nustatyti vieno stulpelio plotį ir automatiškai keisti stulpelių dydį aplink jį. Galite naudoti iš anksto nustatytas tinklelio klases (kaip parodyta toliau), tinklelio mišinius arba eilutinius plotius. Atminkite, kad kitų stulpelių dydis bus pakeistas nepriklausomai nuo centrinio stulpelio pločio.
<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>
Kintamo pločio turinys
Naudokite col-{breakpoint}-auto
klases, kad nustatytumėte stulpelių dydį pagal natūralų jų turinio plotį.
<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>
Atsakingos klasės
„Bootstrap“ tinklelis apima šešias iš anksto nustatytų klasių pakopas, skirtas sukurti sudėtingus, reaguojančius išdėstymus. Tinkinkite stulpelių dydį ypač mažuose, mažuose, vidutiniuose, dideliuose ar ypač dideliuose įrenginiuose, kaip jums atrodo tinkama.
Visi lūžio taškai
Tinklams, kurie yra vienodi nuo mažiausio įrenginio iki didžiausio, naudokite .col
ir .col-*
klases. Nurodykite sunumeruotą klasę, kai jums reikia ypatingo dydžio stulpelio; kitu atveju nedvejodami laikykitės .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>
Sukraunama horizontaliai
Naudodami vieną .col-sm-*
klasių rinkinį galite sukurti pagrindinę tinklelio sistemą, kuri pradedama sukrauti ir tampa horizontali mažame lūžio taške ( 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>
Sumaišykite ir suderinkite
Nenorite, kad jūsų stulpeliai būtų tiesiog sukrauti kai kuriose tinklelio pakopose? Jei reikia, kiekvienai pakopai naudokite skirtingų klasių derinį. Norėdami geriau suprasti, kaip visa tai veikia, žiūrėkite toliau pateiktą pavyzdį.
<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>
Eilučių stulpeliai
Naudokite interaktyvias .row-cols-*
klases, kad greitai nustatytumėte stulpelių, kurie geriausiai atvaizduoja turinį ir išdėstymą, skaičių. Nors įprastos .col-*
klasės taikomos atskiriems stulpeliams (pvz., .col-md-4
), eilučių stulpelių klasės nustatomos pirminėje .row
kaip spartusis klavišas. Su .row-cols-auto
stulpeliais galite suteikti natūralų plotį.
Naudokite šias eilučių stulpelių klases, kad greitai sukurtumėte pagrindinius tinklelio išdėstymus arba valdytumėte kortelių išdėstymus.
<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>
Taip pat galite naudoti pridedamą Sass mišinį 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);
}
}
Lizdas
Jei norite įtraukti turinį į numatytąjį tinklelį, esamame stulpelyje pridėkite naują .row
ir stulpelių rinkinį . Įdėtose eilutėse turėtų būti stulpelių rinkinys, kurį sudaro 12 ar mažiau (nebūtina naudoti visų 12 galimų stulpelių)..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
Kai naudojate „Bootstrap“ šaltinio „Sass“ failus, galite naudoti „Sass“ kintamuosius ir derinius, kad sukurtumėte pasirinktinius, semantinius ir reaguojančius puslapių išdėstymus. Mūsų iš anksto nustatytos tinklelio klasės naudoja tuos pačius kintamuosius ir derinius, kad pateiktų visą rinkinį paruoštų naudoti klasių, skirtų greitai reaguojantiems maketams.
Kintamieji
Kintamieji ir žemėlapiai nustato stulpelių skaičių, latako plotį ir medijos užklausos tašką, nuo kurio pradėti slankiojančius stulpelius. Naudojame juos kurdami iš anksto nustatytas tinklelio klases, aprašytas aukščiau, taip pat toliau išvardytiems pasirinktiniams deriniams.
$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
);
Mišiniai
Mišiniai naudojami kartu su tinklelio kintamaisiais, kad būtų generuojamas atskirų tinklelio stulpelių semantinis CSS.
// 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);
// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);
Naudojimo pavyzdys
Galite modifikuoti kintamuosius į savo pasirinktines reikšmes arba tiesiog naudoti mišinius su numatytosiomis reikšmėmis. Štai pavyzdys, kaip naudoti numatytuosius nustatymus, kad būtų sukurtas dviejų stulpelių išdėstymas su tarpais.
.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>
Tinklelio pritaikymas
Naudojant mūsų įtaisytuosius grid Sass kintamuosius ir žemėlapius, galima visiškai tinkinti iš anksto nustatytas tinklelio klases. Pakeiskite pakopų skaičių, medijos užklausos matmenis ir sudėtinio rodinio plotį, tada sukompiliuokite iš naujo.
Kolonos ir latakai
Tinklelio stulpelių skaičių galima keisti naudojant Sass kintamuosius. $grid-columns
naudojamas kiekvieno atskiro stulpelio pločiui (procentais) generuoti, tuo pačiu metu $grid-gutter-width
nustatomas kolonos latakų plotis.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Tinklelio pakopos
Be pačių stulpelių, taip pat galite tinkinti tinklelio pakopų skaičių. Jei norėtumėte tik keturių tinklelio pakopų, atnaujinkite $grid-breakpoints
ir $container-max-widths
į kažką panašaus:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Atlikdami bet kokius Sass kintamųjų ar žemėlapių pakeitimus, turėsite išsaugoti pakeitimus ir iš naujo kompiliuoti. Taip bus išvestas visiškai naujas iš anksto nustatytų tinklelio klasių rinkinys, skirtas stulpelių pločiui, poslinkiams ir tvarkai. Reaguojančios matomumo priemonės taip pat bus atnaujintos, kad būtų naudojamos tinkintos pertraukos taškai. Būtinai nustatykite tinklelio reikšmes px
(ne rem
, em
, arba %
).