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, šest zadanih responzivnih razina, Sass varijablama i mixinovima te desecima unaprijed definiranih klasa.
Primjer
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. Ispod je primjer i detaljno objašnjenje kako se mrežni sustav spaja.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Gornji primjer stvara tri stupca jednake širine na svim uređajima i prozorima pomoću naših unaprijed definiranih klasa rešetke. Ti su stupci centrirani na stranici s roditeljem .container
.
Kako radi
Raščlanjujući ga, evo kako se mrežni sustav sastavlja:
-
Naša mreža podržava šest osjetljivih prijelomnih točaka . Prijelomne točke temelje se na
min-width
medijskim upitima, što znači da utječu na tu prijelomnu točku i sve one iznad nje (npr..col-sm-4
odnosi se nasm
,md
,lg
,xl
ixxl
). To znači da možete kontrolirati veličinu i ponašanje spremnika i stupca prema svakoj prijelomnoj točki. -
Spremnici centriraju i vodoravno postavljaju vaš sadržaj. Koristite
.container
za responzivnu širinu piksela,.container-fluid
zawidth: 100%
sve okvire za prikaz i uređaje, ili responzivni spremnik (npr..container-md
) za kombinaciju fluidnih i pikselnih širina. -
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 recima s negativnim marginama kako bi se osiguralo da je sadržaj u vašim stupcima vizualno poravnat s lijeve strane. Redovi također podržavaju klase modifikatora za jednoliku primjenu veličine stupca i klase oluka za promjenu razmaka vašeg sadržaja. -
Kolone su nevjerojatno fleksibilne. Dostupno je 12 stupaca predloška po retku, što vam omogućuje stvaranje različitih kombinacija elemenata koji obuhvaćaju bilo koji broj stupaca. Klase stupaca označavaju broj stupaca predloška koje treba obuhvatiti (npr.
col-4
obuhvaća četiri).width
s se postavljaju u postocima tako da uvijek imate istu relativnu veličinu. -
Oluci su također osjetljivi i prilagodljivi. Klase oluka dostupne su u svim prijelomnim točkama, sa svim istim veličinama kao i naše margine i razmaci od ruba . Promijenite vodoravne oluke s
.gx-*
klasama, okomite oluke s.gy-*
ili sve oluke s.g-*
klasama..g-0
također je dostupan za uklanjanje oluka. -
Sass varijable, karte i miksini pokreću mrežu. Ako ne želite koristiti unaprijed definirane klase rešetke u Bootstrapu, možete upotrijebiti naš izvorni Sass rešetke za stvaranje vlastite s više semantičkog označavanja. Također uključujemo neka CSS prilagođena svojstva za korištenje ovih Sass varijabli za još veću fleksibilnost za vas.
Budite svjesni ograničenja i grešaka oko flexboxa , poput nemogućnosti korištenja nekih HTML elemenata kao flex spremnika .
Mogućnosti mreže
Bootstrapov mrežni sustav može se prilagoditi na svih šest zadanih prijelomnih točaka i bilo kojim prijelomnim točkama koje prilagodite. Šest zadanih razina rešetke su sljedeći:
- Ekstra mali (xs)
- mali (sm)
- Srednje (md)
- velika (lg)
- Ekstra veliki (xl)
- Ekstra ekstra veliki (xxl)
Kao što je gore navedeno, svaka od ovih prijelomnih točaka ima vlastiti spremnik, jedinstveni prefiks klase i modifikatore. Evo kako se rešetka mijenja preko ovih prijelomnih točaka:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992 px |
xl ≥1200 px |
xxl ≥1400 px |
|
---|---|---|---|---|---|---|
Kontejnermax-width |
Ništa (automatski) | 540 px | 720 px | 960 px | 1140 px | 1320 px |
Prefiks klase | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
Broj stupaca | 12 | |||||
Širina oluka | 1,5rem (0,75rem lijevo i desno) | |||||
Oluci po mjeri | Da | |||||
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 xxl
. 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>
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 šest 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>
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 zadane za sadržane stupce. Pomoću .row-cols-auto
možete dati stupcima njihovu prirodnu širinu.
Upotrijebite ove klase stupaca redaka za brzo stvaranje osnovnih rasporeda rešetki ili za kontrolu rasporeda kartica i nadjačavanje po potrebi na razini stupca.
<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-auto">
<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>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">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);
}
}
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-3">
Level 1: .col-sm-3
</div>
<div class="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
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: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
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();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@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: 1.5rem !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 %
).