Tinklelio sistema
Naudokite mūsų galingą mobiliesiems skirtą „flexbox“ tinklelį, kad sukurtumėte visų formų ir dydžių maketus dėl dvylikos stulpelių sistemos, penkių numatytųjų reaguojančių pakopų, „Sass“ kintamųjų ir mišinių bei daugybės iš anksto nustatytų klasių.
Kaip tai veikia
„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 nuodugniai apžvelgiama, kaip tinklelis susijungia.
Naujokas ar nesate susipažinęs su „flexbox“? Perskaitykite šį „CSS Tricks flexbox“ vadovą , kad sužinotumėte foną, terminiją, gaires ir kodo 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>
Aukščiau pateiktame pavyzdyje sukuriami trys vienodo pločio stulpeliai mažuose, vidutiniuose, dideliuose ir ypač dideliuose įrenginiuose, naudojant mūsų iš anksto nustatytas tinklelio klases. Tie stulpeliai yra puslapio centre su pirminiu stulpeliu .container
.
Išskaidžius tai, kaip tai veikia:
- Sudėtiniai rodiniai suteikia galimybę centruoti ir horizontaliai išdėstyti svetainės turinį. Naudokite
.container
jautriam pikselių pločiui arba.container-fluid
visųwidth: 100%
dydžių peržiūrai. - 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. Tokiu būdu visas jūsų stulpelių turinys vizualiai išlygiuotas kairėje pusėje. - Tinklelio išdėstyme turinys turi būti dedamas į stulpelius ir tik stulpeliai gali būti tiesioginiai eilučių antriniai elementai.
- „Flexbox“ dėka tinklelio stulpeliai be nurodyto
width
bus automatiškai išdėstyti kaip vienodo pločio stulpeliai. Pavyzdžiui, keturi atvejai.col-sm
automatiškai bus 25 % pločio nuo mažos pertraukos taško ir daugiau. Daugiau pavyzdžių žr. automatinio išdėstymo stulpelių skyriuje. - Stulpelių klasės nurodo stulpelių, kuriuos norite naudoti, skaičių iš 12 vienoje eilutėje. Taigi, jei norite, kad skersai būtų trys vienodo pločio stulpeliai, galite naudoti
.col-4
. - Stulpeliai
width
nustatomi procentais, todėl jie visada yra sklandūs ir dydžio, palyginti su pirminiu elementu. - Stulpeliai yra horizontalūs
padding
, kad būtų sukurti latakai tarp atskirų stulpelių, tačiau galite pašalintimargin
iš eilučių irpadding
stulpelių.no-gutters
naudodami.row
. - Kad tinklelis būtų jautrus, yra penki tinklelio lūžio taškai, po vieną kiekvienam interaktyviam lūžio taškui : visi lūžio taškai (ypač maži), maži, vidutiniai, dideli ir ypač dideli.
- Tinklelio lūžio taškai pagrįsti minimalaus pločio medijos užklausomis, tai reiškia, kad jie taikomi tam vienam lūžio taškui ir visiems virš jo esantiems (pvz.,
.col-sm-4
taikomi mažiems, vidutiniams, dideliems ir ypač dideliems įrenginiams, bet ne pirmajamxs
lūžio taškui). - Norėdami gauti daugiau semantinio žymėjimo, galite naudoti iš anksto nustatytas tinklelio klases (pvz .,
.col-4
) arba Sass mišinius .
Žinokite apie „flexbox“ apribojimus ir klaidas , pvz., negalėjimą naudoti kai kurių HTML elementų kaip lanksčiuosius konteinerius .
Tinklelio parinktys
Nors Bootstrap naudoja em
s arba rem
s daugeliui dydžių apibrėžti, px
s naudojami tinklelio lūžio taškams ir konteinerio pločiams. Taip yra todėl, kad peržiūros srities plotis yra pikseliais ir nesikeičia atsižvelgiant į šrifto dydį .
Sužinokite, kaip Bootstrap tinklelio sistemos aspektai veikia keliuose įrenginiuose, naudodami patogią lentelę.
Itin mažas <576px |
Mažas ≥ 576 piks |
Vidutinis ≥ 768 piks |
Didelis ≥ 992 piks |
Ypač didelis ≥ 1200 pikselių |
|
---|---|---|---|---|---|
Maksimalus konteinerio plotis | Nėra (automatinis) | 540 pikselių | 720 taškų | 960 taškų | 1140 taškų |
Klasės priešdėlis | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# stulpelių | 12 | ||||
Latakų plotis | 30 piks. (15 piks. kiekvienoje stulpelio pusėje) | ||||
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 xl
. Pridėkite bet kokį skaičių klasių be vienetų prie kiekvieno reikalingo lūžio taško ir kiekvienas stulpelis bus tokio paties 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>
Vienodo pločio kelių eilučių
Kurkite vienodo pločio stulpelius, apimančius kelias eilutes, įterpdami vietą, .w-100
kurioje norite, kad stulpeliai būtų pertraukti į naują eilutę. Padarykite pertraukas jautrias sumaišydami .w-100
su kai kuriomis reaguojančiomis rodymo programomis .
Buvo „ Safari flexbox“ klaida , kuri neleido tai veikti be aiškios flex-basis
arba border
. Yra problemų, susijusių su senesnėmis naršyklės versijomis, tačiau jie neturėtų būti būtini, jei jūsų tikslinės naršyklės nepatenka į klaidų versijas.
<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>
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 penkias 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>
Latakai
Latakus galima reguliuoti pagal lūžio taško paminkštinimą ir neigiamos maržos naudingumo klases. Norėdami pakeisti latakus tam tikroje eilutėje, suporuokite neigiamą paraštės naudingumą .row
ir atitinkamas užpildymo priemones .col
s. Gali reikėti pakoreguoti .container
ir pirminį elementą, kad būtų išvengta nepageidaujamo perpildymo, naudojant dar kartą atitinkamą užpildymo priemonę..container-fluid
Štai pavyzdys, kaip tinkinti Bootstrap tinklelį dideliame ( lg
) pertraukos taške ir aukščiau. Padidinome .col
paminkštinimą naudodami .px-lg-5
, prieš jį pašalinome naudodami .mx-lg-n5
pagrindinį elementą , .row
o tada pakoregavome .container
apvalkalą naudodami .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>
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.
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-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);
}
}
Lygiavimas
Norėdami vertikaliai ir horizontaliai sulygiuoti stulpelius, naudokite „flexbox“ lygiavimo priemones. Internet Explorer 10-11 nepalaiko vertikalių lanksčių elementų lygiavimo, kai lanksčiame konteineryje yra, min-height
kaip parodyta toliau. Norėdami gauti daugiau informacijos, žr. Flexbugs #3.
Vertikalus lygiavimas
<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>
Horizontalus lygiavimas
<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>
Jokių latakų
Latakai tarp stulpelių mūsų iš anksto nustatytose tinklelio klasėse gali būti pašalinti naudojant .no-gutters
. Taip pašalinami neigiami margin
s iš visų tiesioginių antrinių stulpelių .row
ir horizontalūs .padding
Štai šių stilių kūrimo šaltinio kodas. Atminkite, kad stulpelių nepaisymas apima tik pirmuosius antrinius stulpelius ir yra taikomas naudojant atributų parinkiklį . Nors tai sukuria konkretesnį parinkiklį, stulpelių užpildymą vis tiek galima tinkinti naudojant tarpų priemones .
Reikia dizaino nuo krašto iki krašto? Nuleiskite tėvą .container
arba .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Praktiškai tai atrodo taip. Atminkite, kad galite ir toliau tai naudoti su visomis kitomis iš anksto nustatytomis tinklelio klasėmis (įskaitant stulpelių plotį, reaguojančius lygius, pertvarkymus ir kt.).
<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>
Stulpelių apvyniojimas
Jei vienoje eilutėje yra daugiau nei 12 stulpelių, kiekviena papildomų stulpelių grupė kaip vienas vienetas bus apvyniotas nauja eilute.
Kadangi 9 + 4 = 13 > 12, šis 4 stulpelių pločio dalinys perkeliamas į naują eilutę kaip vienas gretimas vienetas.
Tolesni stulpeliai tęsiasi pagal naują eilutę.
<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>
Stulpelių pertraukos
Norint suskaidyti stulpelius į naują eilutę „flexbox“, reikia nedidelio įsilaužimo: pridėkite elementą, width: 100%
kur norite apvynioti stulpelius, į naują eilutę. Paprastai tai atliekama naudojant kelis .row
s, bet ne kiekvienas įgyvendinimo metodas gali tai paaiškinti.
<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>
Taip pat galite pritaikyti šią pertrauką tam tikrose pertraukos vietose naudodami mūsų interaktyvias vaizdo priemones .
<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>
Pertvarkymas
Užsisakykite klases
Naudokite .order-
klases, kad galėtumėte valdyti savo turinio vizualinę tvarką . Šios klasės yra atsakingos, todėl galite nustatyti order
pagal pertraukos tašką (pvz., .order-1.order-md-2
). Apima visų penkių tinklelio pakopų palaikymą 1
.12
<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>
Taip pat yra reaguojančių .order-first
ir .order-last
klasių, kurios atitinkamai order
pakeičia elemento taikymą order: -1
ir order: 13
( order: $columns + 1
). Šios klasės taip pat gali būti maišomos su sunumeruotomis .order-*
klasėmis pagal poreikį.
<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>
Stulpelių užskaitymas
Tinklelio stulpelius galite pakeisti dviem būdais: mūsų interaktyviomis .offset-
tinklelio klasėmis ir maržos komunalinėmis paslaugomis . Tinklelio klasės yra tokios, kad atitiktų stulpelius, o paraštės yra naudingesnės greitam išdėstymui, kai poslinkio plotis yra kintamas.
Ofsetinės klasės
Perkelkite stulpelius į dešinę naudodami .offset-md-*
klases. Šios klasės padidina kairiąją stulpelio paraštę *
stulpeliais. Pavyzdžiui, .offset-md-4
perkeliama .col-md-4
per keturis stulpelius.
<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>
Be stulpelių išvalymo reaguojančiose pertraukos taškuose, gali reikėti iš naujo nustatyti poslinkius. Žr. tai veikiant tinklelio pavyzdyje .
<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žos komunalinės paslaugos
Perėję prie „flexbox“ 4 versijoje, galite naudoti paraščių paslaugų programas, pavyzdžiui .mr-auto
, priversti stulpelius ir seserį atskirti vienas nuo kito.
<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>
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-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
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: 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
);
Mišiniai
Mišiniai naudojami kartu su tinklelio kintamaisiais, siekiant sukurti atskirų tinklelio stulpelių semantinį 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();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@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 stulpelio latakų plotis.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !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 sukompiliuoti iš naujo. 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 %
).