Zotengera
Zotengera ndizomanga zomangira za Bootstrap zomwe zimakhala, pad, ndikugwirizanitsa zomwe zili mkati mwa chipangizo chomwe mwapatsidwa kapena malo owonera.
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 imayikamax-width
pagawo lililonse lomvera.container-fluid
, zomwe zimakhalawidth: 100%
zosokoneza.container-{breakpoint}
, zomwe ziliwidth: 100%
mpaka kusweka kotchulidwa
Tebulo ili m'munsiyi ikuwonetsa momwe chidebe chilichonse max-width
chimafananira ndi choyambirira .container
komanso .container-fluid
pagawo lililonse loduka.
Awoneni akugwira ntchito ndikufanizira mu chitsanzo chathu cha Gridi .
Zocheperako < 576px |
Yaing'ono ≥576px |
Wapakatikati ≥768px |
Chachikulu ≥992px |
X-Large ≥1200px |
XX-Chachikulu ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 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% |
Chidebe chofikira
Gulu lathu losasinthika .container
ndi chidebe chomvera, chokhazikika, kutanthauza max-width
kusintha 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-width
s pagawo lililonse lapamwamba. Mwachitsanzo, .container-sm
ndi 100% m'lifupi kuti ayambe mpaka pomwe sm
afika, 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-fluid
ntchito 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 afotokozedweratu posintha mapu a Sass (opezeka 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 Grid .