Ontziak

Nola funtzionatzen duten

Edukiontziak Bootstrap-en diseinu-elementurik oinarrizkoena dira eta beharrezkoak dira gure sareta sistema lehenetsia erabiltzean . Edukiontziek edukia edukitzeko, betetzeko eta (batzuetan) zentratzeko erabiltzen dira. Edukiontziak habiaratu daitezkeen arren , diseinu gehienek ez dute habiaratutako edukiontzirik behar.

Bootstrap-ek hiru edukiontzi desberdin ditu:

• .containermax-width, etenaldi-puntu erantzuteko bakoitzean a ezartzen duena
• .container-fluid, hau da width: 100%, eten puntu guztietan
• .container-{breakpoint}, hau da width: 100%, zehaztutako eten puntura arte

Beheko taulak edukiontzi bakoitza max-widthjatorrizkoarekin .containereta .container-fluideten puntu bakoitzean nola alderatzen den erakusten du.

Ikus itzazu ekintzan eta konparatu gure Grid adibidean .

Edukiontzi lehenetsia

Gure klase lehenetsia .containerzabalera finkoko edukiontzi sentikorra da, hau da, max-widtheten puntu bakoitzean aldaketak egiten ditu.

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

Erantzun duten edukiontziak

Erantzuteko edukiontziek % 100 zabaleko klase bat zehaztea ahalbidetzen dute zehaztutako eten-puntura iritsi arte, eta ondoren max-widths-ak aplikatzen ditugu eten-puntu altuagoetako bakoitzean. Adibidez, .container-sm% 100eko zabalera du eten puntura iritsi arte hasteko , non , , , eta smrekin eskalatuko den .mdlgxlxxl

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

Fluido-ontziak

Erabili .container-fluidzabalera osoko edukiontzi baterako, ikuspegiaren zabalera osoan zehar.

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

Sass

Goian erakusten den bezala, Bootstrap-ek aurrez definitutako edukiontzi-klase batzuk sortzen ditu nahi dituzun diseinuak eraikitzen laguntzeko. Aurrez definitutako edukiontzi-klase hauek pertsonaliza ditzakezu haiek bultzatzen dituen Sass mapa aldatuz (en aurkitzen da _variables.scss):

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

Sass pertsonalizatzeaz gain, zure ontziak ere sor ditzakezu gure Sass mixin-ekin.

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

Gure Sass mapak eta aldagaiak aldatzeari buruzko informazio eta adibide gehiago lortzeko, begiratu Sass atala Grid dokumentazioaren .