Tlolela go diteng tše kgolo Tlolela go docs navigation
Check
in English

Ditshelo

Ditshelo ke selo sa motheo sa go aga sa Bootstrap seo se nago le, pad, le go logaganya diteng tša gago ka gare ga sedirišwa se se filwego goba lefelo la go lebelela.

Kamoo di šomago ka gona

Ditshelo ke elemente ya motheo ya peakanyo ka go Bootstrap gomme di a nyakega ge o šomiša tshepedišo ya rena ya keriti ya go se fetoge . Ditshelo di šomišwa go swara, go pad, le (ka dinako tše dingwe) go tsepamiša diteng ka gare ga tšona. Le ge e le gore ditshelo di ka tsenywa ka gare ga sehlaga, bontši bja dipeakanyo ga di nyake setshelo sa go tsenywa ka gare ga sehlaga.

Bootstrap e tla le ditshelo tše tharo tše di fapanego:

  • .container, yeo e beago a max-widthka ntlheng e nngwe le e nngwe ya go kgaotša yeo e arabelago
  • .container-{breakpoint}, e lego width: 100%go fihla ntlheng ya go kgaotša yeo e boletšwego
  • .container-fluid, yeo e lego width: 100%mafelong ka moka a go kgaotša

Tafola ye e lego ka mo tlase e bontšha ka moo setshelo se sengwe le se sengwe se max-widthbapetšwago le sa mathomo .containerle .container-fluidgo putla ntlha ye nngwe le ye nngwe ya go kgaotša.

Di bone di šoma gomme o di bapetše mohlaleng wa rena wa Gridi .

E nyenyane e eketsehileng
<576px
Nnyane
≥576px e le
Dirišwago
≥768px e le
Kgolo
≥992px e le
X-Kgolo
≥1200px e le
XX-E kgolo
≥1400px e le
.container 100% e le . 540px e le 720px e le 960px e le 1140px e le 1320px e le
.container-sm 100% e le . 540px e le 720px e le 960px e le 1140px e le 1320px e le
.container-md 100% e le . 100% e le . 720px e le 960px e le 1140px e le 1320px e le
.container-lg 100% e le . 100% e le . 100% e le . 960px e le 1140px e le 1320px e le
.container-xl 100% e le . 100% e le . 100% e le . 100% e le . 1140px e le 1320px e le
.container-xxl 100% e le . 100% e le . 100% e le . 100% e le . 100% e le . 1320px e le
.container-fluid 100% e le . 100% e le . 100% e le . 100% e le . 100% e le . 100% e le .

Setshelo sa tlwaelo

Sehlopha sa rena sa go se fetoge .containerke setshelo sa go arabela, sa bophara bjo bo sa fetogego, go ra gore max-widthdiphetogo tša sona ntlheng ye nngwe le ye nngwe ya go kgaotša.

<div class="container">
  <!-- Content here -->
</div>

Ditshelo tše di arabelago

Ditshelo tše di arabelago di go dumelela go laetša sehlopha seo se nago le bophara bja 100% go fihlela ntlha ya go kgaotša ye e laeditšwego e fihlelelwa, ka morago ga moo re diriša max-widths go ye nngwe le ye nngwe ya dintlha tša go kgaotša tša godimo. Go fa mohlala, .container-smke 100% ya bophara go thoma go fihlela ntlha ya go smkgaotša e fihlelelwa, moo e tlago go lekalekantšha ka md, lg, xl, le 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>

Ditshelo tša seela

Šomiša .container-fluidbakeng sa setshelo sa bophara bjo bo tletšego, se akaretša bophara ka moka bja lefelo la go lebelela.

<div class="container-fluid">
  ...
</div>

Sass

Bjalo ka ge go bontšhitšwe ka mo godimo, Bootstrap e tšweletša lelokelelo la diklase tša ditshelo tše di hlalošitšwego e sa le pele go go thuša go aga dipeakanyo tšeo o di kganyogago. O ka tlwaetša dihlopha tše tša ditshelo tše di hlalošitšwego e sa le pele ka go fetoša mmapa wa Sass (wo o hwetšwago go _variables.scss) wo o di fago maatla:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Go tlaleletša go tlwaetša Sass, o ka hlama gape le ditshelo tša gago ka mixin ya rena ya 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();
}

Bakeng sa tshedimošo ye ntši le mehlala ya ka moo o ka fetošago mebapa ya rena ya Sass le diphetogo, hle lebelela karolo ya Sass ya ditokomane tša Gridi .