Vyombo

Jinsi wanavyofanya kazi

Vyombo ndio kipengele cha msingi zaidi cha mpangilio katika Bootstrap na kinahitajika unapotumia mfumo wetu chaguo-msingi wa gridi ya taifa . Vyombo hutumika kuwa na, pedi, na (wakati mwingine) katikati yaliyomo ndani yake. Ingawa vyombo vinaweza kuwekewa viota, miundo mingi haihitaji chombo kilichowekwa kiota.

Bootstrap inakuja na vyombo vitatu tofauti:

• .container, ambayo huweka max-widthkatika kila sehemu ya msikivu
• .container-{breakpoint}, ambayo ni width: 100%hadi kikomo maalum
• .container-fluid, ambayo ni width: 100%sehemu za mapumziko

Jedwali lililo hapa chini linaonyesha jinsi kila kontena max-widthlinavyolinganishwa na la asili .containerna .container-fluidkatika kila sehemu ya kukatiza.

Zione zikitenda kazi na uzilinganishe katika mfano wetu wa Gridi .

Chombo chaguomsingi

Darasa letu chaguo-msingi .containerni kontena inayojibu, yenye upana usiobadilika, ikimaanisha max-widthmabadiliko yake katika kila sehemu ya kukatiza.

<div class="container">
  <!-- Content here -->
</div>

Vyombo vinavyoitikia

Vyombo vinavyojibu hukuruhusu kubainisha darasa ambalo lina upana wa 100% hadi kikomo kilichobainishwa kifikiwe, baada ya hapo tunatumia max-widths kwa kila sehemu ya juu zaidi. Kwa mfano, .container-smina upana wa 100% kuanza hadi smkikomo kifikiwe, ambapo kitaongezeka na md, lg, xl, na 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>

Vyombo vya maji

Tumia .container-fluidkwa kontena lenye upana kamili, linalojumuisha upana mzima wa lango la kutazama.

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

Sass

Kama inavyoonyeshwa hapo juu, Bootstrap inazalisha mfululizo wa madarasa ya chombo yaliyoainishwa awali ili kukusaidia kuunda mipangilio unayotaka. Unaweza kubinafsisha madarasa haya ya kontena yaliyoainishwa awali kwa kurekebisha ramani ya Sass (inayopatikana ndani _variables.scss) ambayo inawapa nguvu:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Mbali na kubinafsisha Sass, unaweza pia kuunda vyombo vyako mwenyewe na mchanganyiko wetu wa 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();
}

Kwa maelezo zaidi na mifano kuhusu jinsi ya kurekebisha ramani na vigeu vyetu vya Sass, tafadhali rejelea sehemu ya Sass ya hati za Gridi .