System grid

Enghraifft

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 esboniad manwl o sut mae'r system grid yn dod at ei gilydd.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Mae'r enghraifft uchod yn creu tair colofn lled cyfartal ar draws pob dyfais a phorth gwylio gan ddefnyddio ein dosbarthiadau grid rhagnodedig. Mae'r colofnau hynny wedi'u canoli yn y dudalen gyda'r rhiant .container.

Sut mae'n gweithio

O'i ddadansoddi, dyma sut mae'r system grid yn dod at ei gilydd:

• Mae ein grid yn cefnogi chwe torbwynt ymatebol . Mae torbwyntiau yn seiliedig ar min-widthymholiadau gan y cyfryngau, sy'n golygu eu bod yn effeithio ar y torbwynt hwnnw a phawb sydd uwch ei ben (ee, .col-sm-4yn berthnasol i sm, md, lg, xl, a xxl). Mae hyn yn golygu y gallwch reoli maint cynhwysydd a cholofn ac ymddygiad erbyn pob torbwynt.

• Mae cynwysyddion yn canoli ac yn padlo'ch cynnwys yn llorweddol. Defnyddiwch .containerar gyfer lled picsel ymatebol, ar .container-fluidgyfer width: 100%pob maes gwylio a dyfais, neu gynhwysydd ymatebol (ee, .container-md) ar gyfer cyfuniad o hylif a lled picsel.

• Mae rhesi yn ddeunydd lapio ar gyfer colofnau. Mae gan bob colofn lorweddol padding(a elwir yn gwter) ar gyfer rheoli'r gofod rhyngddynt. Yna caiff hyn paddingei wrthweithio ar y rhesi gydag ymylon negyddol i sicrhau bod y cynnwys yn eich colofnau wedi'i alinio'n weledol i lawr yr ochr chwith. Mae rhesi hefyd yn cefnogi dosbarthiadau addasu i gymhwyso maint colofnau a dosbarthiadau gwter yn unffurf i newid bylchau eich cynnwys.

• Mae colofnau'n anhygoel o hyblyg. Mae yna 12 colofn templed ar gael fesul rhes, sy'n eich galluogi i greu gwahanol gyfuniadau o elfennau sy'n rhychwantu unrhyw nifer o golofnau. Mae dosbarthiadau colofn yn nodi nifer y colofnau templed i'w rhychwantu (ee, col-4rhychwantu pedwar). widths yn cael eu gosod mewn canrannau fel bod gennych bob amser yr un maint cymharol.

• Mae cwteri hefyd yn ymatebol ac yn addasadwy. Mae dosbarthiadau gwteri ar gael ar draws pob torbwynt, gyda phob un o'r un maint â'n bylchiad ymyl a phadin . Newidiwch gwteri llorweddol gyda .gx-*dosbarthiadau, cwteri fertigol gyda .gy-*, neu bob cwter gyda .g-*dosbarthiadau. .g-0ar gael hefyd i gael gwared ar gwteri.

• Mae newidynnau Sass, mapiau a chymysgeddau yn pweru'r grid. Os nad ydych am ddefnyddio'r dosbarthiadau grid rhagddiffiniedig yn Bootstrap, gallwch ddefnyddio ffynhonnell ein grid Sass i greu un eich hun gyda mwy o farcio semantig. Rydym hefyd yn cynnwys rhai eiddo arfer CSS i ddefnyddio'r newidynnau Sass hyn i gael hyd yn oed mwy o hyblygrwydd i chi.

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

Gall system grid Bootstrap addasu ar draws pob un o'r chwe torbwynt rhagosodedig, ac unrhyw dorbwyntiau rydych chi'n eu haddasu. Mae'r chwe haen grid ddiofyn fel a ganlyn:

• Bach ychwanegol (xs)
• Bach (sm)
• Canolig (md)
• Mawr (lg)
• Mawr iawn (xl)
• Mawr ychwanegol (xxl)

Fel y nodwyd uchod, mae gan bob un o'r torbwyntiau hyn eu cynhwysydd eu hunain, rhagddodiad dosbarth unigryw, ac addaswyr. Dyma sut mae'r grid yn newid ar draws y torbwyntiau hyn:

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

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

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. Gyda .row-cols-autogallwch chi roi eu lled naturiol i'r colofnau.

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-auto">
    <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);
  }
}

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-3">
      Level 1: .col-sm-3
    </div>
    <div class="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

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: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@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-columnsyn cael ei ddefnyddio i gynhyrchu lled (yn y cant) pob colofn unigol tra'n $grid-gutter-widthgosod y lled ar gyfer y cwteri colofn.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !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-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 %).