Kwantena
Kwantena su ne tushen tushen ginin Bootstrap wanda ya ƙunshi, pad, da daidaita abun cikin ku a cikin na'urar da aka bayar ko wurin kallo.
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 saitamax-width
a kowane wuri mai amsawa.container-fluid
, wanda yakewidth: 100%
a duk wuraren karyawa.container-{breakpoint}
, wanda shinewidth: 100%
har zuwa lokacin da aka ƙayyade
Teburin da ke ƙasa yana kwatanta yadda kowane kwantena ya max-width
kwatanta da na asali .container
da kuma .container-fluid
cikin kowane wurin karya.
Duba su a aikace kuma kwatanta su a cikin misalin Grid ɗin mu .
Ƙarin ƙarami <576px |
Ƙananan ≥576px |
Matsakaici ≥768px |
Babban ≥992px |
X-Large ≥1200px |
XX-Babban ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px ku | 720px ku | 960px ku | 1140px | 1320px |
.container-sm |
100% | 540px ku | 720px ku | 960px ku | 1140px | 1320px |
.container-md |
100% | 100% | 720px ku | 960px ku | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px ku | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Tsohuwar ganga
Ajin mu na yau da .container
kullun shine mai amsawa, kafaffen ganga mai faɗi, ma'ana max-width
canje-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-width
da s ga kowane mafi girman wuraren hutu. Misali, .container-sm
yana da faɗin 100% don farawa har sai sm
an 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-fluid
da 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 .