Dæmi um ræsikerfi

Grunnnetsskipulag til að kynnast byggingu innan Bootstrap ristkerfisins.

Í þessum dæmum er .themed-grid-colbekknum bætt við dálkana til að bæta við einhverju þema. Þetta er ekki flokkur sem er fáanlegur í Bootstrap sjálfgefið.

Fimm grid tiers

Það eru fimm stig í Bootstrap grid kerfinu, eitt fyrir hvert úrval tækja sem við styðjum. Hvert lag byrjar á lágmarksstærð útsýnisgáttar og á sjálfkrafa við um stærri tækin nema þeim sé hnekkt.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Þrír jafnir dálkar

Fáðu þrjá jafnbreiða dálka sem byrja á skjáborðum og skalast yfir í stóra skjáborð . Í farsímum, spjaldtölvum og neðan munu dálkarnir sjálfkrafa stafla.

.col-md-4

Þrír jafnir dálkar valkostur

Með því að nota .row-cols-*flokkana geturðu auðveldlega búið til rist með jöfnum dálkum.

.colbarn af .row-cols-md-3

Þrír ójafnir dálkar

Fáðu þrjá dálka sem byrja á skjáborðum og stækka í stóra skjáborð af mismunandi breiddum. Mundu að ristardálkar ættu að vera allt að tólf fyrir einn láréttan blokk. Meira en það, og dálkar byrja að staflast, sama hvaða útsýnisgátt er.

.col-md-3

.col-md-6

.col-md-3

Tveir dálkar

Fáðu tvo dálka sem byrja á skjáborðum og skala yfir í stóra skjáborð .

.col-md-8

.col-md-4

Full breidd, einn dálkur

Engir töfluflokkar eru nauðsynlegir fyrir þætti í fullri breidd.

Tveir dálkar með tveimur hreiðri dálkum

Samkvæmt skjölunum er hreiður auðvelt - settu bara röð af dálkum í núverandi dálk. Þetta gefur þér tvo dálka sem byrja á skjáborðum og stækka í stóra skjáborð , með öðrum tveimur (jöfnum breiddum) innan stærri dálksins.

Í farsímastærðum, spjaldtölvum og niður, munu þessir dálkar og hreiðraðir dálkar þeirra stafla.

.col-md-8

.col-md-6

.col-md-4

Blandað: farsíma og borðtölvu

Bootstrap v5 grid kerfið hefur sex flokka af flokkum: xs (extra lítill, þessi flokka innsetning er ekki notuð), sm (small), md (miðlungs), lg (stór), xl (x-large) og xxl (xx) -stór). Þú getur notað næstum hvaða samsetningu sem er af þessum flokkum til að búa til kraftmeiri og sveigjanlegri skipulag.

Hver flokkaflokkur stækkar, sem þýðir að ef þú ætlar að setja sömu breidd fyrir md, lg, xl og xxl þarftu aðeins að tilgreina md.

.col-md-8

.col-6 .col-md-4

.col-6

Blandað: farsími, spjaldtölva og skjáborð

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Rennur

Með .gx-*flokkum er hægt að stilla láréttu þakrennurnar.

.colmeð .gx-4þakrennum

Notaðu .gy-*flokkana til að stjórna lóðréttu þakrennunum.

.colmeð .gy-4þakrennum

Með .g-*flokkum er hægt að stilla þakrennurnar í báðar áttir.

.colmeð .g-3þakrennum

Gámar

Viðbótarflokkar sem bætt er við í Bootstrap v4.4 leyfa gáma sem eru 100% breiðir fram að tilteknu broti. v5 bætir við nýjum xxlbrotpunkti.

.ílát

.gámur-sm

.gámur-md

.gámur-lg

.gámur-xl

.ílát-xxl

.ílát-vökvi