Ba récipients
Ba conteneurs ezali bloc de construction fondamental ya Bootstrap oyo ezali na, pad, mpe aligner contenus na yo na kati ya appareil to viewport epesami.
Ndenge oyo basalaka
Ba conteneurs ezali élément ya layout ya base mingi na Bootstrap mpe esengeli tango ya kosalela système na biso ya grille par défaut . Ba récipients esalelamaka mpo na kokanga, ko pad, mpe (ntango mosusu) ko centrer makambo oyo ezali na kati na yango. Atako ba conteneurs ekoki kozala na kati, mingi ya ba layouts esengaka te conteneur oyo ekangami.
Bootstrap eza na ba récipients misato ekeseni:
.container
, oyo etyaka amax-width
na esika mokomoko ya kobuka oyo ezali koyanola.container-fluid
, oyo ezaliwidth: 100%
na bisika nyonso ya kobukana.container-{breakpoint}
, oyo ezaliwidth: 100%
tii na esika oyo emonisami
Tableau oyo ezali awa na se ezali kolakisa ndenge nini conteneur moko na moko max-width
ekokani na oyo ya ebandeli .container
mpe .container-fluid
na kati ya esika moko na moko ya kobukana.
Tala bango na misala mpe kokanisá bango na ndakisa na biso ya Grille .
Extra ya moke <576px |
Moke ≥576px |
Moyenne ≥768px |
Monene ≥992px |
X-Monene ≥1200px |
XX-Monene ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% ya . | 540px na yango | 720px ezali | 960px ezali | 1140px na yango | 1320px na yango |
.container-sm |
100% ya . | 540px na yango | 720px ezali | 960px ezali | 1140px na yango | 1320px na yango |
.container-md |
100% ya . | 100% ya . | 720px ezali | 960px ezali | 1140px na yango | 1320px na yango |
.container-lg |
100% ya . | 100% ya . | 100% ya . | 960px ezali | 1140px na yango | 1320px na yango |
.container-xl |
100% ya . | 100% ya . | 100% ya . | 100% ya . | 1140px na yango | 1320px na yango |
.container-xxl |
100% ya . | 100% ya . | 100% ya . | 100% ya . | 100% ya . | 1320px na yango |
.container-fluid |
100% ya . | 100% ya . | 100% ya . | 100% ya . | 100% ya . | 100% ya . |
Conteneur ya défaut
Classe na biso ya défaut .container
ezali réponse, conteneur ya largeur fixe, elingi koloba ba max-width
changements na yango na point de rupture moko na moko.
<div class="container">
<!-- Content here -->
</div>
Ba récipients oyo ezo répondre
Ba conteneurs réponses epesaka yo nzela ya ko préciser classe oyo ezali na largeur ya 100% tii tango point de rupture oyo elakisami ekokoma, sima na yango tosalelaka max-width
s pona moko na moko ya ba points de rupture ya likolo. Ndakisa, .container-sm
ezali 100% ya bonene mpo na kobanda kino sm
esika ya bopanzani ekokoma, esika ekomata na md
, lg
, xl
, mpe 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>
Ba récipients ya mayi
Salelá .container-fluid
mpo na eloko oyo ezali na bonene mobimba, oyo ezali na bonene mobimba ya esika ya kotala.
<div class="container-fluid">
...
</div>
Sass oyo azali
Ndenge emonisami likolo, Bootstrap ebimisaka molɔngɔ́ ya bakelasi ya ba conteneurs oyo esili kolimbolama liboso mpo na kosalisa yo otonga ba layouts oyo olingi. Okoki ko personnaliser ba classes oyo ya ba conteneurs pré-définies na ko modifier carte ya Sass (ezwami na _variables.scss
) oyo epesaka bango nguya:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
En plus ya ko personnaliser Sass, okoki pe kosala ba conteneurs na yo moko na mixin na biso ya 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();
}
Mpo na koyeba makambo mingi mpe bandakisa ya ndenge ya kobongisa ba cartes mpe ba variables na biso ya Sass, tala eteni ya Sass ya mikanda ya Grid .