Ditshelo

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 .

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 .