Cynwysyddion
Mae cynwysyddion yn floc adeiladu sylfaenol o Bootstrap sy'n cynnwys, pad, ac alinio'ch cynnwys o fewn dyfais neu borthladd penodol.
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 gosodmax-width
ym mhob torbwynt ymatebol.container-fluid
, syddwidth: 100%
o gwbl yn dorbwyntiau.container-{breakpoint}
, sefwidth: 100%
tan y torbwynt penodedig
Mae'r tabl isod yn dangos sut mae pob cynhwysydd yn max-width
cymharu â'r gwreiddiol .container
ac .container-fluid
ar draws pob torbwynt.
Eu gweld ar waith a'u cymharu yn ein hesiampl Grid .
Bach ychwanegol <576px |
Bach ≥576px |
Canolig ≥768px |
Mawr ≥992px |
X-Mawr ≥1200px |
XX-Mawr ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Cynhwysydd diofyn
Mae ein .container
dosbarth rhagosodedig yn gynhwysydd ymatebol, lled sefydlog, sy'n golygu ei max-width
newidiadau 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-width
s ar gyfer pob un o'r torbwyntiau uwch. Er enghraifft, .container-sm
yn 100% o led i ddechrau nes sm
cyrraedd 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-fluid
ar 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 .