Konténerek

Hogyan működnek

A tárolók a Bootstrap legalapvetőbb elrendezési elemei, és az alapértelmezett rácsrendszerünk használatakor szükségesek . A tárolók a tartalom tárolására, párosítására és (néha) középre állítására szolgálnak. Míg a tárolók beágyazhatók , a legtöbb elrendezéshez nincs szükség beágyazott tárolóra.

A Bootstrap három különböző konténerrel érkezik:

• .containermax-width, amely minden reszponzív töréspontnál beállít egy értéket
• .container-fluid, ami width: 100%minden törésponton van
• .container-{breakpoint}, ami width: 100%a megadott töréspontig tart

Az alábbi táblázat bemutatja, hogy az egyes tárolók hogyan viszonyulnak max-widthaz eredetihez .container, és hogyan viszonyulnak .container-fluidaz egyes töréspontokhoz.

Tekintse meg őket működés közben, és hasonlítsa össze őket a rácsos példánkban .

Alapértelmezett tároló

Az alapértelmezett .containerosztályunk egy reszponzív, fix szélességű tároló, ami azt jelenti, hogy max-widthminden törésponton változik.

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

Érzékeny konténerek

A reszponzív tárolók lehetővé teszik egy 100%-ban széles osztály megadását a megadott töréspont eléréséig, majd max-widthminden magasabb töréspontra s-t alkalmazunk. Például .container-sm100%-os széles a kezdéshez, amíg el smnem éri a töréspontot, ahol a md, lg, xl, és billentyűkkel felfelé lép 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>

Folyadéktartályok

Használja .container-fluidteljes szélességű tárolóhoz, amely a nézetablak teljes szélességére kiterjed.

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

Sass

Amint fentebb látható, a Bootstrap egy sor előre definiált konténerosztályt generál, hogy segítsen a kívánt elrendezések elkészítésében. Ezeket az előre definiált tárolóosztályokat testreszabhatja az őket működtető Sass térkép (a következő helyen található _variables.scss) módosításával:

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

A Sass testreszabása mellett saját konténereket is létrehozhat Sass mixinünkkel.

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

A Sass térképek és változóink módosításával kapcsolatos további információkért és példákért tekintse meg a Grid dokumentáció Sass szakaszát .