Enghreifftiau grid Bootstrap
Cynlluniau grid sylfaenol i'ch gwneud yn gyfarwydd ag adeiladu o fewn system grid Bootstrap.
Yn yr enghreifftiau hyn .themed-grid-col
ychwanegir 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.
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.
Tair colofn cyfartal amgen
Trwy ddefnyddio'r .row-cols-*
dosbarthiadau, gallwch chi greu grid gyda cholofnau cyfartal yn hawdd.
.col
plentyn o
.row-cols-md-3
.col
plentyn o
.row-cols-md-3
.col
plentyn 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.
Dwy golofn
Cael dwy golofn yn dechrau ar benbyrddau ac yn graddio i benbyrddau mawr .
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.
Cymysg: symudol a bwrdd gwaith
Mae gan system grid Bootstrap v4 bum haen o ddosbarthiadau: xs (bach ychwanegol, ni ddefnyddir y mewndodiad dosbarth hwn), 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 md, lg a xl, dim ond md sydd angen i chi ei nodi.
Cymysg: symudol, tabled, a bwrdd gwaith
Gwteri
Gyda .gx-*
dosbarthiadau, gellir addasu'r cwteri llorweddol.
.col
gyda
.gx-4
gwteri
.col
gyda
.gx-4
gwteri
.col
gyda
.gx-4
gwteri
.col
gyda
.gx-4
gwteri
.col
gyda
.gx-4
gwteri
.col
gyda
.gx-4
gwteri
Defnyddiwch y .gy-*
dosbarthiadau i reoli'r cwteri fertigol.
.col
gyda
.gy-4
gwteri
.col
gyda
.gy-4
gwteri
.col
gyda
.gy-4
gwteri
.col
gyda
.gy-4
gwteri
.col
gyda
.gy-4
gwteri
.col
gyda
.gy-4
gwteri
Gyda .g-*
dosbarthiadau, gellir addasu'r cwteri i'r ddau gyfeiriad.
.col
gyda
.g-3
gwteri
.col
gyda
.g-3
gwteri
.col
gyda
.g-3
gwteri
.col
gyda
.g-3
gwteri
.col
gyda
.g-3
gwteri
.col
gyda
.g-3
gwteri
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
.