Saltatu eduki nagusira Saltatu dokumentuen nabigaziora
in English

Ontziak

Edukiak Bootstrap-en oinarrizko eraikuntza-blokeak dira, zure edukia gailu edo ikuspegi jakin batean eduki, bete eta lerrokatzen dutenak.

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 .

Oso txikia
<576px
Txikia
≥576px
Ertaina
≥768 px
Handia
≥992px
X-handia
≥1200px
XX- Handia
≥1400px
.container % 100 540 px 720 px 960 px 1140 px 1320 px
.container-sm % 100 540 px 720 px 960 px 1140 px 1320 px
.container-md % 100 % 100 720 px 960 px 1140 px 1320 px
.container-lg % 100 % 100 % 100 960 px 1140 px 1320 px
.container-xl % 100 % 100 % 100 % 100 1140 px 1320 px
.container-xxl % 100 % 100 % 100 % 100 % 100 1320 px
.container-fluid % 100 % 100 % 100 % 100 % 100 % 100

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 .