Mga lalagyan

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 na lalagyan.

Ang Bootstrap ay may tatlong magkakaibang lalagyan:

• .container, na nagtatakda ng max-widthsa bawat tumutugon na breakpoint
• .container-{breakpoint}, na width: 100%hanggang sa tinukoy na breakpoint
• .container-fluid, na width: 100%nasa lahat ng breakpoints

Ang talahanayan sa ibaba ay naglalarawan kung paano inihahambing ang bawat lalagyan max-widthsa orihinal .containerat sa .container-fluidbawat breakpoint.

Tingnan ang mga ito sa pagkilos at ihambing ang mga ito sa aming halimbawa ng Grid .

Default na lalagyan

Ang aming default .containerna klase ay isang tumutugon, fixed-width na lalagyan, ibig sabihin ang mga max-widthpagbabago 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-widthang s para sa bawat isa sa mas matataas na breakpoint. Halimbawa, .container-sm100% ba ang lapad upang magsimula hanggang sa smmaabot 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-fluidpara sa isang buong lapad na lalagyan, na sumasaklaw sa buong lapad ng viewport.

<div class="container-fluid">
  ...
</div>

Sass

Gaya ng ipinapakita 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 sa 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 .