Mrežni sistem
Uporabite našo zmogljivo mrežo flexbox za mobilne naprave, da ustvarite postavitve vseh oblik in velikosti zahvaljujoč sistemu dvanajstih stolpcev, šestim privzetim odzivnim nivojem, spremenljivkam Sass in mešanicam ter desetinam vnaprej določenih razredov.
Primer
Mrežni sistem Bootstrapa uporablja niz vsebnikov, vrstic in stolpcev za postavitev in poravnavo vsebine. Zgrajen je s flexboxom in je popolnoma odziven. Spodaj sta primer in poglobljena razlaga, kako se omrežni sistem združi.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Zgornji primer ustvari tri enako široke stolpce v vseh napravah in pogledih z uporabo naših vnaprej določenih mrežnih razredov. Ti stolpci so na sredini strani z nadrejenim .container
.
Kako deluje
Če razčlenimo, si oglejte, kako je mrežni sistem sestavljen:
-
Naše omrežje podpira šest odzivnih prelomnih točk . Mejne točke temeljijo na
min-width
medijskih poizvedbah, kar pomeni, da vplivajo na to mejno točko in vse tiste nad njo (npr..col-sm-4
velja zasm
,md
,lg
,xl
inxxl
). To pomeni, da lahko nadzirate velikost vsebnika in stolpca ter obnašanje za vsako prelomno točko. -
Vsebniki na sredini in vodoravno podložijo vašo vsebino. Uporabite
.container
za širino odzivne slikovne pike.container-fluid
zawidth: 100%
vsa vidna okna in naprave ali odzivni vsebnik (npr..container-md
) za kombinacijo širin tekočine in slikovne pike. -
Vrstice so ovoji za stolpce. Vsak stolpec ima vodoravno
padding
(imenovano žleb) za nadzor prostora med njimi. Topadding
se nato izniči v vrsticah z negativnimi robovi, da se zagotovi, da je vsebina v vaših stolpcih vizualno poravnana po levi strani. Vrstice podpirajo tudi razrede modifikatorjev za enotno uporabo velikosti stolpcev in razrede žlebov za spreminjanje razmika vaše vsebine. -
Stolpci so neverjetno prilagodljivi. Na vrstico je na voljo 12 stolpcev predloge, kar vam omogoča ustvarjanje različnih kombinacij elementov, ki zajemajo poljubno število stolpcev. Razredi stolpcev označujejo število stolpcev predloge, ki jih je treba zajeti (npr.
col-4
obsega štiri).width
so nastavljeni v odstotkih, tako da imate vedno enako relativno velikost. -
Žlebovi so tudi odzivni in prilagodljivi. Razredi žlebov so na voljo v vseh prelomnih točkah, z vsemi enakimi velikostmi kot naš rob in razmik med robovi . Spremenite vodoravne žlebove z
.gx-*
razredi, navpične žlebove z.gy-*
ali vse žlebove z.g-*
razredi..g-0
na voljo tudi za odstranjevanje žlebov. -
Sass spremenljivke, zemljevidi in mixini napajajo omrežje. Če ne želite uporabljati vnaprej določenih mrežnih razredov v Bootstrapu, lahko uporabite izvor našega omrežja Sass , da ustvarite svojega z več semantične oznake. Vključujemo tudi nekaj lastnosti CSS po meri za uporabo teh spremenljivk Sass za še večjo prilagodljivost za vas.
Zavedajte se omejitev in napak okoli flexboxa , kot je nezmožnost uporabe nekaterih elementov HTML kot vsebnikov flex .
Možnosti mreže
Mrežni sistem Bootstrapa se lahko prilagodi vsem šestim privzetim mejnim točkam in vsem mejnim točkam, ki jih prilagodite. Šest privzetih stopenj mreže je naslednjih:
- Zelo majhen (xs)
- Majhna (sm)
- Srednje (md)
- Velik (lg)
- Zelo velik (xl)
- Ekstra ekstra velik (xxl)
Kot je navedeno zgoraj, ima vsaka od teh prelomnih točk svoj vsebnik, edinstveno predpono razreda in modifikatorje. Tako se mreža spreminja med temi prelomnimi točkami:
xs <576px |
sm ≥576px |
md ≥768 slikovnih pik |
lg ≥992 slikovnih pik |
xl ≥1200 slikovnih pik |
xxl ≥1400 slikovnih pik |
|
---|---|---|---|---|---|---|
Posodamax-width |
Brez (samodejno) | 540 slikovnih pik | 720 slikovnih pik | 960 slikovnih pik | 1140 slikovnih pik | 1320 slikovnih pik |
Predpona razreda | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# stolpcev | 12 | |||||
Širina žleba | 1,5 rem (0,75 rem levo in desno) | |||||
Žlebovi po meri | ja | |||||
Nestabilen | ja | |||||
Urejanje stolpcev | ja |
Samodejna postavitev stolpcev
Uporabite razrede stolpcev, specifične za prekinitvene točke, za preprosto določanje velikosti stolpcev brez izrecnega oštevilčenega razreda, kot je .col-sm-6
.
Enake širine
Tukaj sta na primer dve postavitvi mreže, ki veljata za vsako napravo in vidno polje, od xs
do xxl
. Dodajte poljubno število razredov brez enot za vsako prelomno točko, ki jo potrebujete, in vsak stolpec bo enako širok.
<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>
Nastavitev širine enega stolpca
Samodejna postavitev za stolpce mreže flexbox pomeni tudi, da lahko nastavite širino enega stolpca in samodejno spremenite velikost sorodnih stolpcev okoli njega. Uporabite lahko vnaprej določene mrežne razrede (kot je prikazano spodaj), mešane mreže ali širine vrstic. Upoštevajte, da se bo velikost drugih stolpcev spremenila ne glede na širino osrednjega stolpca.
<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>
Vsebina spremenljive širine
Uporabite col-{breakpoint}-auto
razrede za določanje velikosti stolpcev glede na naravno širino njihove vsebine.
<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>
Odzivni razredi
Bootstrapova mreža vključuje šest stopenj vnaprej določenih razredov za gradnjo kompleksnih odzivnih postavitev. Prilagodite velikost svojih stolpcev na zelo majhnih, majhnih, srednjih, velikih ali zelo velikih napravah, kakor se vam zdi primerno.
Vse prekinitvene točke
Za mreže, ki so enake od najmanjše naprave do največje, uporabite razrede .col
in . .col-*
Podajte oštevilčen razred, ko potrebujete stolpec posebne velikosti; sicer pa se 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>
Zloženo vodoravno
Z uporabo enega samega nabora .col-sm-*
razredov lahko ustvarite osnovni mrežni sistem, ki se začne kot zložen in postane vodoraven na majhni prelomni 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>
Zmešaj in poveži
Ne želite, da bi bili vaši stolpci preprosto zloženi v nekaj mrežnih nivojih? Po potrebi uporabite kombinacijo različnih razredov za vsako raven. Oglejte si spodnji primer za boljšo predstavo o tem, kako vse skupaj deluje.
<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>
Stolpci vrstic
Uporabite odzivne .row-cols-*
razrede za hitro nastavitev števila stolpcev, ki najbolje upodabljajo vašo vsebino in postavitev. Medtem ko običajni .col-*
razredi veljajo za posamezne stolpce (npr. .col-md-4
), so razredi stolpcev vrstic nastavljeni na nadrejeni .row
kot privzeti za vsebovane stolpce. Z .row-cols-auto
lahko daste stolpcem njihovo naravno širino.
Uporabite te razrede stolpcev vrstic za hitro ustvarjanje osnovnih postavitev mreže ali za nadzor postavitev kartic in po potrebi preglasitev na ravni stolpca.
<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>
Uporabite lahko tudi priložen 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);
}
}
Gnezdenje
Če želite svojo vsebino ugnezditi s privzeto mrežo, dodajte nov .row
in nabor .col-sm-*
stolpcev znotraj obstoječega .col-sm-*
stolpca. Ugnezdene vrstice morajo vključevati nabor stolpcev, ki seštejejo do 12 ali manj (ni potrebno, da uporabite vseh 12 razpoložljivih stolpcev).
<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
Ko uporabljate Bootstrapove izvorne datoteke Sass, imate možnost uporabe spremenljivk in mešanic Sass za ustvarjanje semantičnih in odzivnih postavitev strani po meri. Naši vnaprej določeni mrežni razredi uporabljajo iste spremenljivke in mešanice, da zagotovijo celotno zbirko razredov, pripravljenih za uporabo, za hitro odzivne postavitve.
Spremenljivke
Spremenljivke in zemljevidi določajo število stolpcev, širino žleba in točko medijske poizvedbe, na kateri se začnejo plavajoči stolpci. Uporabljamo jih za ustvarjanje vnaprej določenih razredov mreže, dokumentiranih zgoraj, kot tudi za mešanice po meri, navedene spodaj.
$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 uporabljajo v povezavi s spremenljivkami mreže za ustvarjanje semantičnega CSS za posamezne stolpce mreže.
// 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);
Primer uporabe
Spremenljivke lahko spremenite v svoje lastne vrednosti po meri ali preprosto uporabite miksine z njihovimi privzetimi vrednostmi. Tukaj je primer uporabe privzetih nastavitev za ustvarjanje postavitve v dveh stolpcih z vrzeljo med njima.
.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>
Prilagajanje mreže
Z uporabo naših vgrajenih mrežnih spremenljivk in zemljevidov Sass je mogoče popolnoma prilagoditi vnaprej določene razrede mreže. Spremenite število nivojev, dimenzije medijske poizvedbe in širine vsebnika – nato znova prevedite.
Stebri in žlebovi
Število stolpcev mreže je mogoče spremeniti s spremenljivkami Sass. $grid-columns
se uporablja za ustvarjanje širin (v odstotkih) vsakega posameznega stolpca, medtem ko $grid-gutter-width
nastavi širino za žlebove stolpcev.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Stopnje mreže
Poleg samih stolpcev lahko prilagodite tudi število stopenj mreže. Če bi želeli le štiri mrežne ravni, bi posodobili $grid-breakpoints
in $container-max-widths
na nekaj takega:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Ko spreminjate spremenljivke ali zemljevide Sass, boste morali shraniti spremembe in jih znova prevesti. S tem boste ustvarili povsem nov niz vnaprej določenih razredov mreže za širine stolpcev, odmike in vrstni red. Odzivni pripomočki za vidnost bodo prav tako posodobljeni za uporabo prekinitvenih točk po meri. Ne pozabite nastaviti mrežnih vrednosti v px
(ne rem
, em
, ali %
).