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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <!-- 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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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-row-columns:  6;

$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

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-row-columns is used to set the maximum number of columns of .row-cols-*, any number over this limit is ignored.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

Grid tiers

Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the $grid-breakpoints and $container-max-widths to something like this:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand-new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in px (not rem, em, or %).