Gitter System
Benotzt eist mächtegt mobil-éischt Flexbox Gitter fir Layouten vun alle Formen a Gréissten ze bauen dank engem zwielef Kolonnsystem, fënnef Standardreaktiounsfäegkeeten, Sass Variablen a Mixins, an Dosende vu virdefinéierte Klassen.
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 en detailléierte Bléck op wéi d'Gitter zesumme kënnt.
Nei oder net vertraut mat Flexbox? Liest dësen CSS Tricks Flexbox Guide fir Hannergrond, Terminologie, Richtlinnen a Code Snippets.
Dat uewe genannte Beispill erstellt dräi gläich-Breet Sailen op kleng, mëttel, grouss an extra grouss Apparater mat eise virdefinéierte Gitterklassen. Dës Kolonnen sinn op der Säit mat dem Elterendeel zentréiert .container
.
Ofbriechen et, hei ass wéi et funktionnéiert:
- Container bidden e Mëttel fir den Inhalt vun Ärem Site ze zentréieren an horizontal ze paddelen. Benotzt
.container
fir eng reaktiounsfäeger Pixel Breet oder.container-fluid
firwidth: 100%
iwwer all Viewport an Apparat Gréissten. - 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 d'Reihen mat negativen Margen entgéintgesat. Op dës Manéier ass all Inhalt an Äre Kolonnen visuell op der lénker Säit ausgeriicht. - An engem Gitter Layout muss Inhalt a Spalten plazéiert ginn an nëmme Kolonnen kënnen direkt Kanner vu Reihen sinn.
- Dank Flexbox, Gitterkolonnen ouni spezifizéierter
width
Layout automatesch als gläiche Breet Sailen. Zum Beispill, véier Instanzen vun.col-sm
wäert all automatesch 25% breet aus dem klenge breakpoint an erop. Kuckt d' Auto-Layout Kolonnen Sektioun fir méi Beispiller. - Kolonn Klassen uginn d'Zuel vun de Kolonnen Dir gären aus der méiglech ze benotzen 12 pro Zeil. Also, wann Dir dräi gläich-Breet Sailen iwwer wëllt, kënnt Dir benotzen
.col-4
. - Kolonn
width
s sinn a Prozentsaz gesat, sou datt se ëmmer flësseg a grouss sinn relativ zu hirem Elterendeel. - Kolonnen hunn horizontal
padding
d'Rennen tëscht eenzelne Sailen ze schafen, Ee, Dir kënnt demargin
vun Zeile ewechzehuelen anpadding
aus Saile mat.no-gutters
op der.row
. - Fir d'Gitter reaktiounsfäeger ze maachen, ginn et fënnef Gitterbriechpunkten, ee fir all reaktiounsfäeger Breakpunkt : all Breakpunkter (extra kleng), kleng, mëttel, grouss an extra grouss.
- Gitterbriechpunkte baséieren op Mindestbreet Medienufroen, dat heescht datt se op deen eenzegen Breakpunkt an all déi uewendriwwer gëllen (zB
.col-sm-4
gëlt fir kleng, mëttel, grouss an extra grouss Apparater, awer net den éischtexs
Breakpunkt). - Dir kënnt virdefinéiert Gitterklassen benotzen (wéi
.col-4
) oder Sass Mixins fir méi semantesch Markup.
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 .
Während Bootstrap em
s oder rem
s benotzt fir déi meescht Gréissten ze definéieren, px
gi s fir Gitterbriechpunkten a Containerbreet benotzt. Dëst ass well d'Viewport Breet a Pixel ass an net mat der Schrëftgréisst ännert .
Kuckt wéi Aspekter vum Bootstrap Gittersystem iwwer verschidde Geräter mat engem prakteschen Dësch funktionnéieren.
Extra kleng <576px |
Kleng ≥576px |
Mëttelméisseg ≥768px |
Grouss ≥992px |
Extra grouss ≥1200px |
|
---|---|---|---|---|---|
Max Container Breet | Keen (auto) | 540px | 720px | 9 60px | 1140px |
Klass Präfix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# vu Kolonnen | 12 | ||||
Gutter Breet | 30px (15px op all Säit vun enger Kolonn) | ||||
Nestable | Jo | ||||
Kolonn Uerdnung | Jo |
Benotzt breakpoint-spezifesch Kolonnklassen fir einfach Kolonngréisst ouni explizit nummeréiert Klass wéi .col-sm-6
.
Zum Beispill, hei sinn zwee Gitter Layouten déi op all Apparat an Viewport gëllen, vun xs
bis xl
. Füügt all Unzuel vun Eenheetsmanner Klassen fir all Breakpoint, deen Dir braucht, an all Kolonn wäert déiselwecht Breet sinn.
Gläich Breet Saile kënnen a verschidde Linnen opgedeelt ginn, awer et war e Safari Flexbox Käfer , deen dëst verhënnert huet ouni explizit flex-basis
oder border
. Et gi Léisunge fir eeler Browser Versiounen, awer si sollten net néideg sinn wann Dir aktuell sidd.
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.
Benotzt col-{breakpoint}-auto
Klassen fir Spalten ze gréisseren baséiert op der natierlecher Breet vun hirem Inhalt.
Erstellt gläich-Breet Spalten déi méi Reihen spanen andeems Dir e setzt .w-100
wou Dir wëllt datt d'Säulen op eng nei Linn briechen. Maacht d'Pausen reaktiounsfäeger andeems Dir se .w-100
mat e puer reaktiounsfäeger Display-Utilities vermëscht .
Bootstrap's Gitter enthält fënnef Stäck 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.
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
.
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
).
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.
Benotzt Flexbox Ausrichtung Utilities fir vertikal an horizontal Spalten ze alignéieren.
D'Rennen tëscht de Sailen an eise virdefinéierte Gitterklassen kënne mat ewechgeholl ginn .no-gutters
. Dëst läscht déi negativ margin
s aus .row
an der horizontal padding
aus all direkt Kanner Kolonnen.
Hei ass de Quellcode fir dës Stiler ze kreéieren. Bedenkt datt d'Kolonniwwerschreiden nëmmen op déi éischt Kannerkolonnen scoped sinn an iwwer Attributselektor gezielt sinn . Och wann dëst e méi spezifesche Selektor generéiert, kann d'Spaltpolsterung nach ëmmer weider personaliséiert ginn mat Abstands-Utilities .
Braucht Dir e Rand-zu-Rand Design? Drop den Elterendeel .container
oder .container-fluid
.
An der Praxis, hei ass wéi et ausgesäit. Notéiert Dir kënnt weider dëst mat all anere virdefinéierte Gitterklassen benotzen (inklusiv Kolonnbreeten, reaktiounsfäeger Niveauen, Neibestellungen a méi).
Wa méi wéi 12 Kolonnen an enger eenzeger Zeil plazéiert sinn, wäert all Grupp vun extra Kolonnen als eng Eenheet op eng nei Linn wéckelen.
Zënter 9 + 4 = 13> 12, gëtt dës 4-Kolonn-breet Div op eng nei Linn als eng kontinuéierlech Eenheet gewéckelt.
Saile weider laanscht déi nei Linn.
Spalten op eng nei Zeil an Flexbox briechen erfuerdert e klengen Hack: füügt en Element mat width: 100%
wou Dir Är Kolonnen op eng nei Linn wéckele wëllt. Normalerweis gëtt dëst mat multiple .row
s erreecht, awer net all Implementéierungsmethod kann dëst berechnen.
Dir kënnt dës Paus och bei spezifesche Breakpunkte mat eise reaktiounsfäeger Display-Utilities uwenden .
Benotzt .order-
Klassen fir d' visuell Uerdnung vun Ärem Inhalt ze kontrolléieren. Dës Klassen si reaktiounsfäeger, sou kënnt Dir den order
duerch Breakpoint astellen (zB. .order-1.order-md-2
). Ëmfaasst Ënnerstëtzung fir 1
duerch 12
iwwer all fënnef Gitterniveauen.
Et ginn och reaktiounsfäeger .order-first
a .order-last
Klassen déi order
vun engem Element änneren duerch Applikatioun order: -1
an order: 13
( order: $columns + 1
), respektiv. Dës Klassen kënnen och mat den nummeréierte .order-*
Klassen gemëscht ginn wéi néideg.
Dir kënnt Gitterkolonnen op zwou Weeër kompenséieren: eis reaktiounsfäeg .offset-
Gitterklassen an eis Margin Utilities . Gitterklassen si Gréisst fir Spalten ze passen, während Marge méi nëtzlech si fir séier Layouten wou d'Breet vum Offset variabel ass.
Beweegt Spalten no riets mat .offset-md-*
Klassen. Dës Klassen erhéijen de lénksen Rand vun enger Kolonn duerch *
Kolonnen. Zum Beispill, .offset-md-4
bewegt .col-md-4
iwwer véier Sailen.
Zousätzlech zu der Kolonnklärung bei reaktiounsfäeger Breakpunkten, musst Dir eventuell Offsets zrécksetzen. Kuckt dëst an Aktioun am Gitter Beispill .
Mat der Beweegung op Flexbox am v4, kënnt Dir Margin Utilities benotze wéi .mr-auto
Geschwësterkolonnen vuneneen fortzwéngen.
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).
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 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.
Mixins ginn a Verbindung mat de Gittervariablen benotzt fir semantesch CSS fir eenzel Gitterkolonnen ze generéieren.
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.
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.
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.
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:
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. Reaktiounsfäeg 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.