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

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.

<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-100lle 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-basisneu 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}-autodosbarthiadau 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 .cola .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 .rowa'r cyfleustodau padin cyfatebol ar yr .cols. Efallai y bydd angen addasu'r rhiant .containerneu'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 .colpadin gyda .px-lg-5, gwrthweithio hynny ag .mx-lg-n5ar y rhiant .rowac yna addasu'r .containerpapur 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 .rowfel 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-heightfel 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 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).

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

<div class="container">
  <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>
</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.

<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 ordertorbwynt (ee, .order-1.order-md-2). Yn cynnwys cefnogaeth ar gyfer 1drwodd 12ar 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-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.

<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-4yn symud .col-md-4dros 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-autoi 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 .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).

<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

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.

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

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

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width sets the width for the column gutters.

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

Grid tiers

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-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 %).