Source

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.

Un o dair colofn

<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 .containerar gyfer lled picsel ymatebol neu ar .container-fluidgyfer width: 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 hyn paddingwedyn 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 widthyn gosod yn awtomatig fel colofnau lled cyfartal. Er enghraifft, .col-smbydd 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 widthyn cael eu gosod mewn canrannau, felly maen nhw bob amser yn hylif ac o faint o gymharu â'u rhiant elfen.
Mae gan golofnau llorweddol paddingi greu'r cwteri rhwng colofnau unigol, fodd bynnag, gallwch chi dynnu'r margino'r rhesi ac paddingo'r colofnau .no-guttersgyda'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-4yn berthnasol i ddyfeisiau bach, canolig, mawr a mawr ychwanegol, ond nid y xstorbwynt 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 ems neu rems ar gyfer diffinio'r rhan fwyaf o feintiau, pxdefnyddir 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 xsi xl. Ychwanegwch unrhyw nifer o ddosbarthiadau heb uned ar gyfer pob torbwynt sydd ei angen arnoch a bydd pob colofn yr un lled.

1 o 2

2 o 2

1 o 3

2 o 3

3 o 3

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

Gellir rhannu colofnau lled cyfartal yn sawl llinell, ond roedd nam Safari flexbox a rwystrodd hyn rhag gweithio heb flex-basisneu border. Mae yna atebion ar gyfer fersiynau hŷn o borwyr, ond ni ddylent fod yn angenrheidiol os ydych chi'n gyfredol.

Colofn

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</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.

1 o 3

2 o 3 (ehangach)

3 o 3

1 o 3

2 o 3 (ehangach)

3 o 3

<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}-autodosbarthiadau i faint colofnau yn seiliedig ar led naturiol eu cynnwys.

1 o 3

Cynnwys lled amrywiol

3 o 3

1 o 3

Cynnwys lled amrywiol

3 o 3

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

Aml-res o led cyfartal

Creu colofnau lled cyfartal sy'n rhychwantu rhesi lluosog trwy fewnosod .w-100lle rydych chi am i'r colofnau dorri i linell newydd. Gwnewch y seibiannau yn ymatebol trwy gymysgu'r .w-100gyda rhai cyfleustodau arddangos ymatebol .

col

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

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 .cola .col-*dosbarthiadau. Nodwch ddosbarth â rhif pan fydd angen colofn o faint arbennig; fel arall, mae croeso i chi gadw at .col.

col

col-8

col- 4

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

Wedi'i bentyrru i lorweddol

Gan ddefnyddio un set o .col-sm-*ddosbarthiadau, gallwch greu system grid sylfaenol sy'n cychwyn wedi'i stacio cyn dod yn llorweddol gyda'r torbwynt bach ( sm).

col-sm-8

col-sm-4

col-sm

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

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.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

Aliniad

Defnyddiwch gyfleustodau aliniad flexbox i alinio colofnau yn fertigol ac yn llorweddol.

Aliniad fertigol

Un o dair colofn

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

Un o dair colofn

<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

Un o ddwy golofn

<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 margins o'r holl golofnau plant uniongyrchol .rowa'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 .containerneu .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).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .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.

.col-9

.col-4
Ers 9 + 4 = 13 > 12, mae'r div 4 colofn hwn yn cael ei lapio ar linell newydd fel un uned gyffiniol.

.col-6 Mae
colofnau dilynol yn parhau ar hyd y llinell newydd.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 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>

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 .rows, ond ni all pob dull gweithredu roi cyfrif am hyn.

.col-6 .col-sm-3

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

Gallwch hefyd gymhwyso'r toriad hwn ar dorbwyntiau penodol gyda'n cyfleustodau arddangos ymatebol .

.col-6 .col-sm-4

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

Aildrefnu

Archebu dosbarthiadau

Defnyddiwch .order-ddosbarthiadau i reoli trefn weledol eich cynnwys. Mae'r dosbarthiadau hyn yn ymatebol, felly gallwch chi osod y ordertorbwynt (ee, .order-1.order-md-2). Yn cynnwys cefnogaeth ar gyfer 1drwodd 12ar draws pob un o'r pum haen grid.

Yn gyntaf, ond yn ddi-drefn

Yn ail, ond yn olaf

Yn drydydd, ond yn gyntaf

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Mae yna hefyd ddosbarthiadau ymatebol .order-firsta .order-lastdosbarthiadau sy'n newid orderelfen trwy gymhwyso order: -1a 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.

Yn gyntaf, ond yn olaf

Yn ail, ond yn ddi-drefn

Yn drydydd, ond yn gyntaf

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but 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-4yn symud .col-md-4dros bedair colofn.

.col-md-4

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

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

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

Yn ogystal â chlirio colofnau ar dorbwyntiau ymatebol, efallai y bydd angen i chi ailosod gwrthbwyso. Gweler hyn ar waith yn yr enghraifft grid .

.col-sm-5 .col-md-6

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

.col-sm-6 .col-md-5 .col-lg-6

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

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

Cyfleustodau ymyl

Gyda'r symudiad i flexbox yn v4, gallwch ddefnyddio cyfleustodau ymyl fel .mr-autoi orfodi colofnau brodyr a chwiorydd i ffwrdd oddi wrth ei gilydd.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

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

Nythu

I nythu'ch cynnwys gyda'r grid rhagosodedig, ychwanegwch set newydd .rowo .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).

Lefel 1: .col-sm-9

Lefel 2: .col-8 .col-sm-6

Lefel 2: .col-4 .col-sm-6

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

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 {
  width: 800px;
  @include make-container();
}

.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);
  }
}

Prif gynnwys

Cynnwys eilaidd

<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-columnsyn cael ei ddefnyddio i gynhyrchu lled (yn y cant) pob colofn unigol tra'n $grid-gutter-widthcaniatáu lled torbwynt-benodol sy'n cael ei rannu'n gyfartal ar draws padding-leftac ar padding-rightgyfer y cwteri colofn.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Haenau grid

Gan symud y tu hwnt i'r colofnau eu hunain, gallwch hefyd addasu nifer yr haenau grid. Pe baech chi eisiau dim ond pedair haen grid, byddech chi'n diweddaru'r $grid-breakpointsac $container-max-widthsi 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 %).