Kontenè

Ki jan yo travay

Kontenè yo se eleman layout ki pi fondamantal nan Bootstrap epi yo obligatwa lè w ap itilize sistèm griy default nou an . Kontenè yo itilize pou genyen, pad, ak (pafwa) sant kontni an nan yo. Pandan ke resipyan yo ka enbrike, pifò layouts pa mande pou yon veso anbrike.

Bootstrap vini ak twa resipyan diferan:

• .container, ki mete yon max-widthnan chak pwen rupture reponn
• .container-{breakpoint}, ki se width: 100%jiska pwen rupture espesifye a
• .container-fluid, ki se width: 100%nan tout breakpoints

Tablo ki anba a montre kouman chak veso yo max-widthkonpare ak orijinal la .containerak .container-fluidatravè chak pwen rupture.

Gade yo an aksyon epi konpare yo nan egzanp Grid nou an .

Default veso

Klas defo nou .containeran se yon veso ki reponn ak lajè fiks, sa vle di max-widthchanjman li yo nan chak pwen rupture.

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

Kontenè ki reponn

Kontenè ki reponn yo pèmèt ou presize yon klas ki se 100% lajè jiskaske pwen rupture espesifye a rive, apre sa nou aplike max-widthpou chak nan pwen rupture ki pi wo yo. Pa egzanp, .container-smse 100% lajè pou kòmanse jiskaske pwen smrupture a rive, kote li pral monte ak md, lg, xl, ak 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>

Resipyan likid

Itilize .container-fluidpou yon veso plen lajè, ki kouvri tout lajè fenèt la.

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

Sass

Jan yo montre pi wo a, Bootstrap jenere yon seri klas veso predefini pou ede ou bati layout ou vle yo. Ou ka pèsonalize klas veso sa yo predefini lè w modifye kat Sass la (ki jwenn nan _variables.scss) ki pouse yo:

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

Anplis de personnalisation Sass la, ou kapab tou kreye kontenè pwòp ou a ak mixin Sass nou an.

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

Pou plis enfòmasyon ak egzanp sou fason pou modifye kat ak varyab Sass nou yo, tanpri al gade nan seksyon Sass nan dokiman Grid la .