Rooster stelsel
Gebruik ons kragtige mobiele-eerste flexbox-rooster om uitlegte van alle vorms en groottes te bou danksy 'n twaalf kolomstelsel, vyf verstek-responsiewe vlakke, Sass-veranderlikes en -mengsels, en dosyne voorafbepaalde klasse.
Hoe dit werk
Bootstrap se roosterstelsel gebruik 'n reeks houers, rye en kolomme om inhoud uit te lê en in lyn te bring. Dit is gebou met flexbox en reageer ten volle. Hieronder is 'n voorbeeld en 'n in-diepte blik op hoe die rooster bymekaar kom.
Nuut by of onbekend met flexbox? Lees hierdie CSS Tricks flexbox-gids vir agtergrond, terminologie, riglyne en kodebrokkies.
<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>
Die voorbeeld hierbo skep drie kolomme met gelyke breedte op klein, medium, groot en ekstra groot toestelle deur ons vooraf gedefinieerde roosterklasse te gebruik. Daardie kolomme is gesentreer in die bladsy met die ouer .container
.
Om dit af te breek, hier is hoe dit werk:
- Houers bied 'n manier om jou werf se inhoud te sentreer en horisontaal te vul. Gebruik
.container
vir 'n responsiewe piekselwydte of.container-fluid
virwidth: 100%
alle kykpoort en toestelgroottes. - Rye is omhulsels vir kolomme. Elke kolom het horisontale
padding
(genoem 'n geut) om die spasie tussen hulle te beheer. Ditpadding
word dan teengewerk op die rye met negatiewe marges. Op hierdie manier is al die inhoud in u kolomme visueel aan die linkerkant in lyn. - In 'n roosteruitleg moet inhoud binne kolomme geplaas word en slegs kolomme mag onmiddellike kinders van rye wees.
- Danksy flexbox sal roosterkolomme sonder 'n gespesifiseerde
width
outomaties as gelyke breedte kolomme uitleg. Byvoorbeeld, vier gevalle van.col-sm
sal elkeen outomaties 25% breed wees vanaf die klein breekpunt en hoër. Sien die outo-uitlegkolomme- afdeling vir meer voorbeelde. - Kolomklasse dui die aantal kolomme aan wat jy uit die moontlike 12 per ry wil gebruik. Dus, as jy drie kolomme met dieselfde breedte wil hê, kan jy
.col-4
. - Kolom
width
s word in persentasies gestel, so hulle is altyd vloeibaar en groot relatief tot hul moederelement. - Kolomme het horisontale
padding
om die geute tussen individuele kolomme te skep, maar jy kan diemargin
van rye enpadding
van kolomme met.no-gutters
op die verwyder.row
. - Om die rooster responsief te maak, is daar vyf roosterbreekpunte, een vir elke responsiewe breekpunt : alle breekpunte (ekstra klein), klein, medium, groot en ekstra groot.
- Roosterbreekpunte is gebaseer op medianavrae met 'n minimum breedte, wat beteken dat hulle van toepassing is op daardie een breekpunt en almal daarbo (bv. van
.col-sm-4
toepassing op klein, medium, groot en ekstra groot toestelle, maar nie die eerstexs
breekpunt nie). - Jy kan vooraf gedefinieerde roosterklasse (soos
.col-4
) of Sass-mengings gebruik vir meer semantiese opmaak.
Wees bewus van die beperkings en foute rondom flexbox , soos die onvermoë om sommige HTML-elemente as flex-houers te gebruik .
Grid opsies
Terwyl Bootstrap em
s of rem
s gebruik om die meeste groottes te definieer, px
word s gebruik vir roosterbreekpunte en houerwydtes. Dit is omdat die kykpoortwydte in pixels is en nie verander met die lettergrootte nie .
Kyk hoe aspekte van die Bootstrap-roosterstelsel oor verskeie toestelle werk met 'n handige tabel.
Ekstra klein <576px |
Klein ≥576 px |
Medium ≥768 px |
Groot ≥992px |
Ekstra groot ≥1200px |
|
---|---|---|---|---|---|
Maksimum houer breedte | Geen (outo) | 540 px | 720 px | 960px | 1140 px |
Klas voorvoegsel | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# van kolomme | 12 | ||||
Geut breedte | 30px (15px aan elke kant van 'n kolom) | ||||
Nesbaar | Ja | ||||
Kolombestelling | Ja |
Outo-uitlegkolomme
Gebruik breekpunt-spesifieke kolomklasse vir maklike kolomgrootte sonder 'n eksplisiete genommerde klas soos .col-sm-6
.
Gelyke breedte
Hier is byvoorbeeld twee roosteruitlegte wat op elke toestel en kykpoort van toepassing is, van xs
tot xl
. Voeg enige aantal eenheidlose klasse by vir elke breekpunt wat jy nodig het en elke kolom sal dieselfde breedte hê.
<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>
Meerlyn met gelyke breedte
Skep gelyke breedte kolomme wat oor verskeie lyne strek deur 'n in te voeg .w-100
waar jy wil hê die kolomme moet breek na 'n nuwe lyn. Maak die pouses reageer deur te meng .w-100
met 'n paar responsiewe vertoonhulpmiddels .
Daar was 'n Safari flexbox fout wat verhoed het dat dit werk sonder 'n eksplisiete flex-basis
of border
. Daar is oplossings vir ouer blaaierweergawes, maar dit behoort nie nodig te wees as jou teikenblaaiers nie in die karretjieweergawes val nie.
<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>
Stel een kolombreedte in
Outo-uitleg vir flexbox-roosterkolomme beteken ook dat jy die breedte van een kolom kan stel en die broers en susterskolomme outomaties rondom dit kan verander. Jy kan vooraf gedefinieerde roosterklasse (soos hieronder getoon), roostermengsels of inlynwydtes gebruik. Let daarop dat die ander kolomme se grootte sal verander, ongeag die breedte van die middelkolom.
<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>
Veranderlike breedte inhoud
Gebruik col-{breakpoint}-auto
klasse om kolomme te grootte gebaseer op die natuurlike breedte van hul inhoud.
<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>
Responsiewe klasse
Bootstrap se rooster bevat vyf vlakke van voorafbepaalde klasse vir die bou van komplekse responsiewe uitlegte. Pasmaak die grootte van jou kolomme op ekstra klein, klein, medium, groot of ekstra groot toestelle soos jy goeddink.
Alle breekpunte
Vir roosters wat dieselfde is van die kleinste toestelle tot die grootste, gebruik die .col
en .col-*
klasse. Spesifiseer 'n genommerde klas wanneer jy 'n besondere grootte kolom benodig; anders, hou gerus by .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>
Gestapel tot horisontaal
Deur 'n enkele stel .col-sm-*
klasse te gebruik, kan jy 'n basiese roosterstelsel skep wat gestapel begin en horisontaal word by die klein breekpunt ( 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>
Meng en pas
Wil jy nie hê dat jou kolomme eenvoudig in sommige roostervlakke gestapel moet word nie? Gebruik 'n kombinasie van verskillende klasse vir elke vlak soos nodig. Sien die voorbeeld hieronder vir 'n beter idee van hoe dit alles werk.
<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>
Geute
Geute kan responsief aangepas word deur breekpunt-spesifieke vulling en negatiewe marge-nutsklasse. Om die geute in 'n gegewe ry te verander, koppel 'n negatiewe marge-hulpmiddel op die .row
en bypassende opvulhulpprogramme op die .col
s. Die .container
of .container-fluid
ouer sal dalk ook aangepas moet word om ongewenste oorloop te vermy, deur weer bypassende opvullingshulpmiddel te gebruik.
Hier is 'n voorbeeld van die pasmaak van die Bootstrap-rooster by die groot ( lg
) breekpunt en hoër. Ons het die .col
vulling vergroot met .px-lg-5
, dit teengewerk met .mx-lg-n5
op die ouer en dan die omhulsel .row
aangepas met ..container
.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>
Ry kolomme
Gebruik die responsiewe .row-cols-*
klasse om vinnig die aantal kolomme te stel wat jou inhoud en uitleg die beste weergee. Terwyl normale .col-*
klasse van toepassing is op die individuele kolomme (bv. .col-md-4
), word die rykolommeklasse op die ouer .row
as 'n kortpad gestel.
Gebruik hierdie rykolomklasse om vinnig basiese roosteruitlegte te skep of om jou kaartuitlegte te beheer.
<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>
Jy kan ook die bygaande Sass mixin gebruik, 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);
}
}
Belyning
Gebruik flexbox-belyningshulpmiddels om kolomme vertikaal en horisontaal in lyn te bring. Internet Explorer 10-11 ondersteun nie vertikale belyning van buigsame items wanneer die buighouer 'n min-height
soos hieronder getoon het nie. Sien Flexbugs #3 vir meer besonderhede.
Vertikale belyning
<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>
Horisontale belyning
<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>
Geen geute nie
Die geute tussen kolomme in ons vooraf gedefinieerde roosterklasse kan verwyder word met .no-gutters
. Dit verwyder die negatiewe margin
s van .row
en die horisontale padding
van alle onmiddellike kinders kolomme.
Hier is die bronkode vir die skep van hierdie style. Let daarop dat kolomverwerpings slegs na die eerste kinderkolomme gedek word en via kenmerkkieser geteiken word . Alhoewel dit 'n meer spesifieke kieser genereer, kan kolomvulling steeds verder aangepas word met spasiëringsnutsmiddels .
Het jy 'n rand-tot-rand-ontwerp nodig? Los die ouer .container
of .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
In die praktyk, hier is hoe dit lyk. Let daarop dat jy kan voortgaan om dit te gebruik met alle ander voorafbepaalde roosterklasse (insluitend kolomwydtes, responsiewe vlakke, herbestellings en meer).
<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>
Kolom wikkel
As meer as 12 kolomme binne 'n enkele ry geplaas word, sal elke groep ekstra kolomme, as een eenheid, op 'n nuwe lyn toegedraai word.
Aangesien 9 + 4 = 13 > 12, word hierdie 4-kolom-wye div op 'n nuwe lyn toegedraai as een aaneenlopende eenheid.
Volgende kolomme gaan voort langs die nuwe lyn.
<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>
Kolombreuke
Om kolomme na 'n nuwe lyn in flexbox te breek, vereis 'n klein hack: voeg 'n element by width: 100%
waar jy jou kolomme ook al wil omvou na 'n nuwe lyn. Normaalweg word dit met veelvuldige s bewerkstellig .row
, maar nie elke implementeringsmetode kan hiervoor rekening hou nie.
<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>
Jy kan ook hierdie breek by spesifieke breekpunte toepas met ons responsiewe vertoonhulpmiddels .
<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>
Herrangskik
Bestel klasse
Gebruik .order-
klasse om die visuele volgorde van jou inhoud te beheer. Hierdie klasse reageer, so jy kan die order
deurbreekpunt (bv. .order-1.order-md-2
). Sluit ondersteuning in vir 1
deur 12
al vyf roostervlakke.
<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>
Daar is ook responsiewe .order-first
en .order-last
klasse wat die order
van 'n element verander deur order: -1
en order: 13
( order: $columns + 1
), onderskeidelik toe te pas. Hierdie klasse kan ook vermeng word met die genommerde .order-*
klasse soos nodig.
<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>
Verrekening van kolomme
Jy kan roosterkolomme op twee maniere verreken: ons responsiewe .offset-
roosterklasse en ons marge-hulpprogramme . Roosterklasse is gegrootte om by kolomme te pas, terwyl marges nuttiger is vir vinnige uitlegte waar die wydte van die afwyking veranderlik is.
Verreken klasse
Skuif kolomme na regs deur .offset-md-*
klasse te gebruik. Hierdie klasse vergroot die linkerkantlyn van 'n kolom met *
kolomme. .offset-md-4
Beweeg byvoorbeeld .col-md-4
oor vier kolomme.
<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>
Benewens die skoonmaak van kolomme by responsiewe breekpunte, moet jy dalk afwykings terugstel. Sien dit in aksie in die roostervoorbeeld .
<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>
Marge nutsdienste
Met die skuif na flexbox in v4, kan u marge-hulpmiddels gebruik soos .mr-auto
om broers en susterskolomme van mekaar weg te dwing.
<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>
Nestel
Om jou inhoud met die verstekrooster te nes, voeg 'n nuwe .row
en stel .col-sm-*
kolomme binne 'n bestaande .col-sm-*
kolom by. Geneste rye moet 'n stel kolomme insluit wat tot 12 of minder optel (dit word nie vereis dat jy al 12 beskikbare kolomme gebruik nie).
<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>
Snaakse mengsels
Wanneer u Bootstrap se bron-Sass-lêers gebruik, het u die opsie om Sass-veranderlikes en -mengings te gebruik om pasgemaakte, semantiese en responsiewe bladsyuitlegte te skep. Ons voorafbepaalde roosterklasse gebruik dieselfde veranderlikes en mengsels om 'n hele reeks gereed-vir-gebruik-klasse te verskaf vir vinnige responsiewe uitlegte.
Veranderlikes
Veranderlikes en kaarte bepaal die aantal kolomme, die geutwydte en die medianavraagpunt waar swewende kolomme begin word. Ons gebruik dit om die voorafbepaalde roosterklasse wat hierbo gedokumenteer is te genereer, sowel as vir die pasgemaakte mengsels hieronder gelys.
$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
);
Mengsels
Mixins word saam met die roosterveranderlikes gebruik om semantiese CSS vir individuele roosterkolomme te genereer.
// 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);
Voorbeeld gebruik
Jy kan die veranderlikes verander na jou eie persoonlike waardes, of gebruik net die mixins met hul verstekwaardes. Hier is 'n voorbeeld van die gebruik van die verstek instellings om 'n twee-kolom uitleg te skep met 'n gaping tussen.
.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>
Pasmaak van die rooster
Deur ons ingeboude rooster Sass veranderlikes en kaarte te gebruik, is dit moontlik om die vooraf gedefinieerde roosterklasse heeltemal aan te pas. Verander die aantal vlakke, die medianavraag-dimensies en die houerwydtes—stel dan weer saam.
Kolomme en geute
Die aantal roosterkolomme kan via Sass-veranderlikes gewysig word. $grid-columns
word gebruik om die wydtes (in persent) van elke individuele kolom te genereer terwyl $grid-gutter-width
die breedte vir die kolomgeute bepaal word.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Roostervlakke
As u verder as die kolomme self beweeg, kan u ook die aantal roostervlakke aanpas. As jy net vier roostervlakke wil hê, sal jy die $grid-breakpoints
en opdateer $container-max-widths
na iets soos hierdie:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Wanneer jy enige veranderinge aan die Sass veranderlikes of kaarte maak, sal jy jou veranderinge moet stoor en hersaamstel. Deur dit te doen, sal 'n splinternuwe stel voorafbepaalde roosterklasse vir kolomwydtes, verskuiwings en ordening uitstuur. Hulpmiddels vir responsiewe sigbaarheid sal ook opgedateer word om die pasgemaakte breekpunte te gebruik. Maak seker dat jy roosterwaardes in px
(nie rem
, em
, of %
) stel nie.