Jya ku bintu nyamukuru Jya kuri docs
Check
in English

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 a max-widthkuri buri cyerekezo gisubiza
  • .container-{breakpoint}, ni width: 100%kugeza igihe cyerekanwe
  • .container-fluid, ni width: 100%Kuri Byose

Imbonerahamwe ikurikira irerekana uburyo buri kontineri max-widthigereranya numwimerere .containerndetse .container-fluidno kuri buri gice.

Reba mubikorwa kandi ubigereranye murugero rwacu rwa Grid .

Ntoya
<576px
Ntoya
≥576px
Hagati
68768px
Kinini
≥992px
X-Kinini
001200px
XX-Kinini
001400px
.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 .containerni igisubizo, cyagutse-ubugari, bivuze max-widthimpinduka 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-widths kuri buri gice cyo hejuru. Kurugero, .container-smni 100% ubugari kugirango utangire kugeza aho ibice smbigeze, aho bizapima hamwe md,,, lgna 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-fluidubugari 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 .