System grid
Defnyddiwch ein grid flexbox symudol-gyntaf pwerus i adeiladu cynlluniau o bob lliw a llun diolch i system deuddeg colofn, pum haen ymatebol ddiofyn, newidynnau a chymysgeddau Sass, a dwsinau o ddosbarthiadau wedi'u diffinio ymlaen llaw.
Sut mae'n gweithio
Mae system grid Bootstrap yn defnyddio cyfres o gynwysyddion, rhesi a cholofnau i osod ac alinio cynnwys. Mae wedi'i adeiladu gyda flexbox ac mae'n gwbl ymatebol. Isod mae enghraifft ac edrychiad manwl ar sut mae'r grid yn dod at ei gilydd.
Newydd i neu anghyfarwydd ag flexbox? Darllenwch y canllaw blwch fflecs CSS Tricks hwn ar gyfer cefndir, terminoleg, canllawiau a phytiau cod.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Mae'r enghraifft uchod yn creu tair colofn lled cyfartal ar ddyfeisiadau bach, canolig, mawr a mawr ychwanegol gan ddefnyddio ein dosbarthiadau grid rhagnodedig. Mae'r colofnau hynny wedi'u canoli yn y dudalen gyda'r rhiant .container
.
O'i ddadansoddi, dyma sut mae'n gweithio:
- Mae cynwysyddion yn fodd i ganoli a phadio'n llorweddol cynnwys eich gwefan. Defnyddiwch
.container
ar gyfer lled picsel ymatebol neu ar.container-fluid
gyferwidth: 100%
pob maint golygfan a dyfais. - Mae rhesi yn ddeunydd lapio ar gyfer colofnau. Mae gan bob colofn lorweddol
padding
(a elwir yn gwter) ar gyfer rheoli'r gofod rhyngddynt. Mae hynpadding
wedyn yn cael ei wrthweithio ar y rhesi gydag ymylon negyddol. Fel hyn, mae'r holl gynnwys yn eich colofnau wedi'i alinio'n weledol i lawr yr ochr chwith. - Mewn cynllun grid, rhaid gosod cynnwys o fewn colofnau a dim ond colofnau all fod yn blant rhesi uniongyrchol.
- Diolch i flexbox, bydd colofnau grid heb benodedig
width
yn gosod yn awtomatig fel colofnau lled cyfartal. Er enghraifft,.col-sm
bydd pedwar achos o bob un yn awtomatig 25% o led o'r torbwynt bach ac i fyny. Gweler yr adran colofnau cynllun auto am ragor o enghreifftiau. - Mae dosbarthiadau colofn yn nodi nifer y colofnau yr hoffech eu defnyddio allan o'r 12 posibl fesul rhes. Felly, os ydych chi eisiau tair colofn lled cyfartal ar draws, gallwch chi ddefnyddio
.col-4
. - Mae colofnau
width
yn cael eu gosod mewn canrannau, felly maen nhw bob amser yn hylif ac o faint o gymharu â'u rhiant elfen. - Mae gan golofnau llorweddol
padding
i greu'r cwteri rhwng colofnau unigol, fodd bynnag, gallwch chi dynnu'rmargin
o'r rhesi acpadding
o'r colofnau.no-gutters
gyda'r.row
. - Er mwyn gwneud y grid yn ymatebol, mae yna bum torbwynt grid, un ar gyfer pob torbwynt ymatebol : pob torbwynt (bach ychwanegol), bach, canolig, mawr, a mawr iawn.
- Mae torbwyntiau grid yn seiliedig ar ymholiadau cyfryngau lled lleiaf, sy'n golygu eu bod yn berthnasol i'r un torbwynt hwnnw a phawb sydd uwch ei ben (ee,
.col-sm-4
yn berthnasol i ddyfeisiau bach, canolig, mawr a mawr ychwanegol, ond nid yxs
torbwynt cyntaf). - Gallwch ddefnyddio dosbarthiadau grid wedi'u diffinio ymlaen llaw (fel
.col-4
) neu Sass mixins ar gyfer marcio mwy semantig.
Byddwch yn ymwybodol o'r cyfyngiadau a'r bygiau o amgylch flexbox , fel yr anallu i ddefnyddio rhai elfennau HTML fel cynwysyddion hyblyg .
Opsiynau grid
Er bod Bootstrap yn defnyddio em
s neu rem
s ar gyfer diffinio'r rhan fwyaf o feintiau, px
defnyddir s ar gyfer torbwyntiau grid a lled cynwysyddion. Mae hyn oherwydd bod lled y porth gwylio mewn picseli ac nid yw'n newid gyda maint y ffont .
Gweld sut mae agweddau ar system grid Bootstrap yn gweithio ar draws dyfeisiau lluosog gyda thabl defnyddiol.
Bach ychwanegol <576px |
Bach ≥576px |
Canolig ≥768px |
Mawr ≥992px |
≥1200px mawr ychwanegol |
|
---|---|---|---|---|---|
Lled cynhwysydd mwyaf | Dim (auto) | 540px | 720px | 960px | 1140px |
Rhagddodiad dosbarth | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# o golofnau | 12 | ||||
Lled gwter | 30px (15px ar bob ochr i golofn) | ||||
Nestable | Oes | ||||
Trefnu colofn | Oes |
Colofnau gosodiad awtomatig
Defnyddiwch ddosbarthiadau colofn torbwynt-benodol ar gyfer maint colofnau hawdd heb ddosbarth â rhif penodol fel .col-sm-6
.
Cyd-led
Er enghraifft, dyma ddau gynllun grid sy'n berthnasol i bob dyfais a phorth gwylio, o xs
i xl
. Ychwanegwch unrhyw nifer o ddosbarthiadau heb uned ar gyfer pob torbwynt sydd ei angen arnoch a bydd pob colofn yr un lled.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Aml-linell lled cyfartal
Creu colofnau lled cyfartal sy'n rhychwantu llinellau lluosog trwy fewnosod .w-100
lle rydych chi am i'r colofnau dorri i linell newydd. Gwnewch yr egwyliau'n ymatebol trwy gymysgu .w-100
â rhai cyfleustodau arddangos ymatebol .
Roedd nam Safari flexbox a oedd yn atal hyn rhag gweithio heb flex-basis
neu border
. Mae yna atebion ar gyfer fersiynau hŷn o borwyr, ond ni ddylent fod yn angenrheidiol os nad yw'ch porwyr targed yn perthyn i'r fersiynau bygi.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
Gosod lled un golofn
Mae gosodiad awtomatig ar gyfer colofnau grid flexbox hefyd yn golygu y gallwch chi osod lled un golofn a chael y colofnau brodyr a chwiorydd yn newid maint yn awtomatig o'i chwmpas. Gallwch ddefnyddio dosbarthiadau grid wedi'u diffinio ymlaen llaw (fel y dangosir isod), cymysgeddau grid, neu led mewnol. Sylwch y bydd y colofnau eraill yn newid maint waeth beth fo lled colofn y ganolfan.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Cynnwys lled amrywiol
Defnyddio col-{breakpoint}-auto
dosbarthiadau i faint colofnau yn seiliedig ar led naturiol eu cynnwys.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Dosbarthiadau ymatebol
Mae grid Bootstrap yn cynnwys pum haen o ddosbarthiadau wedi'u diffinio ymlaen llaw ar gyfer adeiladu cynlluniau ymatebol cymhleth. Addaswch faint eich colofnau ar ddyfeisiadau bach, bach, canolig, mawr neu fawr ychwanegol sut bynnag y gwelwch yn dda.
Pob torbwynt
Ar gyfer gridiau sydd yr un peth o'r dyfeisiau lleiaf i'r mwyaf, defnyddiwch y .col
a .col-*
dosbarthiadau. Nodwch ddosbarth â rhif pan fydd angen colofn o faint arbennig; fel arall, mae croeso i chi gadw at .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Wedi'i bentyrru i lorweddol
Gan ddefnyddio un set o .col-sm-*
ddosbarthiadau, gallwch greu system grid sylfaenol sy'n cychwyn wedi'i stacio ac yn dod yn llorweddol yn y torbwynt bach ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Cymysgu a chyfateb
Ddim eisiau i'ch colofnau stacio mewn rhai haenau grid yn unig? Defnyddiwch gyfuniad o ddosbarthiadau gwahanol ar gyfer pob haen yn ôl yr angen. Gweler yr enghraifft isod am well syniad o sut mae'r cyfan yn gweithio.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Gwteri
Gellir addasu cwteri yn ymatebol trwy badin torbwynt-benodol a dosbarthiadau defnydd ymyl negyddol. I newid y cwteri mewn rhes benodol, paru cyfleustodau ymyl negyddol ar y .row
a'r cyfleustodau padin cyfatebol ar yr .col
s. Efallai y bydd angen addasu'r rhiant .container
neu'r rhiant hefyd i osgoi gorlifiad diangen, gan ddefnyddio cyfleustodau padin cyfatebol eto..container-fluid
Dyma enghraifft o addasu'r grid Bootstrap ar y torbwynt mawr ( lg
) ac uwch. Rydym wedi cynyddu'r .col
padin gyda .px-lg-5
, gwrthweithio hynny ag .mx-lg-n5
ar y rhiant .row
ac yna addasu'r .container
papur lapio gyda .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
Colofnau rhes
Defnyddiwch y dosbarthiadau ymatebol .row-cols-*
i osod yn gyflym nifer y colofnau sy'n gwneud eich cynnwys a'ch cynllun orau. Tra bod .col-*
dosbarthiadau arferol yn berthnasol i'r colofnau unigol (ee, .col-md-4
), mae'r dosbarthiadau colofnau rhes yn cael eu gosod ar y rhiant .row
fel llwybr byr.
Defnyddiwch y dosbarthiadau colofnau rhes hyn i greu cynlluniau grid sylfaenol yn gyflym neu i reoli cynlluniau eich cerdyn.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Gallwch hefyd ddefnyddio'r Sass mixin sy'n cyd-fynd, row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Aliniad
Defnyddiwch gyfleustodau aliniad flexbox i alinio colofnau yn fertigol ac yn llorweddol. Nid yw Internet Explorer 10-11 yn cefnogi aliniad fertigol eitemau fflecs pan fo gan y cynhwysydd fflecs un min-height
fel y dangosir isod. Gweler Flexbugs #3 am ragor o fanylion.
Aliniad fertigol
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Aliniad llorweddol
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Dim cwteri
Gellir cael gwared ar y cwteri rhwng colofnau yn ein dosbarthiadau grid rhagosodol gyda .no-gutters
. Mae hyn yn tynnu'r negatif margin
s o'r holl golofnau plant uniongyrchol .row
a'r llorweddol ohonynt.padding
Dyma'r cod ffynhonnell ar gyfer creu'r arddulliau hyn. Sylwch fod gwrthwneud colofnau yn cael eu cwmpasu i'r colofnau plant cyntaf yn unig a'u bod yn cael eu targedu trwy ddewiswr priodoleddau . Er bod hyn yn cynhyrchu dewisydd mwy penodol, gellir dal i addasu padin colofn ymhellach gyda chyfleustodau bylchu .
Angen dyluniad ymyl-i-ymyl? Gollwng y rhiant .container
neu .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Yn ymarferol, dyma sut mae'n edrych. Sylwch y gallwch chi barhau i ddefnyddio hwn gyda phob dosbarth grid wedi'i ddiffinio ymlaen llaw (gan gynnwys lled colofnau, haenau ymatebol, ail-archebion, a mwy).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Lapio colofn
Os gosodir mwy na 12 colofn o fewn un rhes, bydd pob grŵp o golofnau ychwanegol, fel un uned, yn lapio ar linell newydd.
Ers 9 + 4 = 13 > 12, mae'r div 4 colofn hwn yn cael ei lapio ar linell newydd fel un uned gyffiniol.
colofnau dilynol yn parhau ar hyd y llinell newydd.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
Colofn yn torri
Mae angen darn bach o dorri colofnau i linell newydd yn flexbox: ychwanegwch elfen gyda width: 100%
lle bynnag yr hoffech lapio'ch colofnau i linell newydd. Fel arfer gwneir hyn gyda sawl .row
s, ond ni all pob dull gweithredu roi cyfrif am hyn.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
Gallwch hefyd gymhwyso'r toriad hwn ar dorbwyntiau penodol gyda'n cyfleustodau arddangos ymatebol .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Aildrefnu
Archebu dosbarthiadau
Defnyddiwch .order-
ddosbarthiadau i reoli trefn weledol eich cynnwys. Mae'r dosbarthiadau hyn yn ymatebol, felly gallwch chi osod y order
torbwynt (ee, .order-1.order-md-2
). Yn cynnwys cefnogaeth ar gyfer 1
drwodd 12
ar draws pob un o'r pum haen grid.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Mae yna hefyd ddosbarthiadau ymatebol .order-first
a .order-last
dosbarthiadau sy'n newid order
elfen trwy gymhwyso order: -1
a order: 13
( order: $columns + 1
), yn y drefn honno. Gellir cymysgu'r dosbarthiadau hyn hefyd â'r .order-*
dosbarthiadau wedi'u rhifo yn ôl yr angen.
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Colofnau gwrthbwyso
Gallwch wrthbwyso colofnau grid mewn dwy ffordd: ein .offset-
dosbarthiadau grid ymatebol a'n cyfleustodau ymyl . Mae dosbarthiadau grid yn cael eu maint i gyd-fynd â cholofnau tra bod ymylon yn fwy defnyddiol ar gyfer cynlluniau cyflym lle mae lled y gwrthbwyso yn amrywio.
Dosbarthiadau gwrthbwyso
Symudwch y colofnau i'r dde gan ddefnyddio .offset-md-*
dosbarthiadau. Mae'r dosbarthiadau hyn yn cynyddu ymyl chwith colofn fesul *
colofn. Er enghraifft, .offset-md-4
yn symud .col-md-4
dros bedair colofn.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
Yn ogystal â chlirio colofnau ar dorbwyntiau ymatebol, efallai y bydd angen i chi ailosod gwrthbwyso. Gweler hyn ar waith yn yr enghraifft grid .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
Cyfleustodau ymyl
Gyda'r symudiad i flexbox yn v4, gallwch ddefnyddio cyfleustodau ymyl fel .mr-auto
i orfodi colofnau brodyr a chwiorydd i ffwrdd oddi wrth ei gilydd.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Nythu
I nythu'ch cynnwys gyda'r grid rhagosodedig, ychwanegwch set newydd .row
o .col-sm-*
golofnau o fewn .col-sm-*
colofn sy'n bodoli eisoes. Dylai rhesi nythu gynnwys set o golofnau sy'n adio i 12 neu lai (nid yw'n ofynnol i chi ddefnyddio pob un o'r 12 colofn sydd ar gael).
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Sass cymysgeddau
Wrth ddefnyddio ffeiliau Sass ffynhonnell Bootstrap, mae gennych yr opsiwn o ddefnyddio newidynnau a chymysgeddau Sass i greu cynlluniau tudalennau pwrpasol, semantig ac ymatebol. Mae ein dosbarthiadau grid wedi'u diffinio ymlaen llaw yn defnyddio'r un newidynnau a chymysgeddau hyn i ddarparu cyfres gyfan o ddosbarthiadau parod i'w defnyddio ar gyfer cynlluniau ymatebol cyflym.
Newidynnau
Mae newidynnau a mapiau yn pennu nifer y colofnau, lled y gwter, a'r pwynt ymholiad cyfryngau i ddechrau colofnau arnofio. Rydym yn defnyddio'r rhain i gynhyrchu'r dosbarthiadau grid rhagddiffiniedig a ddogfennwyd uchod, yn ogystal ag ar gyfer y cymysgeddau arfer a restrir isod.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
cymysgeddau
Defnyddir cymysgeddau ar y cyd â'r newidynnau grid i gynhyrchu CSS semantig ar gyfer colofnau grid unigol.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Defnydd enghreifftiol
Gallwch chi addasu'r newidynnau i'ch gwerthoedd arfer eich hun, neu ddefnyddio'r cymysgeddau gyda'u gwerthoedd diofyn. Dyma enghraifft o ddefnyddio'r gosodiadau diofyn i greu cynllun dwy golofn gyda bwlch rhyngddynt.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Addasu'r grid
Gan ddefnyddio ein newidynnau grid Sass a'n mapiau adeiledig, mae'n bosibl addasu'r dosbarthiadau grid a ddiffiniwyd ymlaen llaw yn llwyr. Newidiwch nifer yr haenau, dimensiynau ymholiad y cyfryngau, a lled y cynhwysydd - yna ail-grynhoi.
Colofnau a gwteri
Gellir addasu nifer y colofnau grid trwy newidynnau Sass. $grid-columns
yn cael ei ddefnyddio i gynhyrchu lled (yn y cant) pob colofn unigol tra'n $grid-gutter-width
gosod y lled ar gyfer y cwteri colofn.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Haenau grid
Gan symud y tu hwnt i'r colofnau eu hunain, efallai y byddwch hefyd yn addasu nifer yr haenau grid. Pe baech chi eisiau dim ond pedair haen grid, byddech chi'n diweddaru'r $grid-breakpoints
ac $container-max-widths
i rywbeth fel hyn:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Wrth wneud unrhyw newidiadau i newidynnau neu fapiau Sass, bydd angen i chi gadw'ch newidiadau a'u hail-grynhoi. Bydd gwneud hynny yn cynhyrchu set newydd sbon o ddosbarthiadau grid wedi'u diffinio ymlaen llaw ar gyfer lled colofnau, gwrthbwyso ac archebu. Bydd cyfleustodau gwelededd ymatebol hefyd yn cael eu diweddaru i ddefnyddio'r torbwyntiau arferol. Gwnewch yn siŵr eich bod yn gosod gwerthoedd grid yn px
(nid rem
, em
, neu %
).