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 amax-width
ka ntlheng e nngwe le e nngwe ya go kgaotša yeo e arabelago.container-fluid
, yeo e legowidth: 100%
mafelong ka moka a go kgaotša.container-{breakpoint}
, e legowidth: 100%
go fihla ntlheng ya go kgaotša yeo e boletšwego
Tafola ye e lego ka mo tlase e bontšha ka moo setshelo se sengwe le se sengwe se max-width
bapetšwago le sa mathomo .container
le .container-fluid
go 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 |
E nyenyane ≥576px |
Bogare ≥768px |
Kgolo ≥992px |
X-Kgolo ≥1200px |
XX-Kgolo ≥1400px |
|
---|---|---|---|---|---|---|
.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 .container
ke setshelo sa go arabela, sa bophara bjo bo sa fetogego, go ra gore max-width
diphetogo 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-width
s go ye nngwe le ye nngwe ya dintlha tša go kgaotša tša godimo. Go fa mohlala, .container-sm
ke 100% ya bophara go thoma go fihlela ntlha ya go sm
kgaotš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-fluid
bakeng 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 .