Vyombo
Vyombo ni msingi wa ujenzi wa Bootstrap ambao una, pedi, na kulandanisha maudhui yako ndani ya kifaa au kituo fulani cha kutazama.
Jinsi wanavyofanya kazi
Vyombo ndio kipengele cha msingi zaidi cha mpangilio katika Bootstrap na kinahitajika unapotumia mfumo wetu chaguo-msingi wa gridi ya taifa . Vyombo hutumika kuwa na, pedi, na (wakati mwingine) katikati yaliyomo ndani yake. Ingawa vyombo vinaweza kuwekewa viota, miundo mingi haihitaji chombo kilichowekwa kiota.
Bootstrap inakuja na vyombo vitatu tofauti:
.container
, ambayo huwekamax-width
katika kila sehemu ya msikivu.container-fluid
, ambayo niwidth: 100%
sehemu za mapumziko.container-{breakpoint}
, ambayo niwidth: 100%
hadi kikomo maalum
Jedwali lililo hapa chini linaonyesha jinsi kila kontena max-width
linavyolinganishwa na la asili .container
na .container-fluid
katika kila sehemu ya kukatiza.
Zione zikitenda kazi na uzilinganishe katika mfano wetu wa Gridi .
Ndogo zaidi <576px |
Ndogo ≥576px |
Wastani ≥768px |
Kubwa ≥992px |
X-Kubwa ≥1200px |
XX-Kubwa ≥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% |
Chombo chaguomsingi
Darasa letu chaguo-msingi .container
ni kontena inayojibu, yenye upana usiobadilika, ikimaanisha max-width
mabadiliko yake katika kila sehemu ya kukatiza.
<div class="container">
<!-- Content here -->
</div>
Vyombo vinavyoitikia
Vyombo vinavyojibu hukuruhusu kubainisha darasa ambalo lina upana wa 100% hadi kikomo kilichobainishwa kifikiwe, baada ya hapo tunatumia max-width
s kwa kila sehemu ya juu zaidi. Kwa mfano, .container-sm
ina upana wa 100% kuanza hadi sm
kikomo kifikiwe, ambapo kitaongezeka na md
, lg
, xl
, na 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>
Vyombo vya maji
Tumia .container-fluid
kwa kontena lenye upana kamili, linalojumuisha upana mzima wa lango la kutazama.
<div class="container-fluid">
...
</div>
Sass
Kama inavyoonyeshwa hapo juu, Bootstrap inazalisha mfululizo wa madarasa ya chombo yaliyoainishwa awali ili kukusaidia kuunda mipangilio unayotaka. Unaweza kubinafsisha madarasa haya ya kontena yaliyoainishwa awali kwa kurekebisha ramani ya Sass (inayopatikana ndani _variables.scss
) ambayo inawapa nguvu:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Mbali na kubinafsisha Sass, unaweza pia kuunda vyombo vyako mwenyewe na mchanganyiko wetu wa 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();
}
Kwa maelezo zaidi na mifano kuhusu jinsi ya kurekebisha ramani na vigeu vyetu vya Sass, tafadhali rejelea sehemu ya Sass ya hati za Gridi .