Zotengera

Momwe amagwirira ntchito

Zotengera ndizomwe zimayambira kwambiri mu Bootstrap ndipo zimafunika mukamagwiritsa ntchito gridi yathu yosasinthika . Zotengera zimagwiritsidwa ntchito kukhala, pad, ndipo (nthawi zina) pakati zomwe zili mkati mwake. Ngakhale zotengera zimatha kukhala zisa, masanjidwe ambiri safuna chidebe chokhala ndi zisa.

Bootstrap imabwera ndi zotengera zitatu zosiyanasiyana:

• .container, yomwe imayika max-widthpagawo lililonse lomvera
• .container-fluid, zomwe zimakhala width: 100%zosokoneza
• .container-{breakpoint}, zomwe zili width: 100%mpaka kusweka kotchulidwa

Tebulo ili m'munsiyi ikuwonetsa momwe chidebe chilichonse max-widthchimafananira ndi choyambirira .containerkomanso .container-fluidpagawo lililonse loduka.

Awoneni akugwira ntchito ndikufanizira mu chitsanzo chathu cha Gridi .

Chidebe chofikira

Gulu lathu losasinthika .containerndi chidebe chomvera, chokhazikika, kutanthauza max-widthkusintha kwake pagawo lililonse.

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

Zotengera zomvera

Zotengera zomvera zimakulolani kuti mutchule gulu lomwe ndi lalikulu 100% mpaka malo omwe mwatchulidwawo afika, kenako timayika max-widths pagawo lililonse lapamwamba. Mwachitsanzo, .container-smndi 100% m'lifupi kuti ayambe mpaka pomwe smafika, pomwe adzakwera ndi md, lg, xl, ndi 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>

Zotengera zamadzimadzi

Gwiritsani .container-fluidntchito chidebe chokhala ndi m'lifupi mwake, kufalikira m'lifupi lonse la malo owonera.

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

Sass

Monga tawonera pamwambapa, Bootstrap imapanga makalasi angapo omwe afotokozedweratu kuti akuthandizeni kupanga masanjidwe omwe mukufuna. Mutha kusintha makonda awa omwe afotokozedwa kale posintha mapu a Sass (omwe amapezeka mu _variables.scss) omwe amawapatsa mphamvu:

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

Kuphatikiza pakusintha ma Sass, mutha kupanganso zotengera zanu ndi Sass mixin yathu.

// 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();
}

Kuti mumve zambiri ndi zitsanzo zamomwe mungasinthire mamapu athu a Sass ndi zosintha, chonde onani gawo la Sass la zolembedwa za Gridi .