Bootstrap Gitter Beispiller
Basis Gitter Layouten fir Iech vertraut ze maachen mam Bau am Bootstrap Gitter System.
An dëse Beispiller .themed-grid-col
gëtt d'Klass an d'Kolonn bäigefüügt fir e puer Themen ze addéieren. Dëst ass net eng Klass déi am Bootstrap als Standard verfügbar ass.
Fënnef Gitterniveauen
Et gi fënnef Niveauen zum Bootstrap Gitter System, eng fir all Gamme vun Apparater déi mir ënnerstëtzen. All Tier fänkt mat enger minimaler Viewportgréisst un an gëlt automatesch op déi gréisser Apparater, ausser iwwerschratt.
Dräi gläiche Kolonnen
Kritt dräi gläich-Breet Kolonnen ugefaange bei Desktops a Skaléieren op grouss Desktops . Op mobilen Apparater, Pëllen an drënner ginn d'Säulen automatesch gestapelt.
Dräi gläiche Kolonnen Alternativ
Andeems Dir d' .row-cols-*
Klassen benotzt, kënnt Dir einfach e Gitter mat gläiche Kolonnen erstellen.
.col
Kand vun
.row-cols-md-3
.col
Kand vun
.row-cols-md-3
.col
Kand vun
.row-cols-md-3
Dräi ongläiche Sailen
Kritt dräi Spalten unzefänken op Desktops a Skaléieren op grouss Desktops vu verschiddene Breet. Denkt drun, Gitter Säulen solle bis zu zwielef fir een eenzegen horizontalen Block addéieren. Méi wéi dat, a Kolonnen fänken un ze stackelen egal wéi de Viewport.
Zwee Sailen
Kritt zwou Spalten unzefänken op Desktops a skaléiert op grouss Desktops .
Voll Breet, eenzeg Kolonn
Keng Gitterklassen sinn néideg fir voll Breet Elementer.
Zwee Säulen mat zwee nestéierte Säulen
No der Dokumentatioun ass Nesting einfach - setzt just eng Zeil vu Kolonnen an enger existéierender Kolonn. Dëst gëtt Iech zwou Spalten , déi op Desktops ufänken an op grouss Desktops skaléieren , mat weideren zwee (gläiche Breeten) an der méi grousser Kolonn.
Bei mobilen Apparatgréissten, Pëllen an ënnen, stacken dës Kolonnen an hir nestéiert Kolonnen.
Gemëscht: Handy an Desktop
De Bootstrap v4 Gittersystem huet fënnef Klassenklassen: xs (extra kleng, dës Klassinfix gëtt net benotzt), sm (kleng), md (mëttel), lg (grouss), an xl (extra grouss). Dir kënnt bal all Kombinatioun vun dëse Klassen benotzen fir méi dynamesch a flexibel Layouten ze kreéieren.
All Niveau vun de Klassen skaléiert erop, dat heescht wann Dir plangt déiselwecht Breeten fir md, lg an xl ze setzen, musst Dir nëmmen md spezifizéieren.
Gemëscht: Handy, Tablet, an Desktop
Gutters
Mat .gx-*
Klassen kënnen déi horizontal Rennen ugepasst ginn.
.col
mat
.gx-4
Rennen
.col
mat
.gx-4
Rennen
.col
mat
.gx-4
Rennen
.col
mat
.gx-4
Rennen
.col
mat
.gx-4
Rennen
.col
mat
.gx-4
Rennen
Benotzt d' .gy-*
Klassen fir déi vertikal Rennen ze kontrolléieren.
.col
mat
.gy-4
Rennen
.col
mat
.gy-4
Rennen
.col
mat
.gy-4
Rennen
.col
mat
.gy-4
Rennen
.col
mat
.gy-4
Rennen
.col
mat
.gy-4
Rennen
Mat .g-*
Klassen kënnen d'Rennen a béid Richtungen ugepasst ginn.
.col
mat
.g-3
Rennen
.col
mat
.g-3
Rennen
.col
mat
.g-3
Rennen
.col
mat
.g-3
Rennen
.col
mat
.g-3
Rennen
.col
mat
.g-3
Rennen
Container
Zousätzlech Klassen, déi am Bootstrap v4.4 bäigefüügt ginn, erlaben Container déi 100% breet sinn bis e bestëmmte Breakpunkt. v5 füügt en neien xxl
Breakpunkt un.