Kontenè
Kontenè yo se yon blòk bilding fondamantal nan Bootstrap ki genyen, pad, ak aliman kontni ou nan yon aparèy oswa yon vi.
Ki jan yo travay
Kontenè yo se eleman layout ki pi fondamantal nan Bootstrap epi yo obligatwa lè w ap itilize sistèm griy default nou an . Kontenè yo itilize pou genyen, pad, ak (pafwa) sant kontni an nan yo. Pandan ke resipyan yo ka enbrike, pifò layouts pa mande pou yon veso anbrike.
Bootstrap vini ak twa resipyan diferan:
.container
, ki mete yonmax-width
nan chak pwen rupture reponn.container-fluid
, ki sewidth: 100%
nan tout breakpoints.container-{breakpoint}
, ki sewidth: 100%
jiska pwen rupture espesifye a
Tablo ki anba a montre kouman chak veso yo max-width
konpare ak orijinal la .container
ak .container-fluid
atravè chak pwen rupture.
Gade yo an aksyon epi konpare yo nan egzanp Grid nou an .
Siplemantè piti <576px |
Ti ≥576px |
Mwayen ≥768px |
Gwo ≥992px |
X-Gwo ≥1200px |
XX-Gwo ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540 px | 720 px | 960 px | 1140px | 1320px |
.container-sm |
100% | 540 px | 720 px | 960 px | 1140px | 1320px |
.container-md |
100% | 100% | 720 px | 960 px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960 px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Default veso
Klas defo nou .container
an se yon veso ki reponn ak lajè fiks, sa vle di max-width
chanjman li yo nan chak pwen rupture.
<div class="container">
<!-- Content here -->
</div>
Kontenè ki reponn
Kontenè ki reponn yo pèmèt ou presize yon klas ki se 100% lajè jiskaske pwen rupture espesifye a rive, apre sa nou aplike max-width
pou chak nan pwen rupture ki pi wo yo. Pa egzanp, .container-sm
se 100% lajè pou kòmanse jiskaske pwen sm
rupture a rive, kote li pral monte ak md
, lg
, xl
, ak 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>
Resipyan likid
Itilize .container-fluid
pou yon veso plen lajè, ki kouvri tout lajè fenèt la.
<div class="container-fluid">
...
</div>
Sass
Jan yo montre pi wo a, Bootstrap jenere yon seri klas veso predefini pou ede ou bati layout ou vle yo. Ou ka pèsonalize klas veso sa yo predefini lè w modifye kat Sass la (ki jwenn nan _variables.scss
) ki pouse yo:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Anplis de personnalisation Sass la, ou kapab tou kreye kontenè pwòp ou a ak mixin Sass nou an.
// 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();
}
Pou plis enfòmasyon ak egzanp sou fason pou modifye kat ak varyab Sass nou yo, tanpri al gade nan seksyon Sass nan dokiman Grid la .