Bootstrap Gitter Beispiller

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

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 3 Gittersystem huet véier Klassenklassen: xs (Telefonen), sm (Tabletten), md (Desktops), an lg (méi grouss Desktops). 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-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Gemëscht: Handy, Tablet, an Desktop

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

Kolonn läschen

Kloer Schwämm bei spezifesche Breakpunkte fir schweier Verpackung mat ongläichen Inhalt ze vermeiden.

.col-xs-6 .col-sm-3
Änneren d'Gréisst vun Ärem Viewport oder kuckt et op Ärem Telefon fir e Beispill.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push, and pull resets

Reset Offsets, dréckt an zitt op spezifesch Breakpoints.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0