Grid systeem
Brûk ús krêftige mobyl-earste flexbox-raster om yndielingen fan alle foarmen en maten te bouwen mei tank oan in tolve kolomsysteem, seis standert responsive tiers, Sass-fariabelen en mixins, en tsientallen foarôf definieare klassen.
Foarbyld
It rastersysteem fan Bootstrap brûkt in searje konteners, rigen en kolommen om ynhâld yn te setten en út te rjochtsjen. It is boud mei flexbox en is folslein responsyf. Hjirûnder is in foarbyld en in yngeande útlis foar hoe't it rastersysteem byinoar komt.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
It boppesteande foarbyld makket trije kolommen mei deselde breedte oer alle apparaten en viewports mei ús foarôf definieare rasterklassen. Dy kolommen binne sintraal yn 'e side mei de âlder .container
.
Hoe't it wurket
It ôfbrekke, hjir is hoe't it rastersysteem byinoar komt:
-
Us raster stipet seis responsive brekpunten . Brekpunten binne basearre op
min-width
mediafragen, wat betsjut dat se ynfloed hawwe op dat brekpunt en al dy dêrboppe (bgl..col-sm-4
jildt foarsm
,md
,lg
,xl
, enxxl
). Dit betsjut dat jo kontener- en kolomgrutte en gedrach kinne kontrolearje troch elk brekpunt. -
Containers sintraal en folje jo ynhâld horizontaal. Brûk
.container
foar in responsive pixel breedte,.container-fluid
foarwidth: 100%
oer alle viewports en apparaten, of in responsive container (bygelyks,.container-md
) foar in kombinaasje fan floeibere en pixel widths. -
Rigen binne wrappers foar kolommen. Elke kolom hat horizontaal
padding
(neamd in gutter) foar it kontrolearjen fan de romte tusken har. Ditpadding
wurdt dan tsjinwurke op 'e rigen mei negative marzjes om te soargjen dat de ynhâld yn jo kolommen visueel oan'e linkerkant is ôfstimd. Rien stypje ek modifierklassen om kolomgrutte en rôfklassen unifoarm oan te passen om de ôfstân fan jo ynhâld te feroarjen. -
Kolommen binne ongelooflijk fleksibel. D'r binne 12 sjabloankolommen beskikber per rige, wêrtroch jo ferskate kombinaasjes fan eleminten kinne oanmeitsje dy't elk oantal kolommen oerspant. Column klassen jouwe it oantal sjabloan kolommen te span (bygelyks,
col-4
oerspant fjouwer).width
s wurde ynsteld yn persintaazjes sadat jo altyd hawwe deselde relative sizing. -
Gutters binne ek responsyf en oanpasber. Gutter-klassen binne beskikber oer alle brekpunten, mei allegear deselde grutte as ús marzje en padding-ôfstân . Feroarje horizontale gutters mei
.gx-*
klassen, fertikale gutters mei.gy-*
, of alle gutters mei.g-*
klassen..g-0
is ek beskikber om goaten te ferwiderjen. -
Sass fariabelen, kaarten, en mixins macht it roaster. As jo de foarôf definieare rasterklassen yn Bootstrap net wolle brûke, kinne jo de boarne Sass fan ús raster brûke om jo eigen te meitsjen mei mear semantyske markup. Wy befetsje ek wat oanpaste CSS-eigenskippen om dizze Sass-fariabelen te konsumearjen foar noch gruttere fleksibiliteit foar jo.
Wês bewust fan de beheiningen en bugs om flexbox hinne , lykas it ûnfermogen om guon HTML-eleminten as flexcontainers te brûken .
Grid opsjes
It rastersysteem fan Bootstrap kin oanpasse oer alle seis standert brekpunten, en alle brekpunten dy't jo oanpasse. De seis standert grid tiers binne as folgjend:
- Ekstra lyts (xs)
- Lyts (sm)
- Medium (md)
- grut (lg)
- Ekstra grut (xl)
- Ekstra ekstra grut (xxl)
Lykas hjirboppe opmurken, hat elk fan dizze brekpunten har eigen kontener, unyk klassefoarheaksel en modifiers. Hjir is hoe't it raster feroaret oer dizze brekpunten:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
Kontenermax-width |
Gjin (auto) | 540px | 720px | 960px | 1140 px | 1320 px |
Klasse foarheaksel | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# fan kolommen | 12 | |||||
Gootbreedte | 1.5rem (.75rem links en rjochts) | |||||
Oanpaste goaten | Ja | |||||
Nestable | Ja | |||||
Kolombestelling | Ja |
Auto-opmaak kolommen
Brûk breakpoint-spesifike kolomklassen foar maklike kolomgrutte sûnder in eksplisite nûmere klasse lykas .col-sm-6
.
Gelikense breedte
Hjir binne bygelyks twa rasteryndielingen dy't jilde foar elk apparaat en viewport, fan xs
oant xxl
. Foegje elk oantal klassen sûnder ienheid ta foar elk brekpunt dat jo nedich binne en elke kolom sil deselde breedte wêze.
<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>
It ynstellen fan ien kolom breedte
Auto-yndieling foar flexbox-rasterkolommen betsjut ek dat jo de breedte fan ien kolom kinne ynstelle en de siblingskolommen automatysk feroarje om de grutte. Jo kinne foarôf definieare rasterklassen brûke (lykas hjirûnder werjûn), rastermixins, of ynline breedtes. Tink derom dat de oare kolommen de grutte sille feroarje, nettsjinsteande de breedte fan 'e middenkolom.
<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>
Ynhâld fan fariabele breedte
Brûk col-{breakpoint}-auto
klassen foar grutte kolommen basearre op de natuerlike breedte fan har ynhâld.
<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>
Responsive klassen
It raster fan Bootstrap omfettet seis lagen fan foarôf definieare klassen foar it bouwen fan komplekse responsive yndielingen. Pas de grutte fan jo kolommen oan op ekstra lyts, lyts, medium, grut of ekstra grutte apparaten lykas jo goed fine.
Alle brekpunten
Foar rasters dy't itselde binne fan 'e lytste apparaten oant de grutste, brûk de .col
en .col-*
klassen. Spesifisearje in nûmere klasse as jo nedich hawwe in bysûnder grutte kolom; oars, fiel frij om fêsthâlde oan .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>
Steapele nei horizontaal
Mei help fan in inkele set fan .col-sm-*
klassen, kinne jo meitsje in basis raster systeem dat begjint út steapele en wurdt horizontaal op de lytse breakpoint ( 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>
Mix en match
Wolle jo net dat jo kolommen gewoan steapele wurde yn guon rastertiers? Brûk in kombinaasje fan ferskate klassen foar elke tier as nedich. Sjoch it foarbyld hjirûnder foar in better idee fan hoe't it allegear wurket.
<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>
Rige kolommen
Brûk de responsive .row-cols-*
klassen om fluch it oantal kolommen yn te stellen dat jo ynhâld en yndieling it bêste werjaan. Wylst normale .col-*
klassen jilde foar de yndividuele kolommen (bygelyks, .col-md-4
), wurde de rige kolommen klassen ynsteld op 'e âlder .row
as in fluchtoets. Mei .row-cols-auto
kinne jo de kolommen har natuerlike breedte jaan.
Brûk dizze klassen foar rige kolommen om fluch basisrasteropmaak te meitsjen of jo kaartopmaak te kontrolearjen.
<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>
Jo kinne ek de byhearrende Sass-mixin brûke 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);
}
}
Nesting
Om jo ynhâld mei it standertraster te nesteljen, foegje in nije .row
en set .col-sm-*
kolommen ta binnen in besteande .col-sm-*
kolom. Neste rigen moatte in set fan kolommen befetsje dy't 12 of minder optelle (it is net fereaske dat jo alle 12 beskikbere kolommen brûke).
<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
By it brûken fan Bootstrap's boarne Sass-bestannen, hawwe jo de opsje om Sass-fariabelen en mixins te brûken om oanpaste, semantyske en responsive side-layouts te meitsjen. Us foarôf definieare rasterklassen brûke deselde fariabelen en mixins om in heule suite fan klear te brûken klassen te leverjen foar rappe responsive yndielingen.
Fariabelen
Fariabelen en kaarten bepale it oantal kolommen, de gootbreedte en it mediafraachpunt wêrop driuwende kolommen begjinne moatte. Wy brûke dizze om de foarôf definieare rasterklassen te generearjen dy't hjirboppe dokuminteare binne, lykas foar de oanpaste mixins hjirûnder.
$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
Mixins wurde brûkt yn kombinaasje mei de rasterfariabelen om semantyske CSS te generearjen foar yndividuele rasterkolommen.
// 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);
Foarbyld fan gebrûk
Jo kinne de fariabelen oanpasse oan jo eigen oanpaste wearden, of gewoan de mixins brûke mei har standertwearden. Hjir is in foarbyld fan it brûken fan de standertynstellingen om in opmaak mei twa kolommen te meitsjen mei in gat tusken.
.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>
It raster oanpasse
Mei ús ynboude raster Sass fariabelen en kaarten, is it mooglik om de foarôf definieare rasterklassen folslein oan te passen. Feroarje it oantal lagen, de dimensjes fan 'e mediafraach, en de kontenerbreedte - kompilearje dan opnij.
Kolommen en goaten
It oantal rasterkolommen kin wizige wurde fia Sass fariabelen. $grid-columns
wurdt brûkt om te generearjen de widths (yn prosint) fan elke yndividuele kolom wylst $grid-gutter-width
stelt de breedte foar de kolom gutters.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Grid tiers
Troch fierder te gean as de kolommen sels, kinne jo ek it oantal rasterlagen oanpasse. As jo mar fjouwer rasterlagen woene, soene jo de $grid-breakpoints
en bywurkje $container-max-widths
nei soksawat:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
By it meitsjen fan wizigingen oan 'e Sass-fariabelen of kaarten, moatte jo jo wizigingen bewarje en opnij kompilearje. Troch dit te dwaan sil in gloednije set fan foarôf definieare rasterklassen útfiere foar kolombreedten, offsets en oardering. Responsive sichtberens sil ek bywurke wurde om de oanpaste brekpunten te brûken. Soargje derfoar dat jo rasterwearden ynstelle yn px
(net rem
, em
, of %
).