Gitter System
Benotzt eist mächtegt mobilt éischt Flexbox Gitter fir Layouten vun alle Formen a Gréissten ze bauen dank engem zwielef Kolonnsystem, sechs Standard reaktiounsfäeger Tierm, Sass Variablen a Mixins, an Dosende vu virdefinéierte Klassen.
Beispill
De Gittersystem vum Bootstrap benotzt eng Serie vu Container, Zeilen a Spalten fir Inhalt ze Layout an ausriichten. Et ass mat Flexbox gebaut an ass voll reaktiounsfäeger. Drënner ass e Beispill an eng detailléiert Erklärung fir wéi de Gittersystem zesumme kënnt.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Dat uewe genannte Beispill erstellt dräi gläich-Breet Kolonnen iwwer all Apparater a Viewports mat eise virdefinéierte Gitterklassen. Dës Kolonnen sinn op der Säit mat dem Elterendeel zentréiert .container
.
Wéi et funktionnéiert
Ofbriechen et, hei ass wéi de Gittersystem zesummegeet:
-
Eist Gitter ënnerstëtzt sechs reaktiounsfäeg Breakpunkter . Breakpoints baséieren op
min-width
Medienufroen, dat heescht datt se dee Breakpoint an all déi uewendriwwer beaflossen (zB.col-sm-4
gëlt firsm
,md
,lg
,xl
, anxxl
). Dëst bedeit datt Dir Container- a Kolonnengréisst a Verhalen duerch all Breakpunkt kontrolléiere kënnt. -
Container zentréieren an horizontal padden Ären Inhalt. Benotzt
.container
fir eng reaktiounsfäeger Pixel Breet,.container-fluid
firwidth: 100%
iwwer all viewports an Apparater, oder engem reaktiounsfäeger Behälter (zB,.container-md
) fir eng Kombinatioun vun Flëssegket a Pixel Breet. -
Reihen sinn Wrappers fir Sailen. All Kolonn huet horizontal
padding
(genannt Rennen) fir de Raum tëscht hinnen ze kontrolléieren. Dëstpadding
gëtt dann op de Reihen mat negativen Margen entgéintgesat fir sécherzestellen datt den Inhalt an Äre Kolonnen visuell op der lénker Säit ausgeriicht ass. Reihen ënnerstëtzen och Modifizéierungsklassen fir d'Kolonngréisst an d' Gutt-Klassen eenheetlech z'applizéieren fir d'Distanz vun Ärem Inhalt z'änneren. -
Kolonnen sinn onheemlech flexibel. Et gi 12 Schablounsäulen pro Zeil verfügbar, wat Iech erlaabt verschidde Kombinatioune vun Elementer ze kreéieren déi all Zuel vu Kolonnen spanen. Kolonneklassen weisen d'Zuel vun de Schablounsäulen un fir ze spanen (zB
col-4
Spann véier).width
s sinn an Prozentzuelen gesat sou datt Dir ëmmer déi selwecht relativ Gréisst hutt. -
Gutters sinn och reaktiounsfäeger a personaliséierbar. Gutter Klassen sinn iwwer all Breakpoints verfügbar, mat all deene selwechte Gréisste wéi eis Margin a Padding Abstand . Änneren horizontal gutters mat
.gx-*
Klassen, vertikal gutters mat.gy-*
, oder all gutters mat.g-*
Klassen..g-0
ass och verfügbar fir Rennen ze läschen. -
Sass Verännerlechen, Kaarten, a Mixins Muecht d'Gitter. Wann Dir net déi virdefinéiert Gitterklassen am Bootstrap benotze wëllt, kënnt Dir d'Quell Sass vun eisem Gitter benotze fir Ären eegene mat méi semantesche Markup ze kreéieren. Mir enthalen och e puer CSS personaliséiert Eegeschafte fir dës Sass Variablen ze konsuméieren fir nach méi Flexibilitéit fir Iech.
Sidd bewosst vun den Aschränkungen a Bugs ronderëm Flexbox , wéi d' Onméiglechkeet e puer HTML Elementer als Flex Container ze benotzen .
Gitter Optiounen
De Gittersystem vum Bootstrap kann sech iwwer all sechs Standard Breakpoints upassen, an all Breakpoints déi Dir personaliséiert. Déi sechs Default Grid Tiere sinn wéi follegt:
- Extra kleng (xs)
- Kleng (sm)
- Mëttelméisseg (md)
- Grouss (lg)
- Extra grouss (xl)
- Extra grouss (xxl)
Wéi uewen ernimmt, hunn all eenzel vun dësen breakpoints hiren eegene Container, eenzegaarteg Klass Präfix, an modifiers. Hei ass wéi d'Gitter iwwer dës Breakpunkte ännert:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
Containermax-width |
Keen (auto) | 540px | 720px | 9 60px | 1140px | 1320px |
Klass Präfix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# vu Kolonnen | 12 | |||||
Gutter Breet | 1,5 rem (.75 rem op lénks a riets) | |||||
Benotzerdefinéiert Rennen | Jo | |||||
Nestable | Jo | |||||
Kolonn Uerdnung | Jo |
Auto-Layout Kolonnen
Benotzt breakpoint-spezifesch Kolonnklassen fir einfach Kolonngréisst ouni explizit nummeréiert Klass wéi .col-sm-6
.
Gläich Breet
Zum Beispill, hei sinn zwee Gitter Layouten déi op all Apparat an Viewport gëllen, vun xs
bis xxl
. Füügt all Unzuel vun Eenheetsmanner Klassen fir all Breakpoint, deen Dir braucht, an all Kolonn wäert déiselwecht Breet sinn.
<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>
Astellung vun enger Kolonnbreet
Auto-Layout fir Flexbox Gitter Säulen heescht och datt Dir d'Breet vun enger Kolonn astelle kënnt an d'Geschwëster Kolonnen automatesch ëm d'Gréisst änneren. Dir kënnt virdefinéiert Gitterklassen benotzen (wéi hei ënnendrënner), Gittermixen oder Inline Breeten. Bedenkt datt déi aner Spalten d'Gréisst änneren egal wéi d'Breet vun der Mëttelkolonne.
<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>
Variabel Breet Inhalt
Benotzt col-{breakpoint}-auto
Klassen fir Spalten ze gréisseren baséiert op der natierlecher Breet vun hirem Inhalt.
<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>
Reaktiounsfäeger Klassen
Dem Bootstrap säi Gitter enthält sechs Niveaue vu virdefinéierte Klassen fir komplex reaktiounsfäeg Layouten ze bauen. Personnaliséiert d'Gréisst vun Äre Sailen op extra kleng, kleng, mëttel, grouss oder extra grouss Apparater wéi Dir et passt.
All Breakpoints
Fir Gitter déi d'selwecht sinn aus dem klengste vun Apparater bis zum gréissten, benotzt d' .col
a .col-*
Klassen. Gitt eng nummeréiert Klass un wann Dir eng speziell grouss Kolonn braucht; soss, fillen gratis ze halen .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>
Op horizontal gestapelt
Mat engem eenzege Set vu .col-sm-*
Klassen kënnt Dir e Basisrastersystem erstellen deen gestapelt ufänkt a gëtt horizontal um klenge Breakpunkt ( 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 a Match
Wëllt Dir net datt Är Spalten einfach an e puer Gitterstufen stackelen? Benotzt eng Kombinatioun vu verschiddene Klassen fir all Tier wéi néideg. Kuckt d'Beispill hei ënnen fir eng besser Iddi wéi et alles funktionnéiert.
<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>
Rei Kolonnen
Benotzt déi reaktiounsfäeger .row-cols-*
Klassen fir séier d'Zuel vun de Spalten ze setzen déi Ären Inhalt an de Layout am Beschten maachen. Wärend normal .col-*
Klassen op déi eenzel Kolonnen gëllen (zB, .col-md-4
), sinn d'Zeilkolonnen Klassen op den Elterendeel .row
als Standard fir enthale Kolonnen gesat. Mat .row-cols-auto
Dir kënnt de Sailen hir natierlech Breet ginn.
Benotzt dës Zeilkolonnen Klassen fir séier Basis Gitter Layouten ze kreéieren oder Är Kaarte Layouten ze kontrolléieren an iwwerdribblen wann néideg um Kolonnniveau.
<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>
Dir kënnt och de Begleet Sass Mixin benotzen, 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
Fir Ären Inhalt mat dem Standardgitter ze nestéieren, füügt eng nei .row
a Set vu .col-sm-*
Spalten an enger existéierender .col-sm-*
Kolonn. Nested Zeile sollen eng Rei vu Kolonnen enthalen déi bis zu 12 oder manner addéieren (et ass net erfuerderlech datt Dir all 12 verfügbare Kolonnen benotzt).
<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
Wann Dir Bootstrap Quell Sass Dateien benotzt, hutt Dir d'Méiglechkeet Sass Variablen a Mixins ze benotzen fir personaliséiert, semantesch a reaktiounsfäeg Säit Layouten ze kreéieren. Eis virdefinéiert Gitterklassen benotzen déiselwecht Variabelen a Mixins fir eng ganz Suite vu prett-ze-benotzen Klassen fir séier reaktiounsfäeg Layouten ze bidden.
Variablen
Variablen a Kaarten bestëmmen d'Zuel vun de Sailen, d'Grennebreet, an de Medienufropunkt, op deem schwiewende Spalten ufänken. Mir benotzen dës fir déi virdefinéiert Gitterklassen ze generéieren déi hei uewen dokumentéiert sinn, souwéi fir déi personaliséiert Mixins hei ënnendrënner.
$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 ginn a Verbindung mat de Gittervariablen benotzt fir semantesch CSS fir eenzel Gitterkolonnen ze generéieren.
// 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);
Beispill Benotzung
Dir kënnt d'Variabelen op Är eege personaliséiert Wäerter änneren, oder just d'Mixins mat hiren Standardwäerter benotzen. Hei ass e Beispill fir d'Standardastellungen ze benotzen fir en zwee-Kolonn Layout mat engem Spalt tëscht.
.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>
Personaliséierung vum Gitter
Mat eisem agebaute Raster Sass Variablen a Kaarten, ass et méiglech déi virdefinéiert Gitterklassen komplett ze personaliséieren. Ännert d'Zuel vun den Niveauen, d'Medien Ufro Dimensiounen, an d'Container Breet - dann nei kompiléieren.
Sailen a Rennen
D'Zuel vun de Gitterkolonnen kann iwwer Sass Variablen geännert ginn. $grid-columns
gëtt benotzt fir d'Breeten (a Prozent) vun all eenzel Kolonn ze generéieren, während $grid-gutter-width
d'Breet fir d'Kolonnrennen setzt.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Gitter Stäck
Beweegt iwwer d'Kolonn selwer, kënnt Dir och d'Zuel vun de Gitterstufen personaliséieren. Wann Dir just véier Gittertiere wëllt, da géift Dir den $grid-breakpoints
an $container-max-widths
op sou eppes aktualiséieren:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Wann Dir Ännerungen un de Sass Variablen oder Kaarten maacht, musst Dir Är Ännerungen späicheren an nei kompiléieren. Maachen dëst wäert e fuschneie Set vu virdefinéierte Gitterklassen fir Kolonnbreeten, Offsets a Bestellung erausginn. Responsabel Visibilitéit Utilities ginn och aktualiséiert fir déi personaliséiert Breakpoints ze benotzen. Gitt sécher datt Dir Gitterwäerter an px
(net rem
, em
, oder %
) setzt.