Mrežni sustav
Upotrijebite našu snažnu flexbox mrežu za mobilne uređaje za izradu izgleda svih oblika i veličina zahvaljujući sustavu od dvanaest stupaca, pet zadanih responzivnih razina, Sass varijablama i mixinovima te desecima unaprijed definiranih klasa.
Kako radi
Bootstrapov mrežni sustav koristi seriju spremnika, redaka i stupaca za raspored i poravnavanje sadržaja. Izrađen je s flexboxom i potpuno je osjetljiv. U nastavku je primjer i detaljan pogled na to kako se mreža sastavlja.
Novi ste ili niste upoznati s flexboxom? Pročitajte ovaj CSS Tricks flexbox vodič za pozadinu, terminologiju, smjernice i isječke koda.
<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>
Gornji primjer stvara tri stupca jednake širine na malim, srednjim, velikim i ekstra velikim uređajima pomoću naših unaprijed definiranih klasa mreže. Ti su stupci centrirani na stranici s roditeljem .container
.
Ukratko, evo kako funkcionira:
- Kontejneri omogućuju centriranje i vodoravno postavljanje sadržaja vaše stranice. Koristite
.container
za responzivnu širinu piksela ili.container-fluid
zawidth: 100%
sve veličine prikaza i uređaja. - Redovi su omoti za stupce. Svaki stup ima vodoravni
padding
(koji se naziva oluk) za kontrolu prostora između njih. Topadding
se zatim kompenzira na redovima s negativnim marginama. Na taj je način sav sadržaj u vašim stupcima vizualno poravnat s lijeve strane. - U rasporedu mreže, sadržaj mora biti postavljen unutar stupaca i samo stupci mogu biti neposredni potomci redaka.
- Zahvaljujući flexboxu, stupci mreže bez navedenog
width
automatski će izgledati kao stupci jednake širine. Na primjer,.col-sm
svaka od četiri instance automatski će biti široka 25% od male prijelomne točke pa naviše. Više primjera potražite u odjeljku stupaca s automatskim rasporedom . - Klase stupaca označavaju broj stupaca koje želite koristiti od mogućih 12 po retku. Dakle, ako želite tri stupca jednake širine, možete koristiti
.col-4
. - Stupci
width
su postavljeni u postocima, tako da su uvijek fluidni i veličine u odnosu na roditeljski element. - Stupci su vodoravni
padding
za stvaranje oluka između pojedinačnih stupaca, međutim, možete uklonitimargin
iz redaka ipadding
iz stupaca pomoću.no-gutters
na.row
. - Kako bi rešetka bila prilagodljiva, postoji pet prijelomnih točaka mreže, po jedna za svaku responzivnu prijelomnu točku : sve prijelomne točke (ekstra male), male, srednje, velike i ekstra velike.
- Prijelomne točke mreže temelje se na medijskim upitima minimalne širine, što znači da se primjenjuju na tu jednu prijelomnu točku i sve one iznad nje (npr.
.col-sm-4
primjenjuje se na male, srednje, velike i ekstra velike uređaje, ali ne i na prvuxs
prijelomnu točku). - Možete koristiti unaprijed definirane klase rešetki (kao što je
.col-4
) ili Sass mixins za više semantičkog označavanja.
Budite svjesni ograničenja i grešaka oko flexboxa , poput nemogućnosti korištenja nekih HTML elemenata kao flex spremnika .
Mogućnosti mreže
Dok Bootstrap koristi em
s ili rem
s za definiranje većine veličina, px
s se koriste za prijelomne točke mreže i širine spremnika. To je zato što je širina okvira za prikaz u pikselima i ne mijenja se s veličinom fonta .
Pomoću praktične tablice pogledajte kako aspekti Bootstrap grid sustava funkcioniraju na više uređaja.
Izuzetno mali <576px |
Mali ≥576px |
Srednje ≥768 px |
Veliki ≥992 px |
Iznimno velika ≥1200px |
|
---|---|---|---|---|---|
Maksimalna širina spremnika | Ništa (automatski) | 540 px | 720 px | 960 px | 1140 px |
Prefiks klase | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
Broj stupaca | 12 | ||||
Širina oluka | 30px (15px sa svake strane stupca) | ||||
Nestabilan | Da | ||||
Redoslijed stupaca | Da |
Automatski raspored stupaca
Upotrijebite klase stupaca specifične za prijelomne točke za jednostavno dimenzioniranje stupaca bez eksplicitne numerirane klase kao što je .col-sm-6
.
Jednake širine
Na primjer, ovdje su dva izgleda rešetke koja se primjenjuju na svaki uređaj i okvir za prikaz, od xs
do xl
. Dodajte bilo koji broj klasa bez jedinica za svaku prijelomnu točku koja vam je potrebna i svaki će stupac biti iste širine.
<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>
Višelinija jednake širine
Stvorite stupce jednake širine koji se protežu kroz više redaka tako da umetnete mjesto .w-100
gdje želite da se stupci lome u novi redak. Učinite prekide osjetljivima miješanjem .w-100
s nekim uslužnim programima za responzivni zaslon .
Postojala je greška Safari flexbox koja je sprječavala rad bez eksplicitnog flex-basis
ili border
. Postoje rješenja za starije verzije preglednika, ali ne bi trebala biti potrebna ako vaši ciljni preglednici ne spadaju u verzije s greškama.
<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>
Postavljanje širine jednog stupca
Automatski raspored za stupce rešetke flexboxa također znači da možete postaviti širinu jednog stupca i automatski promijeniti veličinu srodnih stupaca oko njega. Možete koristiti unaprijed definirane klase rešetki (kao što je prikazano u nastavku), mješavine rešetki ili unutarnje širine. Imajte na umu da će drugi stupci promijeniti veličinu bez obzira na širinu središnjeg stupca.
<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>
Sadržaj promjenjive širine
Koristite col-{breakpoint}-auto
klase za dimenzioniranje stupaca na temelju prirodne širine njihovog sadržaja.
<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>
Responzivni razredi
Bootstrapova mreža uključuje pet razina unaprijed definiranih klasa za izgradnju složenih responzivnih izgleda. Prilagodite veličinu svojih stupaca na iznimno malim, malim, srednjim, velikim ili iznimno velikim uređajima kako god vam odgovara.
Sve prijelomne točke
Za mreže koje su iste od najmanjeg uređaja do najvećeg, koristite klase .col
i . .col-*
Odredite numeriranu klasu kada trebate stupac posebne veličine; inače se slobodno držite .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>
Složeno vodoravno
Koristeći jedan skup .col-sm-*
klasa, možete stvoriti osnovni mrežni sustav koji počinje složen i postaje vodoravan na maloj prijelomnoj točki ( 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>
Pomiješajte i uskladite
Ne želite da se vaši stupci jednostavno slažu u nekoliko slojeva mreže? Po potrebi koristite kombinaciju različitih klasa za svaku razinu. Pogledajte primjer u nastavku za bolji uvid u to kako sve to funkcionira.
<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>
Oluci
Oluci se mogu prilagoditi odgovarajućim klasama korisnosti za prekidne točke i negativne margine. Da biste promijenili oluke u određenom retku, uparite pomoćni program negativne margine na .row
i odgovarajuće pomoćne programe za podmetanje na .col
s. Možda će se također morati prilagoditi roditelj .container
ili kako bi se izbjeglo neželjeno prelijevanje, korištenjem uslužnog programa za popunjavanje ponovnog podudaranja..container-fluid
Evo primjera prilagođavanja mreže Bootstrap na velikoj ( lg
) prijelomnoj točki i više. Povećali smo .col
ispunu s .px-lg-5
, eliminirali to s .mx-lg-n5
na roditelju .row
i zatim prilagodili .container
omot s .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>
Redak stupaca
Koristite responzivne .row-cols-*
klase za brzo postavljanje broja stupaca koji najbolje prikazuju vaš sadržaj i izgled. Dok se normalne .col-*
klase primjenjuju na pojedinačne stupce (npr., .col-md-4
), klase stupaca retka postavljene su na roditelju .row
kao prečac.
Upotrijebite ove klase stupaca redaka za brzo stvaranje osnovnih rasporeda rešetki ili za kontrolu rasporeda kartica.
<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>
Također možete koristiti prateći 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);
}
}
Poravnanje
Upotrijebite pomoćne programe za poravnanje flexbox za okomito i vodoravno poravnavanje stupaca. Internet Explorer 10-11 ne podržava okomito poravnanje flex stavki kada flex spremnik ima kao što je min-height
prikazano u nastavku. Pogledajte Flexbugs #3 za više detalja.
Okomito poravnanje
<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>
Horizontalno poravnanje
<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>
Bez oluka
Oluci između stupaca u našim unaprijed definiranim klasama mreže mogu se ukloniti pomoću .no-gutters
. Time se uklanjaju negativni margin
s .row
i horizontala padding
iz svih neposrednih podređenih stupaca.
Evo izvornog koda za stvaranje ovih stilova. Imajte na umu da su nadjačavanja stupaca obuhvaćena samo prvim podređenim stupcima i ciljana su putem birača atributa . Iako ovo generira specifičniji selektor, ispuna stupaca još uvijek se može dodatno prilagoditi pomoću pomoćnih programa za razmake .
Trebate dizajn od ruba do ruba? Ispustite roditelj .container
ili .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
U praksi, evo kako to izgleda. Imajte na umu da ovo možete nastaviti koristiti sa svim drugim unaprijed definiranim klasama rešetki (uključujući širine stupaca, responzivne razine, promjene redoslijeda i više).
<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>
Omatanje stupaca
Ako je više od 12 stupaca postavljeno unutar jednog retka, svaka grupa dodatnih stupaca će se, kao jedna cjelina, prebaciti u novi redak.
Budući da je 9 + 4 = 13 > 12, ovaj div sa širinom od 4 stupca premotava se u novi redak kao jedna susjedna jedinica.
Sljedeći stupci nastavljaju duž novog retka.
<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>
Lomovi stupaca
Razbijanje stupaca u novi redak u flexboxu zahtijeva mali hack: dodajte element width: 100%
gdje god želite prelomiti svoje stupce u novi redak. Obično se to postiže s više .row
s, ali ne može svaka metoda implementacije to objasniti.
<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>
Ovaj prekid također možete primijeniti na određenim prijelomnim točkama s našim uslužnim programima za responzivni prikaz .
<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>
Preuređivanje
Red klase
Koristite .order-
klase za kontrolu vizualnog poretka vašeg sadržaja. Ove su klase responzivne, tako da možete postaviti order
točku prekida (npr. .order-1.order-md-2
). Uključuje podršku za 1
kroz 12
svih pet razina mreže.
<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>
Također postoje responsive .order-first
i .order-last
klase koje mijenjaju order
element primjenom order: -1
i order: 13
( order: $columns + 1
), redom. Ove se klase također mogu po potrebi miješati s numeriranim .order-*
klasama.
<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>
Odstupanje stupaca
Stupce rešetke možete pomaknuti na dva načina: našim responzivnim .offset-
klasama rešetke i našim alatima za margine . Klase mreže veličine su tako da odgovaraju stupcima, dok su margine korisnije za brze rasporede gdje je širina pomaka varijabilna.
Offset klase
Pomaknite stupce udesno koristeći .offset-md-*
klase. Ove klase povećavaju lijevu marginu stupca po *
stupac. Na primjer, .offset-md-4
pomiče se .col-md-4
preko četiri stupca.
<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>
Uz brisanje stupaca na responzivnim prijelomnim točkama, možda ćete morati ponovno postaviti pomake. Pogledajte ovo na djelu u primjeru mreže .
<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>
Marginalne usluge
S prelaskom na flexbox u v4, možete koristiti pomoćne programe za margine kao što .mr-auto
je prisilno udaljavanje srodnih stupaca jedan od drugog.
<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>
Gniježđenje
Da biste ugniježdili svoj sadržaj sa zadanom mrežom, dodajte novi .row
i skup .col-sm-*
stupaca unutar postojećeg .col-sm-*
stupca. Ugniježđeni retci trebaju uključivati skup stupaca koji zbroje 12 ili manje (nije potrebno da koristite svih 12 dostupnih stupaca).
<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 mixini
Kada koristite Bootstrapove izvorne Sass datoteke, imate mogućnost korištenja Sass varijabli i mixina za stvaranje prilagođenih, semantičkih i responzivnih izgleda stranica. Naše unaprijed definirane klase rešetki koriste te iste varijable i miksine za pružanje čitavog paketa klasa spremnih za korištenje za brzo responzivne izglede.
Varijable
Varijable i mape određuju broj stupaca, širinu oluka i to��ku medijskog upita na kojoj počinju plutajući stupci. Koristimo ih za generiranje unaprijed definiranih klasa rešetki koje su gore dokumentirane, kao i za prilagođene miksine navedene u nastavku.
$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
Miksini se koriste u kombinaciji s varijablama rešetke za generiranje semantičkog CSS-a za pojedinačne stupce rešetke.
// 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);
Primjer upotrebe
Možete modificirati varijable prema vlastitim prilagođenim vrijednostima ili jednostavno koristiti miksine s njihovim zadanim vrijednostima. Evo primjera korištenja zadanih postavki za izradu izgleda u dva stupca s razmakom između.
.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>
Prilagodba mreže
Korištenjem naših ugrađenih Sass varijabli i mapa mreže, moguće je u potpunosti prilagoditi unaprijed definirane klase mreže. Promijenite broj razina, dimenzije medijskih upita i širine spremnika—a zatim ponovno kompajlirajte.
Stupovi i oluci
Broj stupaca mreže može se mijenjati putem Sass varijabli. $grid-columns
koristi se za generiranje širina (u postocima) svakog pojedinačnog stupca dok $grid-gutter-width
postavlja širinu za oluke stupaca.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Slojevi mreže
Osim samih stupaca, možete prilagoditi i broj slojeva rešetke. Ako želite samo četiri razine mreže, ažurirali biste $grid-breakpoints
i $container-max-widths
na nešto poput ovoga:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Kada radite bilo kakve promjene na Sass varijablama ili mapama, morat ćete spremiti svoje promjene i ponovno ih kompajlirati. Na taj ćete način ispisati potpuno novi skup unaprijed definiranih klasa rešetke za širine stupaca, pomake i redoslijed. Responzivni uslužni programi za vidljivost također će se ažurirati za korištenje prilagođenih prijelomnih točaka. Obavezno postavite vrijednosti rešetke u px
(ne rem
, em
, ili %
).