Mga lalagyan
Ang mga container ay isang pangunahing building block ng Bootstrap na naglalaman, nagpapad, at nakahanay sa iyong content sa loob ng isang partikular na device o viewport.
Paano sila gumagana
Ang mga lalagyan ay ang pinakapangunahing elemento ng layout sa Bootstrap at kinakailangan kapag ginagamit ang aming default na grid system . Ang mga lalagyan ay ginagamit upang maglaman, maglagay ng pad, at (kung minsan) isentro ang nilalaman sa loob ng mga ito. Bagama't maaaring ma-nest ang mga container, karamihan sa mga layout ay hindi nangangailangan ng nested container.
Ang Bootstrap ay may tatlong magkakaibang lalagyan:
.container
, na nagtatakda ngmax-width
sa bawat tumutugon na breakpoint.container-fluid
, nawidth: 100%
nasa lahat ng breakpoints.container-{breakpoint}
, nawidth: 100%
hanggang sa tinukoy na breakpoint
Ang talahanayan sa ibaba ay naglalarawan kung paano inihahambing ang bawat lalagyan max-width
sa orihinal .container
at sa .container-fluid
bawat breakpoint.
Tingnan ang mga ito sa pagkilos at ihambing ang mga ito sa aming halimbawa ng Grid .
Napakaliit < 576px |
Maliit ≥576px |
Katamtaman ≥768px |
Malaki ≥992px |
X-Large ≥1200px |
XX-Malaki ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 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 na lalagyan
Ang aming default .container
na klase ay isang tumutugon, fixed-width na lalagyan, ibig sabihin ang mga max-width
pagbabago nito sa bawat breakpoint.
<div class="container">
<!-- Content here -->
</div>
Mga tumutugon na lalagyan
Nagbibigay-daan sa iyo ang mga tumutugon na lalagyan na tumukoy ng klase na 100% ang lapad hanggang sa maabot ang tinukoy na breakpoint, pagkatapos nito ay ilalapat namin max-width
ang s para sa bawat isa sa mas matataas na breakpoint. Halimbawa, .container-sm
100% ba ang lapad upang magsimula hanggang sa sm
maabot ang breakpoint, kung saan lalago ito ng md
, lg
, xl
, at 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>
Mga lalagyan ng likido
Gamitin .container-fluid
para sa isang buong lapad na lalagyan, na sumasaklaw sa buong lapad ng viewport.
<div class="container-fluid">
...
</div>
Sass
Gaya ng ipinakita sa itaas, ang Bootstrap ay bumubuo ng isang serye ng mga paunang natukoy na klase ng container upang matulungan kang bumuo ng mga layout na gusto mo. Maaari mong i-customize ang mga paunang natukoy na klase ng container na ito sa pamamagitan ng pagbabago sa mapa ng Sass (matatagpuan sa _variables.scss
) na nagpapagana sa kanila:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Bilang karagdagan sa pag-customize ng Sass, maaari ka ring gumawa ng sarili mong mga container gamit ang aming Sass mixin.
// 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();
}
Para sa higit pang impormasyon at mga halimbawa kung paano baguhin ang aming mga mapa at variable ng Sass, mangyaring sumangguni sa seksyong Sass ng dokumentasyon ng Grid .