Konténerek
A tárolók a Bootstrap alapvető építőkövei, amelyek egy adott eszközön vagy nézetablakon belül tartalmazzák, beillesztik és hozzáigazítják a tartalmat.
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özpontosí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:
.container
max-width
, amely minden reszponzív töréspontnál beállít egy értéket.container-fluid
, amiwidth: 100%
minden törésponton van.container-{breakpoint}
, amiwidth: 100%
a megadott töréspontig tart
Az alábbi táblázat bemutatja, hogy az egyes tárolók hogyan viszonyulnak max-width
az eredetihez .container
, és hogyan viszonyulnak .container-fluid
az egyes töréspontokhoz.
Tekintse meg őket működés közben, és hasonlítsa össze őket a rácsos példánkban .
Extra kicsi <576 képpont |
Kicsi ≥576 képpont |
Közepes ≥768 képpont |
Nagy ≥992 képpont |
X-Large ≥1200 képpont |
XX-Large ≥1400 képpont |
|
---|---|---|---|---|---|---|
.container |
100% | 540 képpont | 720 képpont | 960 képpont | 1140 képpont | 1320 képpont |
.container-sm |
100% | 540 képpont | 720 képpont | 960 képpont | 1140 képpont | 1320 képpont |
.container-md |
100% | 100% | 720 képpont | 960 képpont | 1140 képpont | 1320 képpont |
.container-lg |
100% | 100% | 100% | 960 képpont | 1140 képpont | 1320 képpont |
.container-xl |
100% | 100% | 100% | 100% | 1140 képpont | 1320 képpont |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320 képpont |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Alapértelmezett tároló
Az alapértelmezett .container
osztályunk egy reszponzív, fix szélességű tároló, ami azt jelenti, hogy max-width
minden 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-width
minden magasabb töréspontra s-t alkalmazunk. Például .container-sm
100%-os széles a kezdéshez, amíg el sm
nem é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-fluid
teljes 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 módosításával (lásd: _variables.scss
):
$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 a 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ók 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 .