Võrgusüsteem
Tänu kaheteistkümne veeru süsteemile, kuuele vaikimisi reageerivale astmele, Sassi muutujatele ja mikseritele ning kümnetele eelmääratletud klassidele kasutage meie võimsat mobiilipõhiselt paindlikku ruudustikku, et luua igasuguse kuju ja suurusega paigutusi.
Näide
Bootstrapi ruudustikusüsteem kasutab sisu paigutuseks ja joondamiseks mitmeid konteinereid, ridu ja veerge. See on ehitatud flexboxiga ja on täielikult reageeriv. Allpool on näide ja põhjalik selgitus selle kohta, kuidas võrgusüsteem kokku saab.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Ülaltoodud näide loob meie eelmääratletud ruudustikuklasside abil kõigis seadmetes ja vaateportides kolm võrdse laiusega veergu. Need veerud on lehe keskel vanemaga .container
.
Kuidas see töötab
Võrgustiku süsteem kokku tuleb järgmiselt.
-
Meie ruudustik toetab kuut reageerivat katkestuspunkti . Katkestuspunktid põhinevad
min-width
meediumipäringutel, mis tähendab, et need mõjutavad seda murdepunkti ja kõiki sellest kõrgemaid (nt.col-sm-4
kehtibsm
,md
,lg
,xl
jaxxl
). See tähendab, et saate iga katkestuspunkti järgi juhtida konteineri ja veeru suurust ja käitumist. -
Konteinerid keskele ja horisontaalselt polsterdage sisu. Kasutage
.container
tundliku pikslilaiuse.container-fluid
jaoks ,width: 100%
kõigi vaateavade ja seadmete jaoks või reageerivat konteinerit (nt.container-md
) vedela ja pikslilaiuse kombinatsiooni jaoks. -
Read on veergude ümbrised. Igal veerul on horisontaalne
padding
(nn vihmaveerenn) nendevahelise ruumi reguleerimiseks. Seejärelpadding
neutraliseeritakse seda negatiivsete veeristega ridadel, et veergude sisu oleks visuaalselt vasakpoolses servas joondatud. Ridad toetavad ka muutmisklasse veergude suuruse ühtseks rakendamiseks ja renni klasse , et muuta sisu vahekaugust. -
Veerud on uskumatult paindlikud. Ühe rea kohta on saadaval 12 malliveergu, mis võimaldab teil luua erinevaid elementide kombinatsioone, mis hõlmavad mis tahes arvu veerge. Veeruklassid näitavad malli veergude arvu, mida katta (nt
col-4
hõlmab nelja).width
s on määratud protsentides, nii et teil on alati sama suhteline suurus. -
Vihmaveerennid on ka tundlikud ja kohandatavad. Vihmaveerennide klassid on saadaval kõigis murdepunktides, sama suurusega kui meie veerised ja polsterdusvahed . Muutke horisontaalseid vihmaveerennid
.gx-*
klassidega, vertikaalseid vihmaveerennid funktsiooniga.gy-*
või kõiki rennisid.g-*
klassidega..g-0
on saadaval ka vihmaveerennide eemaldamiseks. -
Sassi muutujad, kaardid ja segud toidavad võrku. Kui te ei soovi Bootstrapis eelmääratletud ruudustikuklasse kasutada, saate kasutada meie ruudustiku allikat Sass , et luua oma, millel on rohkem semantiline märgistus. Lisame ka mõned CSS-i kohandatud atribuudid nende Sassi muutujate tarbimiseks, et pakkuda teile veelgi suuremat paindlikkust.
Olge teadlik flexboxi piirangutest ja vigadest , nagu võimetus kasutada mõnda HTML-i elementi paindlike konteineritena .
Võrgu valikud
Bootstrapi ruudustikusüsteem saab kohaneda kõigi kuue vaikemurdepunktiga ja kõigi teie kohandatavate katkestuspunktidega. Kuus vaikeruudustiku taset on järgmised:
- Eriti väike (xs)
- Väike (sm)
- Keskmine (md)
- Suur (lg)
- Eriti suur (xl)
- Eriti suur (xxl)
Nagu eespool märgitud, on kõigil neil katkestuspunktidel oma konteiner, kordumatu klassi eesliide ja modifikaatorid. Siin on, kuidas ruudustik nende murdepunktide vahel muutub.
xs <576px |
sm ≥ 576 pikslit |
md ≥768 pikslit |
lg ≥ 992 pikslit |
xl ≥ 1200 pikslit |
xxl ≥1400 pikslit |
|
---|---|---|---|---|---|---|
Konteinermax-width |
Puudub (automaatne) | 540 pikslit | 720 pikslit | 960 pikslit | 1140 pikslit | 1320 pikslit |
Klassi eesliide | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# veergudest | 12 | |||||
Renni laius | 1,5 rem (0,75 rem vasakul ja paremal) | |||||
Eritellimusel vihmaveerennid | Jah | |||||
Pesastav | Jah | |||||
Veergude järjestamine | Jah |
Automaatse paigutusega veerud
Kasutage murdepunktispetsiifilisi veeruklasse veeru suuruse hõlpsaks muutmiseks ilma selgesõnalise nummerdatud klassita, nagu .col-sm-6
.
Võrdse laiusega
Näiteks siin on kaks ruudustiku paigutust, mis kehtivad igale seadmele ja vaateavale vahemikus xs
kuni xxl
. Lisage iga vajaliku murdepunkti jaoks suvaline arv ühikuteta klasse ja iga veerg on sama lai.
<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>
Ühe veeru laiuse määramine
Flexboxi ruudustiku veergude automaatne paigutus tähendab ka seda, et saate määrata ühe veeru laiuse ja lasta vendade veergude suurust selle ümber automaatselt muuta. Võite kasutada eelmääratletud ruudustiku klasse (nagu allpool näidatud), ruudustiku segusid või reasiseseid laiusi. Pange tähele, et teiste veergude suurust muudetakse olenemata keskmise veeru laiusest.
<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>
Muutuva laiusega sisu
Kasutage col-{breakpoint}-auto
klasse veergude suuruse määramiseks nende sisu loomuliku laiuse alusel.
<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>
Vastuvõtlikud klassid
Bootstrapi ruudustik sisaldab kuut eelmääratletud klassi taset keerukate reageerivate paigutuste loomiseks. Kohandage oma veergude suurust eriti väikestes, väikestes, keskmistes, suurtes või eriti suurtes seadmetes vastavalt oma äranägemisele.
Kõik murdepunktid
Võrkude puhul, mis on väikseimast seadmest suurimani ühesugused, kasutage klasse .col
ja . .col-*
Määrake nummerdatud klass, kui vajate eriti suurt veergu; muul juhul pidage julgelt kinni .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>
Horisontaalselt virnastatud
Kasutades ühte .col-sm-*
klasside komplekti, saate luua põhivõrgusüsteemi, mis algab virnastatuna ja muutub väikese murdepunkti ( sm
) juures horisontaalseks.
<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>
Sega ja sobita
Kas te ei soovi, et teie veerud lihtsalt virnastuksid mõnel ruudustikutasandil? Vajadusel kasutage iga astme jaoks erinevate klasside kombinatsiooni. Vaadake allolevat näidet, et paremini mõista, kuidas see kõik toimib.
<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>
Rea veerud
Kasutage kohanemisvõimelisi .row-cols-*
klasse, et määrata kiiresti veergude arv, mis teie sisu ja paigutuse kõige paremini renderdavad. Kui .col-*
tavaklassid kehtivad üksikutele veergudele (nt .col-md-4
), siis reaveergude klassid määratakse .row
otseteena vanemale. .row-cols-auto
Saate anda veergudele nende loomuliku laiuse .
Kasutage neid ridade veergude klasse põhiliste ruudustikupaigutuste kiireks loomiseks või kaardipaigutuste juhtimiseks.
<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>
Võite kasutada ka kaasasolevat Sassi segu 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);
}
}
Pesitsemine
Sisu pesastamiseks vaikeruudustikuga lisage olemasolevasse veergu uus veergude .row
komplekt . Pesastatud read peaksid sisaldama veergude komplekti, mille kogum on kuni 12 (ei ole nõutav, et kasutaksite kõiki 12 saadaolevat veergu)..col-sm-*
.col-sm-*
<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
Kui kasutate Bootstrapi Sassi lähtefaile, saate kohandatud, semantiliste ja reageerivate lehepaigutuste loomiseks kasutada Sassi muutujaid ja segusid. Meie eelmääratletud ruudustikuklassid kasutavad samu muutujaid ja segusid, et pakkuda kiirelt reageerivate paigutuste jaoks tervet komplekti kasutusvalmis klasse.
Muutujad
Muutujad ja kaardid määravad veergude arvu, renni laiuse ja meediumipäringu punkti, millest alustada veergude ujumist. Kasutame neid ülalkirjeldatud eelmääratletud ruudustikuklasside loomiseks, samuti allpool loetletud kohandatud segude jaoks.
$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
);
Segud
Miksiine kasutatakse koos ruudustiku muutujatega üksikute ruudustiku veergude jaoks semantilise CSS-i genereerimiseks.
// 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);
// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);
Kasutamise näide
Saate muuta muutujaid oma kohandatud väärtusteks või kasutada lihtsalt segusid nende vaikeväärtustega. Siin on näide vaikesätete kasutamisest kahe veeru paigutuse loomiseks, mille vahel on vahe.
.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>
Ruudustiku kohandamine
Kasutades meie sisseehitatud ruudustiku Sassi muutujaid ja kaarte, on võimalik eelmääratletud ruudustiku klasse täielikult kohandada. Muutke tasandite arvu, meediumipäringu mõõtmeid ja konteineri laiusi – seejärel kompileerige uuesti.
Sambad ja vihmaveerennid
Ruudustiku veergude arvu saab muuta Sassi muutujate kaudu. $grid-columns
kasutatakse iga üksiku veeru laiuste (protsentides) genereerimiseks, määrates samal ajal $grid-gutter-width
veeru rennide laiuse.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Võrgutasandid
Veergudest väljapoole liikudes saate kohandada ka ruudustiku tasandite arvu. Kui soovite ainult nelja ruudustiku taset, värskendaksite $grid-breakpoints
ja $container-max-widths
millekski selliseks:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Sassi muutujates või kaartides muudatuste tegemisel peate muudatused salvestama ja uuesti kompileerima. Seda tehes väljastatakse täiesti uus eelmääratletud ruudustiku klasside komplekt veergude laiuste, nihkete ja järjestuse jaoks. Kohandatud katkestuspunktide kasutamiseks värskendatakse ka reageerivaid nähtavuse utiliite. Veenduge, et määraksite ruudustiku väärtused px
(mitte rem
, em
, või %
).