Bootstrap Gitter Beispiller

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

An dëse Beispiller .themed-grid-colgë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.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-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

Dräi gläiche Kolonnen Alternativ

Andeems Dir d' .row-cols-*Klassen benotzt, kënnt Dir einfach e Gitter mat gläiche Kolonnen erstellen.

.colKand 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.

.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-4

Gemëscht: Handy an Desktop

De Bootstrap v5 Gittersystem huet sechs Klassenklassen: xs (extra kleng, dës Klassinfix gëtt net benotzt), sm (kleng), md (mëttel), lg (grouss), xl (x-grouss), an xxl (xx) - 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, xl an xxl ze setzen, musst Dir nëmmen md spezifizéieren.

.col-md-8

.col-6 .col-md-4

.col-6

Gemëscht: Handy, Tablet, an Desktop

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Gutters

Mat .gx-*Klassen kënnen déi horizontal Rennen ugepasst ginn.

.colmat .gx-4Rennen

Benotzt d' .gy-*Klassen fir déi vertikal Rennen ze kontrolléieren.

.colmat .gy-4Rennen

Mat .g-*Klassen kënnen d'Rennen a béid Richtungen ugepasst ginn.

.colmat .g-3Rennen

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 xxlBreakpunkt un.

.Container

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.Container-Flëssegkeet