Cynwysyddion

Sut maen nhw'n gweithio

Cynhwysyddion yw'r elfen gosodiad mwyaf sylfaenol yn Bootstrap ac mae eu hangen wrth ddefnyddio ein system grid rhagosodedig . Defnyddir cynwysyddion i gynnwys, padio, ac (weithiau) canoli'r cynnwys sydd ynddynt. Er y gellir nythu cynwysyddion, nid oes angen cynhwysydd nythu ar y rhan fwyaf o gynlluniau.

Daw Bootstrap gyda thri chynhwysydd gwahanol:

• .container, sy'n gosod max-widthym mhob torbwynt ymatebol
• .container-{breakpoint}, sef width: 100%tan y torbwynt penodedig
• .container-fluid, sydd width: 100%o gwbl yn dorbwyntiau

Mae'r tabl isod yn dangos sut mae pob cynhwysydd yn max-widthcymharu â'r gwreiddiol .containerac .container-fluidar draws pob torbwynt.

Eu gweld ar waith a'u cymharu yn ein hesiampl Grid .

Cynhwysydd diofyn

Mae ein .containerdosbarth rhagosodedig yn gynhwysydd ymatebol, lled sefydlog, sy'n golygu ei max-widthnewidiadau ym mhob torbwynt.

<div class="container">
  <!-- Content here -->
</div>

Cynwysyddion ymatebol

Mae cynwysyddion ymatebol yn caniatáu ichi nodi dosbarth sy'n 100% o led nes cyrraedd y torbwynt penodedig, ac ar ôl hynny byddwn yn gwneud cais max-widths ar gyfer pob un o'r torbwyntiau uwch. Er enghraifft, .container-smyn 100% o led i ddechrau nes smcyrraedd y torbwynt, lle bydd yn cynyddu gyda md, lg, xl, a xxl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Cynwysyddion hylif

Defnyddiwch .container-fluidar gyfer cynhwysydd lled llawn, sy'n rhychwantu lled cyfan yr olygfan.

<div class="container-fluid">
  ...
</div>

Sass

Fel y dangosir uchod, mae Bootstrap yn cynhyrchu cyfres o ddosbarthiadau cynhwysydd wedi'u diffinio ymlaen llaw i'ch helpu chi i adeiladu'r cynlluniau rydych chi eu heisiau. Gallwch chi addasu'r dosbarthiadau cynwysyddion rhagddiffiniedig hyn trwy addasu'r map Sass (a geir yn _variables.scss) sy'n eu pweru:

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

Yn ogystal ag addasu'r Sass, gallwch hefyd greu eich cynwysyddion eich hun gyda'n Sass mixin.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

Am ragor o wybodaeth ac enghreifftiau ar sut i addasu ein mapiau SAss a'n newidynnau, cyfeiriwch at yr adran Sass yn y ddogfennaeth Grid .