Containers
Containers chinhu chakakosha chekuvaka cheBootstrap chine, pad, uye rongedza zvirimo mukati mechinhu chakapihwa mudziyo kana yekutarisa.
Mashandiro avanoita
Containers ndiyo inonyanya kukosha dhizaini muBootstrap uye inodiwa kana uchishandisa yedu default grid system . Midziyo inoshandiswa kuve ne, pad, uye (dzimwe nguva) pakati pezviri mukati mazvo. Nepo midziyo inogona kuvharirwa, marongerwo mazhinji haadi chigadziko chine madendere.
Bootstrap inouya nemidziyo mitatu yakasiyana:
.container
, iyo inoisamax-width
pane imwe neimwe inopindura breakpoint.container-fluid
, iyo iriwidth: 100%
panguva dzese dzekutyora.container-{breakpoint}
, inovawidth: 100%
kusvika pane yakatarwa breakpoint
Tafura iri pazasi inoratidza kuti mudziyo wega wega max-width
unofananidzwa sei neyekutanga .container
uye .container-fluid
padanho rega rega rekutyora.
Vaone mukuita uye vaenzanise muGridhi yedu muenzaniso .
Yakawedzera diki <576px |
Diki ≥576px |
Pakati nepakati ≥768px |
Huru ≥992px |
X-Large ≥1200px |
XX- Huru ≥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% |
Default mudziyo
Yedu .container
yakasarudzika kirasi inopindura, yakagadziriswa-yakafara mudziyo, zvichireva max-width
shanduko dzayo pane imwe neimwe breakpoint.
<div class="container">
<!-- Content here -->
</div>
Midziyo inopindura
Midziyo inopindura inokutendera kuti utaure kirasi iyo iri 100% yakafara kusvika iyo yakatarwa breakpoint yasvika, mushure mezvo isu tinoisa max-width
s kune yega yega yepamusoro breakpoint. Semuyenzaniso, .container-sm
i100% yakafara kutanga kusvika sm
pakavhurika yasvika, painozokwira ne md
, lg
, xl
, uye 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>
Fluid containers
Shandisa .container-fluid
kune chigadziko chakazara chakafara, chinotenderera hupamhi hwese hwekutarisa.
<div class="container-fluid">
...
</div>
Sass
Sezvaratidzwa pamusoro, Bootstrap inogadzira akateedzana akatemerwa emidziyo makirasi kuti akubatsire iwe kuvaka marongero aunoda. Iwe unogona kugadzirisa aya akafanotsanangurwa emidziyo makirasi nekugadzirisa iyo Sass mepu (inowanikwa mu _variables.scss
) inovapa simba:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Pamusoro pekugadzirisa iyo Sass, iwe unogona zvakare kugadzira yako midziyo ine yedu Sass musanganiswa.
// 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 uwane rumwe ruzivo nemienzaniso yekugadzirisa mamepu edu eSass uye zvinosiyana, ndapota tarisa kune chikamu cheSass cheGridhi zvinyorwa .