Izitsha

Basebenza kanjani

Iziqukathi ziyisici sesakhiwo esiyisisekelo ku-Bootstrap futhi siyadingeka uma kusetshenziswa uhlelo lwethu lwegridi oluzenzakalelayo . Iziqukathi zisetshenziselwa ukuqukatha, iphedi, futhi (ngezinye izikhathi) beka phakathi okuqukethwe ngaphakathi kwazo. Nakuba iziqukathi zingafakwa , izakhiwo eziningi azidingi isiqukathi esinesidleke.

I-Bootstrap iza neziqukathi ezintathu ezihlukene:

• .container, osetha u-a max-widthendaweni ngayinye esabelayo
• .container-fluid, okungama width: 100%-breakpoints
• .container-{breakpoint}, width: 100%okungaze kube indawo yokuphumula eshiwo

Ithebula elingezansi libonisa ukuthi isiqukathi ngasinye max-widthsiqhathaniswa kanjani nesokuqala .containerkanye nakuyo .container-fluidyonke indawo yokuhlukana.

Zibone zisebenza futhi uziqhathanise esibonelweni sethu seGridi .

Isiqukathi esizenzakalelayo

Isigaba sethu esizenzakalelayo siyisitsha esisabelayo, esinobubanzi obugxilile .container, okusho max-widthizinguquko zaso endaweni ngayinye yokuphumula.

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

Iziqukathi ezisabelayo

Iziqukathi eziphendulayo zikuvumela ukuthi ucacise ikilasi elingu-100% ububanzi kuze kube yilapho kufinyelelwa khona indawo yokuphumula eshiwo, ngemva kwalokho sisebenzisa max-widthu-s endaweni ngayinye ephakeme kakhulu. Isibonelo, .container-smibanzi ngo-100% ukuze iqale kuze smkufinyelelwe indawo yokunqamuka, lapho izokhuphuka ngo- md, lg, xl, kanye 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>

Izitsha zamanzi

Sebenzisa .container-fluidisitsha esinobubanzi obugcwele, esihlanganisa bonke ububanzi bembobo yokubuka.

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

Sass

Njengoba kukhonjisiwe ngenhla, i-Bootstrap ikhiqiza uchungechunge lwamakilasi esiqukathi achazwe ngaphambilini ukukusiza ukwakha izakhiwo ozifisayo. Ungenza ngendlela oyifisayo lezi zigaba zeziqukathi ezichazwe ngaphambilini ngokulungisa imephu ye-Sass (etholakala ku- _variables.scss) ewanika amandla:

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

Ngaphezu kokwenza ngokwezifiso i-Sass, ungaphinda uzenzele ezakho iziqukathi ngengxube yethu ye-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();
}

Ukuze uthole ulwazi olwengeziwe kanye nezibonelo zokuthi ungawashintsha kanjani amamephu wethu we-Sass nokuguquguqukayo, sicela ubheke ingxenye ye-Sass yemibhalo Yegridi .