Kontejnerët
Kontejnerët janë një bllok themelor ndërtimor i Bootstrap që përmbajnë, mbulojnë dhe rreshtojnë përmbajtjen tuaj brenda një pajisjeje ose porti të caktuar.
Si funksionojnë
Kontejnerët janë elementi më bazë i paraqitjes në Bootstrap dhe kërkohen kur përdorni sistemin tonë të paracaktuar të rrjetit . Kontejnerët përdoren për të përmbajtur, mbushur dhe (ndonjëherë) qendër përmbajtjen brenda tyre. Ndërsa kontejnerët mund të vendosen me fole, shumica e paraqitjeve nuk kërkojnë një enë të mbivendosur.
Bootstrap vjen me tre kontejnerë të ndryshëm:
.container
, i cili vendos njëmax-width
në çdo pikë ndërprerjeje të përgjegjshme.container-fluid
, e cila ështëwidth: 100%
në të gjitha pikat e ndërprerjes.container-{breakpoint}
, që ështëwidth: 100%
deri në pikën e caktuar të ndërprerjes
Tabela më poshtë ilustron se si çdo kontejner max-width
krahasohet me origjinalin .container
dhe .container-fluid
në çdo pikë ndërprerjeje.
Shihni ato në veprim dhe krahasojini ato në shembullin tonë Grid .
Tepër e vogël <576 px |
E vogël ≥576 px |
Mesatare ≥768 px |
E madhe ≥992 px |
X-Large ≥1200 px |
XX-Large ≥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% |
Kontejneri i parazgjedhur
Klasa jonë e paracaktuar .container
është një kontejner i përgjegjshëm, me gjerësi fikse, që do të thotë max-width
ndryshimet e tij në çdo pikë ndërprerjeje.
<div class="container">
<!-- Content here -->
</div>
Kontejnerë të përgjegjshëm
Kontejnerët reagues ju lejojnë të specifikoni një klasë që është 100% e gjerë derisa të arrihet pika e caktuar e ndërprerjes, pas së cilës ne aplikojmë max-width
s për secilën nga pikat më të larta të ndërprerjes. Për shembull, .container-sm
është 100% e gjerë për të filluar derisa të sm
arrihet pika e ndërprerjes, ku do të rritet me md
, lg
, xl
, dhe 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>
Kontejnerët e lëngjeve
Përdoreni .container-fluid
për një kontejner me gjerësi të plotë, që përfshin të gjithë gjerësinë e portës së shikimit.
<div class="container-fluid">
...
</div>
Sass
Siç tregohet më lart, Bootstrap gjeneron një seri klasash të paracaktuara të kontejnerëve për t'ju ndihmuar të ndërtoni paraqitjet që dëshironi. Ju mund t'i personalizoni këto klasa të paracaktuara të kontejnerëve duke modifikuar hartën Sass (që gjendet në _variables.scss
) që i fuqizon ato:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Përveç personalizimit të Sass, ju gjithashtu mund të krijoni kontejnerët tuaj me përzierjen tonë Sass.
// 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();
}
Për më shumë informacion dhe shembuj se si të modifikojmë hartat dhe variablat tona Sass, ju lutemi referojuni seksionit Sass të dokumentacionit Grid .