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

Tair colofn gyfartal

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

.col-md-4
.col-md-4
.col-md-4

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

Cymysg: symudol a bwrdd gwaith

Mae gan system grid Bootstrap v4 bum haen o ddosbarthiadau: xs (bach ychwanegol), sm (bach), md (canolig), lg (mawr), a xl (mawr ychwanegol). 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 xs a sm, dim ond xs sydd angen i chi ei nodi.

.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

Cymysg: symudol, tabled, a bwrdd gwaith

.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