Izikhongozeli

Indlela abasebenza ngayo

Imigqomo yeyona nto isisiseko uyilo kwiBootstrap kwaye iyafuneka xa usebenzisa inkqubo yethu yegridi engagqibekanga . Izikhongozeli zisetyenziselwa ukuqulatha, iphedi, kwaye (ngamanye amaxesha) iziko lomxholo ophakathi kwazo. Ngelixa izikhongozeli zinokubekwa kwindlwane, uninzi lwezakhiwo azifuni sikhongozeli esinendlwane.

I-Bootstrap iza nezikhongozeli ezintathu ezahlukeneyo:

• .container, emisela a max-widthkwindawo nganye yokusabela esabelayo
• .container-{breakpoint}, elide libe yindawo width: 100%ekhankanyiweyo yokwaphuka
• .container-fluid, ekuthi width: 100%kuzo zonke iindawo zokuqhawuka

Itheyibhile engezantsi ibonisa ukuba isikhongozeli ngasinye sithelekiseka njani max-widthnesokuqala .containernakwindawo .container-fluidyoqhawulo nganye.

Zibone zisebenza kwaye uzithelekise kumzekelo wethu weGridi .

Isikhongozeli esihlala sihleli

Udidi lwethu olungagqibekanga .containersisikhongozeli esiphendulayo, esinobubanzi obusisigxina, okuthetha ukuba max-widthutshintsho lwaso kwindawo nganye yoqhawulo.

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

Izikhongozeli eziphendulayo

Izikhongozeli eziphendulayo zikuvumela ukuba uchaze udidi oluyi-100% ububanzi de kufike i-breakpoint echaziweyo, emva koko sisebenzise max-widthi-s kwi-breakpoints nganye ephezulu. Umzekelo, .container-smi-100% ububanzi ukuqala de kufike indawo smyokuphumla, apho iya kunyuka nge md, lg, xl, kunye 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>

Izikhongozeli zolwelo

Sebenzisa .container-fluidkwisikhongozeli esibanzi esigcweleyo, esinaba bonke ububanzi bendawo yokujonga.

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

Sass

Njengoko kubonisiwe ngasentla, iBootstrap ivelisa uthotho lweeklasi ezichazwe kwangaphambili zesikhongozeli ukukunceda ukuba wakhe uyilo olunqwenelayo. Unokwenza ezi klasi zichazwe kwangaphambili zesikhongozeli ngokuguqula imephu ye-Sass (efumaneka kwi _variables.scss) ebanika amandla:

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

Ukongeza ekwenzeni ngokwezifiso i-Sass, unokwenza izikhongozeli zakho ngomxube wethu we-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();
}

Ngolwazi oluthe vetshe kunye nemizekelo malunga nendlela yokutshintsha iimephu zethu ze-Sass kunye nezinto eziguquguqukayo, nceda ujonge icandelo le-Sass leGridi yamaxwebhu .