Bootstrap Gitter Beispiller

Basis Gitter Layouten fir Iech vertraut ze maachen mam Bau am Bootstrap Gitter System.

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.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

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.

.col-md-4
.col-md-4
.col-md-4

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.

.col-md-3
.col-md-6
.col-md-3

Zwee Sailen

Kritt zwou Spalten unzefänken op Desktops a skaléiert op grouss Desktops .

.col-md-8
.col-md-4

Voll Breet, eenzeg Kolonn

Keng Gitterklassen sinn néideg fir voll Breet Elementer.


Zwee Säulen mat zwou 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 aneren 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.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Gemëscht: Handy an Desktop

De Bootstrap v4 Gittersystem huet fënnef Klassenklassen: xs (extra kleng), 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 Klassen Skala op, dat heescht, wann Dir plangt déi selwecht Breeten fir xs an sm ze setzen, Dir musst nëmmen xs uginn.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Gemëscht: Handy, Tablet, an Desktop

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4