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.

Üks kolmest veerust

<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 .containertundliku pikslilaiuse või .container-fluidkõigi width: 100%vaateava ja seadme suuruste jaoks.
Read on veergude ümbrised. Igal veerul on horisontaalne padding(nn vihmaveerenn) nendevahelise ruumi reguleerimiseks. Seejärel paddingneutraliseeritakse 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 widthautomaatselt võrdse laiusega veergudena. Näiteks on neli eksemplari .col-smautomaatselt 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 widths 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 eemaldada marginridadest ja veergudest paddingnupuga .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-4kehtib väikeste, keskmiste, suurte ja eriti suurte seadmete puhul, kuid mitte esimese xskatkestuspunkti 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 ems 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 .rempx

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 xskuni xl. Lisage iga vajaliku murdepunkti jaoks suvaline arv ühikuteta klasse ja iga veerg on sama lai.

1 2-st

2 2-st

1 3-st

2/3

3 3-st

<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-100kuhu soovite veerud uueks reaks murda. Muutke pausid tundlikuks, segades .w-100neid mõne tundliku kuvari utiliidiga .

Seal oli Safari flexboxi viga , mis takistas sellel töötamast ilma selgesõnalise flex-basisvõi border. Vanemate brauseriversioonide jaoks on olemas lahendused, kuid need ei tohiks olla vajalikud, kui teie sihtbrauserid ei kuulu vigaste versioonide alla.

kol

<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.

1 3-st

2/3 (laiem)

3 3-st

1 3-st

2/3 (laiem)

3 3-st

<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}-autoklasse veergude suuruse määramiseks nende sisu loomuliku laiuse alusel.

1 3-st

Muutuva laiusega sisu

3 3-st

1 3-st

Muutuva laiusega sisu

3 3-st

<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 .colja . .col-*Määrake nummerdatud klass, kui vajate eriti suurt veergu; muul juhul pidage julgelt kinni .col.

kol

kol-8

kol-4

<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.

kol-sm-8

kol-sm-4

kol-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>

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.

.col-md-8

.col-6 .col-md-4

.col-6

<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 .rowja vastavad polsterdusutiliidid .col. Võimalik .container, .container-fluidet 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 .colpolsterdust klahviga .px-lg-5, jätnud selle .mx-lg-n5vastu vanemal .rowja seejärel kohandanud .containerümbrist nupuga .px-lg-5.

Kohandatud veeru polsterdus

<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 .rowotseteena vanemale.

Kasutage neid ridade veergude klasse põhiliste ruudustikupaigutuste kiireks loomiseks või kaardipaigutuste juhtimiseks.

Veerg

<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>

Veerg

<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>

Veerg

<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>

Veerg

<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>

Veerg

<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-heightallpool näidatud. Lisateabe saamiseks vaadake Flexbugs #3.

Vertikaalne joondus

Üks kolmest veerust

<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>

Üks kolmest veerust

<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

Üks kahest veerust

<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 margins-d kõigist otsestest alamveergudest .rowja 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 .containervõ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).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<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.

.col-9

.col-4
Kuna 9 + 4 = 13 > 12, mähitakse see 4 veeru laiune jaotus ühe külgneva üksusena uuele reale.

.col-6
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 &gt; 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 .rows-ga, kuid mitte iga rakendusmeetod ei saa seda arvesse võtta.

.col-6 .col-sm-3

<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 .

.col-6 .col-sm-4

<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 orderkatkestuspunkti (nt .order-1.order-md-2). Sisaldab läbipääsu tuge 1kõigil 12viiel võrgutasandil.

Esiteks DOM-is, järjekorda ei rakendatud

Teiseks DOM-is, suurema tellimusega

DOM-is kolmas, järjestusega 1

<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-firstja .order-lastklassid, mis muudavad orderelemendi vastavalt rakendades order: -1ja order: 13( order: $columns + 1). Neid klasse saab vastavalt vajadusele ka nummerdatud .order-*klassidega segada.

Esimene DOM-is, tellitud viimasena

DOM-is teine, järjestamata

Kolmas DOM-is, tellitud esimesena

<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-4liigub .col-md-4üle nelja veeru.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<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 .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<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-autosundida vendade veerge üksteisest eemale.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<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 .rowkomplekt . 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-*

1. tase: .col-sm-9

Tase 2: .col-8 .col-sm-6

Tase 2: .col-4 .col-sm-6

<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);
  }
}

Peamine sisu

Sekundaarne sisu

<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-columnskasutatakse iga üksiku veeru laiuste (protsentides) genereerimiseks, määrates samal ajal $grid-gutter-widthveeru 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-breakpointsja $container-max-widthsmillekski 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 %).