Võrgusüsteem
Tänu kaheteistkümne veeru süsteemile, viiele vaikimisi reageerivale astmele, Sassi muutujatele ja segudele ning kümnetele eelmääratletud klassidele kasutage meie võimsat mobiili-eelkõige paindlikku ruudustikku, et luua igasuguse kuju ja suurusega paigutusi.
Kuidas see töötab
Bootstrapi ruudustikusüsteem kasutab sisu paigutuseks ja joondamiseks mitmeid konteinereid, ridu ja veerge. See on ehitatud flexboxiga ja on täielikult reageeriv. Allpool on näide ja põhjalik ülevaade ruudustiku koosnemisest.
Kas olete flexboxi uus kasutaja või pole sellega tuttav? Lugege seda CSS Tricks flexboxi juhendit tausta, terminoloogia, juhiste ja koodilõikude kohta.
<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>
Ülaltoodud näide loob kolm võrdse laiusega veergu väikestes, keskmistes, suurtes ja eriti suurtes seadmetes, kasutades meie eelmääratletud ruudustikuklasse. Need veerud on lehe keskel vanemaga .container
.
Jagades selle lahti, toimib see järgmiselt.
- Konteinerid võimaldavad saidi sisu tsentreerimiseks ja horisontaalseks polsterdamiseks. Kasutage
.container
tundliku pikslilaiuse või.container-fluid
kõigiwidth: 100%
vaateava ja seadme suuruste jaoks. - Read on veergude ümbrised. Igal veerul on horisontaalne
padding
(nn vihmaveerenn) nendevahelise ruumi reguleerimiseks. Seejärelpadding
neutraliseeritakse seda negatiivsete veeristega ridadel. Nii joondatakse kogu veergude sisu visuaalselt vasakule küljele. - Ruudustiku paigutuses peab sisu olema paigutatud veergudesse ja ainult veerud võivad olla ridade vahetud alamjärgud.
- Tänu flexboxile paigutatakse määramata ruudustiku veerud
width
automaatselt võrdse laiusega veergudena. Näiteks on neli eksemplari.col-sm
automaatselt 25% laiused väikesest katkestuspunktist ja ülespoole. Rohkem näiteid leiate automaatse paigutuse veergude jaotisest. - Veeruklassid näitavad veergude arvu, mida soovite kasutada võimalikust 12-st rea kohta. Seega, kui soovite kolme võrdse laiusega veergu, võite kasutada
.col-4
. - Veerud
width
s on määratud protsentides, nii et need on alati sujuvad ja nende suurus oma põhielemendi suhtes erinev. - Veerud on horisontaalsed
padding
, et luua vihmaveerennid üksikute veergude vahele, kuid saate eemaldadamargin
ridadest ja veergudestpadding
nupuga.no-gutters
..row
- Ruudustiku tundlikuks muutmiseks on viis ruudustiku katkestuspunkti, üks iga reageeriva katkestuspunkti jaoks : kõik murdepunktid (eriti väikesed), väikesed, keskmised, suured ja eriti suured.
- Ruudustiku katkestuspunktid põhinevad minimaalse laiusega meediumipäringutel, mis tähendab, et need rakenduvad sellele ühele katkestuspunktile ja kõigile sellest kõrgemale (nt
.col-sm-4
kehtib väikeste, keskmiste, suurte ja eriti suurte seadmete puhul, kuid mitte esimesexs
katkestuspunkti kohta). - Semantilisema märgistuse jaoks saate kasutada eelmääratletud ruudustiku klasse (nt
.col-4
) või Sassi segusid .
Olge teadlik flexboxi piirangutest ja vigadest , nagu võimetus kasutada mõnda HTML-i elementi paindlike konteineritena .
Võrgu valikud
Kui Bootstrap kasutab enamiku suuruste määratlemiseks tähti em
s või s, siis s-i kasutatakse ruudustiku katkestuspunktide ja konteineri laiuste jaoks. Selle põhjuseks on asjaolu, et vaateava laius on pikslites ja see ei muutu koos fondi suurusega .rem
px
Vaadake käepärase tabeli abil, kuidas Bootstrapi ruudustikusüsteemi aspektid mitmes seadmes töötavad.
Eriti väike <576 pikslit |
Väike ≥576 pikslit |
Keskmine ≥768 pikslit |
Suur ≥ 992 pikslit |
Eriti suur ≥1200 pikslit |
|
---|---|---|---|---|---|
Maksimaalne konteineri laius | Puudub (automaatne) | 540 pikslit | 720 pikslit | 960 pikslit | 1140 pikslit |
Klassi eesliide | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# veergudest | 12 | ||||
Renni laius | 30 pikslit (15 pikslit veeru mõlemal küljel) | ||||
Pesastav | Jah | ||||
Veergude järjestamine | Jah |
Automaatse paigutusega veerud
Kasutage murdepunktispetsiifilisi veeruklasse veeru suuruse hõlpsaks muutmiseks ilma selgesõnalise nummerdatud klassita, nagu .col-sm-6
.
Võrdse laiusega
Näiteks siin on kaks ruudustiku paigutust, mis kehtivad igale seadmele ja vaateavale vahemikus xs
kuni xl
. Lisage iga vajaliku murdepunkti jaoks suvaline arv ühikuteta klasse ja iga veerg on sama lai.
<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>
Võrdse laiusega mitmerealine
Looge võrdse laiusega veerud, mis hõlmavad mitut rida, lisades kohta, .w-100
kuhu soovite veerud uueks reaks murda. Muutke pausid tundlikuks, segades .w-100
neid mõne tundliku kuvari utiliidiga .
Seal oli Safari flexboxi viga , mis takistas sellel töötamast ilma selgesõnalise flex-basis
või border
. Vanemate brauseriversioonide jaoks on olemas lahendused, kuid need ei tohiks olla vajalikud, kui teie sihtbrauserid ei kuulu vigaste versioonide alla.
<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>
Ühe veeru laiuse määramine
Flexboxi ruudustiku veergude automaatne paigutus tähendab ka seda, et saate määrata ühe veeru laiuse ja lasta vendade veergude suurust selle ümber automaatselt muuta. Võite kasutada eelmääratletud ruudustiku klasse (nagu allpool näidatud), ruudustiku segusid või reasiseseid laiusi. Pange tähele, et teiste veergude suurust muudetakse olenemata keskmise veeru laiusest.
<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>
Muutuva laiusega sisu
Kasutage col-{breakpoint}-auto
klasse veergude suuruse määramiseks nende sisu loomuliku laiuse alusel.
<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>
Vastuvõtlikud klassid
Bootstrapi ruudustik sisaldab viit eelmääratletud klassi taset keerukate tundlike paigutuste loomiseks. Kohandage oma veergude suurust eriti väikestes, väikestes, keskmistes, suurtes või eriti suurtes seadmetes vastavalt oma äranägemisele.
Kõik murdepunktid
Võrkude puhul, mis on väikseimast seadmest suurimani ühesugused, kasutage klasse .col
ja . .col-*
Määrake nummerdatud klass, kui vajate eriti suurt veergu; muul juhul pidage julgelt kinni .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>
Horisontaalselt virnastatud
Kasutades ühte .col-sm-*
klasside komplekti, saate luua põhivõrgusüsteemi, mis algab virnastatuna ja muutub väikese murdepunkti ( sm
) juures horisontaalseks.
<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>
Sega ja sobita
Kas te ei soovi, et teie veerud lihtsalt virnastuksid mõnel ruudustikutasandil? Vajadusel kasutage iga astme jaoks erinevate klasside kombinatsiooni. Vaadake allolevat näidet, et paremini mõista, kuidas see kõik toimib.
<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>
Vihmaveerennid
Vihmaveerennid saab reageerivalt reguleerida murdepunktispetsiifilise polsterduse ja negatiivse marginaali kasulikkuse klasside abil. Teatud rea vihmaveerennide muutmiseks siduge negatiivse veerise utiliit s-l .row
ja vastavad polsterdusutiliidid .col
. Võimalik .container
, .container-fluid
et soovimatu ületäitumise vältimiseks tuleb kohandada ka vanemat, kasutades uuesti sobivat polsterdusutiliiti.
Siin on näide Bootstrapi ruudustiku kohandamisest suures ( lg
) murdepunktis ja sellest kõrgemal. Oleme suurendanud .col
polsterdust klahviga .px-lg-5
, jätnud selle .mx-lg-n5
vastu vanemal .row
ja seejärel kohandanud .container
ümbrist nupuga .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>
Rea veerud
Kasutage kohanemisvõimelisi .row-cols-*
klasse, et määrata kiiresti veergude arv, mis teie sisu ja paigutuse kõige paremini renderdavad. Kui .col-*
tavaklassid kehtivad üksikutele veergudele (nt .col-md-4
), siis reaveergude klassid määratakse .row
otseteena vanemale.
Kasutage neid ridade veergude klasse põhiliste ruudustikupaigutuste kiireks loomiseks või kaardipaigutuste juhtimiseks.
<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>
Võite kasutada ka kaasasolevat Sassi segu 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);
}
}
Joondamine
Kasutage veergude vertikaalseks ja horisontaalseks joondamiseks flexboxi joondusutiliite. Internet Explorer 10–11 ei toeta painduvate üksuste vertikaalset joondamist, kui painduval konteineril on min-height
allpool näidatud. Lisateabe saamiseks vaadake Flexbugs #3.
Vertikaalne joondus
<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>
Horisontaalne joondamine
<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>
Pole vihmaveetorusid
Meie eelmääratletud ruudustikuklasside veergude vahel olevad vihmaveerennid saab eemaldada nupuga .no-gutters
. See eemaldab negatiivsed margin
s-d kõigist otsestest alamveergudest .row
ja horisontaalsed .padding
Siin on nende stiilide loomise lähtekood. Pange tähele, et veergude alistamise ulatus hõlmab ainult esimesi alamveerge ja neid sihitakse atribuudivalija kaudu . Kuigi see loob spetsiifilisema valija, saab veergude polsterdust siiski veelgi kohandada vahekaugusutiliitidega .
Kas vajate servast servani disaini? Loobuge vanem .container
või .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Praktikas näeb see välja nii. Pange tähele, et saate jätkata selle kasutamist kõigi teiste eelmääratletud ruudustikuklassidega (sh veergude laiused, reageerivad tasemed, ümberkorraldused ja palju muud).
<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>
Veeru mähkimine
Kui ühte ritta paigutatakse rohkem kui 12 veergu, murrab iga lisaveergude rühm ühe üksusena uuele reale.
Kuna 9 + 4 = 13 > 12, mähitakse see 4 veeru laiune jaotus ühe külgneva üksusena uuele reale.
Järgmised veerud jätkavad uut rida.
<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>
Veergude katkestused
Veergude purustamine uuele reale flexboxis nõuab väikest häkkimist: lisage uuele reale element, width: 100%
kuhu soovite oma veerud mähkida. Tavaliselt saavutatakse see mitme .row
s-ga, kuid mitte iga rakendusmeetod ei saa seda arvesse võtta.
<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>
Saate seda pausi rakendada ka teatud katkestuspunktides meie tundlike kuvautiliitidega .
<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>
Ümberjärjestamine
Telli klassid
Kasutage .order-
klasse oma sisu visuaalse järjestuse kontrollimiseks. Need klassid on tundlikud, nii et saate määrata order
katkestuspunkti (nt .order-1.order-md-2
). Sisaldab läbipääsu tuge 1
kõigil 12
viiel võrgutasandil.
<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>
Samuti on olemas reageerivad .order-first
ja .order-last
klassid, mis muudavad order
elemendi vastavalt rakendades order: -1
ja order: 13
( order: $columns + 1
). Neid klasse saab vastavalt vajadusele ka nummerdatud .order-*
klassidega segada.
<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>
Veergude tasaarvestamine
Saate ruudustiku veerge nihutada kahel viisil: meie reageerivad .offset-
ruudustikuklassid ja meie marginaaliutiliidid . Ruudustiku klassid on kohandatud veergudele, samas kui veerised on kasulikumad kiirete paigutuste jaoks, kus nihke laius on muutuv.
Offset klassid
.offset-md-*
Liigutage veerge klasside abil paremale . Need klassid suurendavad veeru vasakut veerist *
veergude kaupa. Näiteks .offset-md-4
liigub .col-md-4
üle nelja veeru.
<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>
Lisaks reageerivate katkestuspunktide veergude tühjendamisele peate võib-olla lähtestama nihkeid. Vaadake seda tegevuses ruudustiku näites .
<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>
Marginaali kommunaalteenused
V4-s flexboxile üleminekul saate kasutada veerise utiliite, näiteks .mr-auto
sundida vendade veerge üksteisest eemale.
<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>
Pesitsemine
Sisu pesastamiseks vaikeruudustikuga lisage olemasolevasse veergu uus veergude .row
komplekt . Pesastatud read peaksid sisaldama veergude komplekti, mille kogum on kuni 12 (ei ole nõutav, et kasutaksite kõiki 12 saadaolevat veergu)..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
Kui kasutate Bootstrapi Sassi lähtefaile, saate kohandatud, semantiliste ja reageerivate lehepaigutuste loomiseks kasutada Sassi muutujaid ja segusid. Meie eelmääratletud ruudustikuklassid kasutavad samu muutujaid ja segusid, et pakkuda kiirelt reageerivate paigutuste jaoks tervet komplekti kasutusvalmis klasse.
Muutujad
Muutujad ja kaardid määravad veergude arvu, renni laiuse ja meediumipäringu punkti, millest alustada veergude ujumist. Kasutame neid ülalkirjeldatud eelmääratletud ruudustikuklasside loomiseks, samuti allpool loetletud kohandatud segude jaoks.
$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
);
Segud
Miksiine kasutatakse koos ruudustiku muutujatega üksikute ruudustiku veergude jaoks semantilise CSS-i genereerimiseks.
// 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);
Kasutamise näide
Saate muuta muutujaid oma kohandatud väärtusteks või kasutada lihtsalt segusid nende vaikeväärtustega. Siin on näide vaikesätete kasutamisest kahe veeru paigutuse loomiseks, mille vahel on vahe.
.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>
Ruudustiku kohandamine
Kasutades meie sisseehitatud ruudustiku Sassi muutujaid ja kaarte, on võimalik eelmääratletud ruudustiku klasse täielikult kohandada. Muutke tasandite arvu, meediumipäringu mõõtmeid ja konteineri laiusi – seejärel kompileerige uuesti.
Sambad ja vihmaveerennid
Ruudustiku veergude arvu saab muuta Sassi muutujate kaudu. $grid-columns
kasutatakse iga üksiku veeru laiuste (protsentides) genereerimiseks, määrates samal ajal $grid-gutter-width
veeru rennide laiuse.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Võrgutasandid
Veergudest väljapoole liikudes saate kohandada ka ruudustiku tasandite arvu. Kui soovite ainult nelja ruudustiku taset, värskendaksite $grid-breakpoints
ja $container-max-widths
millekski selliseks:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Sassi muutujates või kaartides muudatuste tegemisel peate muudatused salvestama ja uuesti kompileerima. Seda tehes väljastatakse täiesti uus eelmääratletud ruudustiku klasside komplekt veergude laiuste, nihkete ja järjestuse jaoks. Kohandatud katkestuspunktide kasutamiseks värskendatakse ka reageerivaid nähtavuse utiliite. Veenduge, et määraksite ruudustiku väärtused px
(mitte rem
, em
, või %
).