Dæmi um ræsikerfi

Grunnnetsskipulag til að kynnast byggingu innan Bootstrap ristkerfisins.

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

Þ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
.col-md-4
.col-md-4

Þ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-6
.col-md-4

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

Bootstrap v4 grid kerfið hefur fimm flokka flokka: xs (extra lítill), sm (lítill), md (miðlungs), lg (stór) og xl (extra 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 xs og sm, þarftu aðeins að tilgreina xs.

.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

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

.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