Enghreifftiau grid Bootstrap

Cynlluniau grid sylfaenol i'ch gwneud yn gyfarwydd ag adeiladu o fewn system grid Bootstrap.

Yn yr enghreifftiau hyn .themed-grid-colychwanegir y dosbarth at y colofnau i ychwanegu rhai themâu. Nid yw hwn yn ddosbarth sydd ar gael yn Bootstrap yn ddiofyn.

Pum haen grid

Mae pum haen i system grid Bootstrap, un ar gyfer pob ystod o ddyfeisiau rydym yn eu cefnogi. Mae pob haen yn dechrau ar isafswm maint porth gwylio ac yn berthnasol yn awtomatig i'r dyfeisiau mwy oni bai eu bod yn cael eu diystyru.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Tair colofn gyfartal

Sicrhewch dair colofn o led cyfartal yn dechrau ar benbyrddau ac yn graddio i benbyrddau mawr . Ar ddyfeisiau symudol, tabledi ac isod, bydd y colofnau'n pentyrru'n awtomatig.

.col-md-4

Tair colofn cyfartal amgen

Trwy ddefnyddio'r .row-cols-*dosbarthiadau, gallwch chi greu grid gyda cholofnau cyfartal yn hawdd.

.colplentyn o .row-cols-md-3

Tair colofn anghyfartal

Sicrhewch fod tair colofn yn dechrau ar benbyrddau ac yn graddio i benbyrddau mawr o wahanol led. Cofiwch, dylai colofnau grid adio hyd at ddeuddeg ar gyfer un bloc llorweddol. Yn fwy na hynny, ac mae colofnau'n dechrau pentyrru waeth beth fo'r olygfan.

.col-md-3

.col-md-6

.col-md-3

Dwy golofn

Cael dwy golofn yn dechrau ar benbyrddau ac yn graddio i benbyrddau mawr .

.col-md-8

.col-md-4

Lled llawn, colofn sengl

Nid oes angen dosbarthiadau grid ar gyfer elfennau lled llawn.

Dwy golofn gyda dwy golofn nythog

Yn unol â'r ddogfennaeth, mae nythu'n hawdd - rhowch res o golofnau o fewn colofn sy'n bodoli eisoes. Mae hyn yn rhoi dwy golofn i chi yn dechrau ar benbyrddau ac yn graddio i benbyrddau mawr , gyda dwy arall (lled cyfartal) o fewn y golofn fwy.

Ar feintiau dyfeisiau symudol, tabledi ac i lawr, bydd y colofnau hyn a'u colofnau nythu yn pentyrru.

.col-md-8

.col-md-6

.col-md-4

Cymysg: symudol a bwrdd gwaith

Mae gan system grid Bootstrap v5 chwe haen o ddosbarthiadau: xs (bach ychwanegol, ni ddefnyddir y mewndodiad dosbarth hwn), sm (bach), md (canolig), lg (mawr), xl (x-mawr), a xxl (xx -mawr). Gallwch ddefnyddio bron unrhyw gyfuniad o'r dosbarthiadau hyn i greu cynlluniau mwy deinamig a hyblyg.

Mae pob haen o ddosbarthiadau yn cynyddu, sy'n golygu os ydych chi'n bwriadu gosod yr un lled ar gyfer md, lg, xl a xxl, dim ond md sydd angen i chi ei nodi.

.col-md-8

.col-6 .col-md-4

.col-6

Cymysg: symudol, tabled, a bwrdd gwaith

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Gwteri

Gyda .gx-*dosbarthiadau, gellir addasu'r cwteri llorweddol.

.colgyda .gx-4gwteri

Defnyddiwch y .gy-*dosbarthiadau i reoli'r cwteri fertigol.

.colgyda .gy-4gwteri

Gyda .g-*dosbarthiadau, gellir addasu'r cwteri i'r ddau gyfeiriad.

.colgyda .g-3gwteri

Cynwysyddion

Mae dosbarthiadau ychwanegol a ychwanegwyd yn Bootstrap v4.4 yn caniatáu cynwysyddion sydd 100% o led tan dorbwynt penodol. v5 yn ychwanegu torbwynt newydd xxl.

.cynhwysydd

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-hylif