Ibikoresho
Ibirimwo nibintu byingenzi byubaka bya Bootstrap irimo, padi, kandi ihuza ibikubiyemo mubikoresho runaka cyangwa kureba.
Uburyo bakora
Ibirimwo nibintu byibanze byimiterere muri Bootstrap kandi birasabwa mugihe ukoresheje sisitemu ya gride idasanzwe . Ibikoresho bikoreshwa mubirimo, padi, na (rimwe na rimwe) hagati yibirimo. Mugihe ibyombo bishobora guterwa, imiterere myinshi ntisaba icyombo.
Bootstrap izanye ibintu bitatu bitandukanye:
.container
, ishyiraho amax-width
kuri buri cyerekezo gisubiza.container-fluid
, niwidth: 100%
Kuri Byose.container-{breakpoint}
, niwidth: 100%
kugeza igihe cyerekanwe
Imbonerahamwe ikurikira irerekana uburyo buri kontineri max-width
igereranya numwimerere .container
ndetse .container-fluid
no kuri buri gice.
Reba mubikorwa kandi ubigereranye murugero rwacu rwa Grid .
Gitoya <576px |
Gitoya ≥576px |
Hagati ≥768px |
Kinini ≥992px |
X-Kinini ≥1200px |
XX-Kinini ≥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% |
Igikoresho gisanzwe
Icyiciro cyacu cyambere .container
ni igisubizo, cyagutse-ubugari, bivuze max-width
impinduka zacyo kuri buri gice.
<div class="container">
<!-- Content here -->
</div>
Ibikoresho byubaka
Ibikoresho byabigenewe biragufasha kwerekana icyiciro kigari 100% kugeza igihe cyerekanwe kigeze, nyuma yo gusaba max-width
s kuri buri gice cyo hejuru. Kurugero, .container-sm
ni 100% ubugari kugirango utangire kugeza aho ibice sm
bigeze, aho bizapima hamwe md
,,, lg
na xl
.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>
Ibikoresho by'amazi
Koresha .container-fluid
ubugari bwuzuye kontineri, uzengurutse ubugari bwose bwo kureba.
<div class="container-fluid">
...
</div>
Sass
Nkuko byerekanwe hejuru, Bootstrap itanga urukurikirane rwamasomo yabigenewe mbere yo kugufasha kubaka imiterere wifuza. Urashobora guhitamo ibyiciro byabigenewe byateganijwe muguhindura ikarita ya Sass (iboneka muri _variables.scss
) ibaha imbaraga:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Usibye gutunganya Sass, urashobora kandi gukora ibikoresho byawe hamwe na Sass ivanze.
// 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();
}
Kubindi bisobanuro hamwe ningero zuburyo bwo guhindura amakarita yacu ya Sass nibihinduka, nyamuneka reba igice cya Sass cya Grid inyandiko .