Ratkerfi
Notaðu öfluga farsíma-fyrstu flexbox ristina okkar til að búa til skipulag af öllum stærðum og gerðum þökk sé tólf dálkakerfi, fimm sjálfgefnum móttækilegum stigum, Sass breytum og blöndunum og tugum fyrirfram skilgreindra flokka.
Hvernig það virkar
Gridkerfi Bootstrap notar röð gáma, raða og dálka til að skipuleggja og samræma efni. Það er smíðað með flexbox og er fullkomlega móttækilegt. Hér að neðan er dæmi og ítarleg skoðun á því hvernig ristið kemur saman.
Nýr eða þekkir ekki flexbox? Lestu þessa CSS Tricks flexbox handbók fyrir bakgrunn, hugtök, leiðbeiningar og kóðabúta.
<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>
Dæmið hér að ofan býr til þrjá jafnbreiða dálka á litlum, meðalstórum, stórum og sérstaklega stórum tækjum með því að nota fyrirfram skilgreinda töfluflokka okkar. Þessir dálkar eru miðaðir á síðunni með foreldri .container
.
Að sundurliða það, hér er hvernig það virkar:
- Gámar bjóða upp á leið til að miðja og lárétt fylla innihald síðunnar þinnar. Notaðu
.container
fyrir móttækilega pixlabreidd eða.container-fluid
fyrirwidth: 100%
allar útsýnisgáttir og tækjastærðir. - Raðir eru umbúðir fyrir dálka. Hver súla hefur lárétt
padding
(kallað renna) til að stjórna bilinu á milli þeirra. Þessupadding
er síðan brugðist á línum með neikvæðum framlegð. Þannig er allt efni í dálkunum þínum sjónrænt stillt niður vinstra megin. - Í töfluskipulagi verður að setja efni innan dálka og aðeins dálkar mega vera strax börn raða.
- Þökk sé flexbox munu ristdálkar án tilgreinds
width
sjálfkrafa vera jafn breiðar dálkar. Til dæmis, fjögur tilvik af.col-sm
verða hvert um sig sjálfkrafa 25% breitt frá litla brotpunktinum og upp. Sjá dálkahluta sjálfvirkrar útsetningar fyrir fleiri dæmi. - Dálkaflokkar gefa til kynna fjölda dálka sem þú vilt nota af mögulegum 12 í hverri röð. Svo, ef þú vilt þrjá jafnbreiða dálka þvert á, geturðu notað
.col-4
. - Dálk
width
s eru stillt í prósentum, þannig að þau eru alltaf fljótandi og stór miðað við móðurþáttinn. - Dálkar hafa lárétt
padding
til að búa til þakrennur á milli einstakra dálka, hins vegar er hægt að fjarlægjamargin
úr röðum ogpadding
úr dálkum með.no-gutters
á.row
. - Til að gera ristið viðkvæmt, eru fimm rist brotpunktar, einn fyrir hvern móttækilegan brotpunkt : allir brotpunktar (extra lítill), lítill, miðlungs, stór og extra stór.
- Brotpunktar fyrir hnitanet eru byggðir á miðlunarfyrirspurnum með lágmarksbreidd, sem þýðir að þeir eiga við þennan eina brotpunkt og alla þá fyrir ofan hann (td
.col-sm-4
á við um lítil, meðalstór, stór og sérstaklega stór tæki, en ekki fyrstaxs
brotpunktinn). - Þú getur notað fyrirfram skilgreinda grid flokka (eins og
.col-4
) eða Sass mixins fyrir merkingarlegri merkingu.
Vertu meðvituð um takmarkanir og villur í kringum flexbox , eins og vanhæfni til að nota suma HTML þætti sem flexílát .
Grid valkostir
Þó Bootstrap noti em
s eða rem
s til að skilgreina flestar stærðir, px
eru s notaðar fyrir rist brotpunkta og gámabreidd. Þetta er vegna þess að breidd útsýnisins er í pixlum og breytist ekki með leturstærðinni .
Sjáðu hvernig þættir Bootstrap-netkerfisins virka á mörgum tækjum með handhægri töflu.
Extra lítill <576px |
Lítil ≥576px |
Miðlungs ≥768px |
Stór ≥992px |
Extra stór ≥1200px |
|
---|---|---|---|---|---|
Hámarks breidd gáma | Engin (sjálfvirk) | 540px | 720px | 960px | 1140px |
Bekkjarforskeyti | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# af dálkum | 12 | ||||
Rennur breidd | 30px (15px á hvorri hlið dálks) | ||||
Hreiðurhæfur | Já | ||||
Dálka röðun | Já |
Sjálfvirk uppsetning dálka
Notaðu dálkaflokka sem eru sérstakir fyrir brotpunkta til að auðvelda dálkstærð án skýrs tölusetts flokks eins og .col-sm-6
.
Jafn breidd
Til dæmis eru hér tvö hnitakerfi sem eiga við um hvert tæki og útsýnisgátt, frá xs
til xl
. Bættu við hvaða fjölda einingalausra flokka sem er fyrir hvern brotpunkt sem þú þarft og hver dálkur verður í sömu breidd.
<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>
Jafn breidd fjöllína
Búðu til jafnbreiða dálka sem spanna margar línur með því að setja inn .w-100
þar sem þú vilt að dálkarnir brotni í nýja línu. Gerðu hléin móttækileg með því að blanda saman .w-100
við nokkur móttækileg skjától .
Það var Safari flexbox galla sem kom í veg fyrir að þetta virkaði án skýrs flex-basis
eða border
. Það eru til lausnir fyrir eldri vafraútgáfur, en þær ættu ekki að vera nauðsynlegar ef markvafrarnir þínir falla ekki í gallaútgáfurnar.
<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>
Stilla einn dálk breidd
Sjálfvirk uppsetning fyrir flexbox grid dálka þýðir einnig að þú getur stillt breidd eins dálks og látið systkinasúlurnar sjálfkrafa breyta stærð í kringum hann. Þú getur notað fyrirfram skilgreinda ristflokka (eins og sýnt er hér að neðan), ristblöndur eða innbyggðar breiddir. Athugaðu að hinir dálkarnir munu breyta stærð, sama hversu breidd miðdálkurinn er.
<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>
Innihald með breytilegri breidd
Notaðu col-{breakpoint}-auto
flokka til að stærð dálka út frá náttúrulegri breidd innihalds þeirra.
<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>
Móttækilegur flokkur
Grindanet Bootstrap inniheldur fimm stig af fyrirfram skilgreindum flokkum til að byggja upp flókin móttækileg skipulag. Sérsníddu stærð dálka þinna á sérstaklega litlum, litlum, meðalstórum, stórum eða stórum tækjum eins og þér sýnist.
Öll brot
.col
Notaðu og .col-*
flokkana fyrir hnitanet sem eru eins frá minnstu tækjum til þeirra stærstu . Tilgreindu númeraðan flokk þegar þú þarft sérstaklega stóran dálk; annars skaltu ekki hika við að halda þig við .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>
Staflað í lárétt
Með því að nota eitt sett af .col-sm-*
flokkum geturðu búið til grunnnetkerfi sem byrjar staflað og verður lárétt við litla brotpunktinn ( 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>
Blandaðu saman
Viltu ekki að dálkarnir þínir staflast einfaldlega í einhver töflustig? Notaðu blöndu af mismunandi flokkum fyrir hvert stig eftir þörfum. Sjá dæmið hér að neðan til að fá betri hugmynd um hvernig þetta allt virkar.
<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>
Rennur
Hægt er að stilla þakrennur með viðbragðsstöðu með brotpunktssértækri fyllingu og flokkum fyrir neikvæða framlegð. Til að skipta um þakrennur í tiltekinni röð, paraðu neikvæða framlegð tól á .row
og samsvarandi bólstrun tól á .col
s. Foreldri .container
eða .container-fluid
foreldri gæti þurft að stilla líka til að forðast óæskilegt flæði, með því að nota aftur samsvarandi bólstrun.
Hér er dæmi um að sérsníða Bootstrap-netið á stóra ( lg
) brotpunkti og ofar. Við höfum aukið .col
bólstrun með .px-lg-5
, brugðist á móti því með .mx-lg-n5
á foreldri .row
og síðan stillt .container
umbúðirnar með .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>
Röð dálkar
Notaðu móttækilega .row-cols-*
flokkana til að stilla fljótt þann fjölda dálka sem best birtir innihald þitt og skipulag. Þar sem venjulegir .col-*
flokkar eiga við um einstaka dálka (td, .col-md-4
), eru flokkar línudálka stilltir á foreldri .row
sem flýtileið.
Notaðu þessa röð dálkaflokka til að búa til grunnnetsuppsetningar fljótt eða til að stjórna kortauppsetningum þínum.
<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>
Þú getur líka notað meðfylgjandi 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);
}
}
Jöfnun
Notaðu flexbox jöfnunartól til að samræma dálka lóðrétt og lárétt. Internet Explorer 10-11 styður ekki lóðrétta röðun sveigjanlegra hluta þegar sveigjanleg ílát er með min-height
eins og sýnt er hér að neðan. Sjá Flexbugs #3 fyrir frekari upplýsingar.
Lóðrétt jöfnun
<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>
Lárétt jöfnun
<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>
Engar þakrennur
Hægt er að fjarlægja rennurnar á milli dálka í fyrirfram skilgreindum gridflokkum okkar með .no-gutters
. Þetta fjarlægir neikvæðu margin
s úr .row
og láréttu padding
úr öllum dálkum fyrir næstu börn.
Hér er frumkóði til að búa til þessa stíla. Athugaðu að dálkahnekkingar eru aðeins settar í fyrstu undirdálka og miða á eigindavali . Þó að þetta framkalli sértækari valmynd, er samt hægt að aðlaga dálkfyllingu frekar með biltólum .
Þarftu brún til brún hönnun? Slepptu foreldri .container
eða .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Í reynd, hér er hvernig það lítur út. Athugaðu að þú getur haldið áfram að nota þetta með öllum öðrum fyrirfram skilgreindum töfluflokkum (þar á meðal dálkabreiddum, móttækilegum flokkum, endurpöntunum og fleira).
<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>
Súluumbúðir
Ef fleiri en 12 dálkar eru settir í einni röð mun hver hópur aukadálka, sem ein eining, vefjast inn á nýja línu.
Þar sem 9 + 4 = 13 > 12, verður þessari 4 dálka breiðu div vafinn inn á nýja línu sem ein samfelld eining.
Síðari dálkar halda áfram eftir nýju línunni.
<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>
Dálkaskil
Að brjóta dálka í nýja línu í flexbox krefst smá hakks: bættu við þætti með width: 100%
hvar sem þú vilt vefja dálkana þína í nýja línu. Venjulega er þetta gert með mörgum .row
s, en ekki sérhver útfærsluaðferð getur gert grein fyrir þessu.
<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>
Þú getur líka notað þetta hlé á tilteknum brotastöðum með móttækilegum skjátólum okkar .
<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>
Endurröðun
Pantaðu námskeið
Notaðu .order-
flokka til að stjórna sjónrænni röð efnisins þíns. Þessir flokkar eru móttækilegir, svo þú getur stillt order
eftir brotpunkt (td .order-1.order-md-2
). Inniheldur stuðning í 1
gegnum 12
öll fimm netþrep.
<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>
Það eru líka móttækilegir flokkar .order-first
og .order-last
flokkar sem breyta order
frumefni með því að nota order: -1
og order: 13
( order: $columns + 1
), í sömu röð. Þessum flokkum er einnig hægt að blanda saman við númeruðu .order-*
flokkana eftir þörfum.
<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>
Á móti dálkum
Þú getur jafnað töflusúlur á tvo vegu: móttækilegir .offset-
töfluflokkar okkar og framlegðartæki . Grid flokkar eru stærðir til að passa við dálka á meðan spássíur eru gagnlegri fyrir fljótleg skipulag þar sem breidd offsetsins er breytileg.
Offset flokkar
Færðu dálka til hægri með því að nota .offset-md-*
flokka. Þessir flokkar auka vinstri spássíu dálks með *
dálkum. Til dæmis .offset-md-4
færist .col-md-4
yfir fjóra dálka.
<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>
Auk dálkahreinsunar á móttækilegum brotastöðum gætirðu þurft að endurstilla frávik. Sjáðu þetta í aðgerð í töfludæminu .
<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>
Framlegðarveitur
Með flutningnum yfir í flexbox í v4 geturðu notað framlegðartól eins og .mr-auto
að þvinga systkinasúlur frá hver öðrum.
<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>
Hreiður
Til að hreiðra efnið þitt með sjálfgefna hnitanetinu skaltu bæta við nýjum .row
og setti .col-sm-*
dálka innan núverandi .col-sm-*
dálks. Hreiður línur ættu að innihalda sett af dálkum sem eru allt að 12 eða færri (það er ekki krafist að þú notir alla 12 tiltæka dálka).
<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>
Snilldar blöndur
Þegar þú notar uppruna Sass skrár frá Bootstrap hefurðu möguleika á að nota Sass breytur og mixins til að búa til sérsniðnar, merkingarlegar og móttækilegar síðuuppsetningar. Forskilgreindir netflokkar okkar nota þessar sömu breytur og blöndun til að bjóða upp á heilan pakka af tilbúnum flokkum fyrir fljótvirkt móttækilegt skipulag.
Breytur
Breytur og kort ákvarða fjölda dálka, breidd þakrennunnar og miðlunarfyrirspurnarstaðinn þar sem fljótandi dálkar hefjast. Við notum þetta til að búa til fyrirfram skilgreinda töfluflokka sem eru skjalfestir hér að ofan, sem og fyrir sérsniðnu blöndurnar sem taldar eru upp hér að neðan.
$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
);
Mixins
Mixin eru notuð í tengslum við grid breytur til að búa til merkingarlega CSS fyrir einstaka rist dálka.
// 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);
Dæmi um notkun
Þú getur breytt breytunum í eigin sérsniðin gildi, eða bara notað mixin með sjálfgefnum gildum. Hér er dæmi um að nota sjálfgefnar stillingar til að búa til tveggja dálka skipulag með bili á milli.
.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>
Aðlaga ristina
Með því að nota innbyggðu Sass breyturnar og kortin okkar er hægt að sérsníða fyrirfram skilgreinda töfluflokka algjörlega. Breyttu fjölda flokka, víddum miðilsfyrirspurna og gámabreiddum - settu síðan saman aftur.
Súlur og þakrennur
Hægt er að breyta fjölda ristdálka með Sass breytum. $grid-columns
er notað til að búa til breidd (í prósentum) hvers einstaks dálks á meðan $grid-gutter-width
stillir breidd fyrir súlurennur.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Grid tiers
Með því að fara út fyrir dálkana sjálfa geturðu líka sérsniðið fjölda töfluþrepa. Ef þú vildir bara fjórar töflustig myndirðu uppfæra $grid-breakpoints
og $container-max-widths
í eitthvað eins og þetta:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Þegar þú gerir einhverjar breytingar á Sass breytunum eða kortunum þarftu að vista breytingarnar og setja saman aftur. Með því að gera það mun gefa út glænýtt sett af fyrirfram skilgreindum töfluflokkum fyrir dálkabreidd, frávik og röðun. Móttækileg sýnileikatól verða einnig uppfærð til að nota sérsniðna brotpunkta. Gakktu úr skugga um að stilla töflugildi í px
(ekki rem
, em
, eða %
).