Enghreifftiau grid Bootstrap

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

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 3 bedair haen o ddosbarthiadau: xs (ffonau), sm (tabledi), md (bwrdd gwaith), a lg (bwrdd gwaith mwy). 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-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Cymysg: symudol, tabled, a bwrdd gwaith

.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Clirio colofnau

Clirio fflotiau ar dorbwyntiau penodol i atal lapio lletchwith gyda chynnwys anwastad.

.col-xs-6 .col-sm-3
Newid maint eich man gwylio neu edrych arno ar eich ffôn am enghraifft.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Gwrthbwyso, gwthio a thynnu ailosodiadau

Ailosod gwrthbwyso, gwthio, a thynnu ar dorbwyntiau penodol.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0