Kwantena

Yadda suke aiki

Kwantena sune mafi mahimmancin tsarin shimfidar wuri a cikin Bootstrap kuma ana buƙata lokacin amfani da tsarin grid ɗin mu na asali . Ana amfani da kwantena don ƙunshe, pad, da (wani lokaci) tsakiyar abun ciki a cikinsu. Yayin da kwantena na iya zama gida, yawancin shimfidu ba sa buƙatar akwati mai gida.

Bootstrap ya zo tare da kwantena daban-daban guda uku:

• .container, wanda ke saita max-widtha kowane wuri mai amsawa
• .container-{breakpoint}, wanda shine width: 100%har zuwa lokacin da aka ƙayyade
• .container-fluid, wanda yake width: 100%a duk wuraren karyawa

Teburin da ke ƙasa yana kwatanta yadda kowane kwantena ya max-widthkwatanta da na asali .containerda kuma .container-fluidcikin kowane wurin karya.

Duba su a aikace kuma kwatanta su a cikin misalin Grid ɗin mu .

Tsohuwar ganga

Ajin mu na yau da .containerkullun shine mai amsawa, kafaffen ganga mai faɗi, ma'ana max-widthcanje-canjensa a kowane wurin hutu.

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

Kwantena masu amsawa

Kwantena masu amsawa suna ba ku damar ƙididdige aji mai faɗin 100% har sai an kai ƙayyadadden wurin hutu, bayan haka muna amfani max-widthda s ga kowane mafi girman wuraren hutu. Misali, .container-smyana da faɗin 100% don farawa har sai sman isa wurin karya, inda zai haɓaka da md, lg, xl, da 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>

Ruwan kwantena

Yi amfani .container-fluidda babban akwati mai faɗi, mai faɗi duka faɗin wurin kallo.

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

Sass

Kamar yadda aka nuna a sama, Bootstrap yana haifar da jerin darussan kwantena waɗanda aka riga aka ƙayyade don taimaka muku gina shimfidar da kuke so. Kuna iya keɓance waɗannan azuzuwan kwantena waɗanda aka riga aka ayyana ta hanyar gyara taswirar Sass (wanda aka samo a ciki _variables.scss) wanda ke ba su iko:

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

Baya ga keɓance Sass, kuna iya ƙirƙirar kwantena naku tare da haɗin Sass ɗin mu.

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

Don ƙarin bayani da misalai kan yadda ake canza taswirar Sass da masu canji, da fatan za a koma sashin Sass na takaddun Grid .