Kakaretšo

Dikarolo le dikgetho tša go beakanya porojeke ya gago ya Bootstrap, go akaretšwa ditshelo tša go phuthela, tshepedišo ya keriti ye maatla, selo sa methopo ya ditaba ye e fetofetogago, le diklase tša utility tše di arabelago.

Ditshelo

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-fluid, yeo e lego width: 100%mafelong ka moka a go kgaotša
• .container-{breakpoint}, e lego width: 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-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 .

Tsohle-ka-e mong

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>

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>

Go arabela

Ditshelo tše di arabelago ke tše mpsha go Bootstrap v4.4. 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, le xl.

<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>

Dintlha tša go kgaotša tše di arabelago

Ka ge Bootstrap e hlamilwe gore e be sellathekeng pele, re šomiša dipotšišo tše mmalwa tša methopo ya ditaba go hlama dintlha tša go kgaotša tše di nago le tlhaologanyo bakeng sa dipeakanyo tša rena le didirišwa tša go dirišana. Dintlha tše tša go kgaotša di theilwe kudu godimo ga bophara bja bonnyane bja lefelo la go lebelela gomme di re dumelela go oketša dielemente ge lefelo la go lebelela le fetoga.

Bootstrap kudu-kudu e diriša meelo e latelago ya dipotšišo tša methopo ya ditaba—goba dintlha tša go kgaotša—ka difaeleng tša rena tša mohlodi tša Sass bakeng sa peakanyo ya rena, tshepedišo ya keriti le dikarolo.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Ka ge re ngwala CSS ya rena ya mothopo ka go Sass, dipotšišo tša rena ka moka tša boraditaba di hwetšagala ka di-mixin tša Sass:

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Ka dinako tše dingwe re diriša dipotšišo tša methopo ya ditaba tšeo di yago ka lehlakoreng le lengwe (bogolo bja skrine bjo bo filwego goba bjo bonyenyane ):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Le mo nakong ye, dipotšišo tše tša boraditaba le tšona di hwetšagala ka di- mixin tša Sass:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Gape go na le dipotšišo tša boraditaba le di-mixin tša go nepiša karolo e tee ya bogolo bja skrine ka go šomiša bophara bja bonnyane le bjo bogolo bja ntlha ya go kgaotša.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Dipotšišo tše tša boraditaba di hwetšagala gape ka di-mixin tša Sass:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

Ka mo go swanago, dipotšišo tša boraditaba di ka akaretša bophara bjo bontši bja dintlha tša go kgaotša:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Sass mixin bakeng sa go nepiša tekanyo e swanago ya bogolo bja skrine e be e tla ba:

@include media-breakpoint-between(md, xl) { ... }

Z-tšhupamabaka

Several Bootstrap components utilize z-index, thepa ya CSS yeo e thušago go laola peakanyo ka go fana ka selekane sa boraro go beakanya dikagare. Re diriša tekanyo ya z-index ya go se fetoge ka go Bootstrap yeo e hlamilwego go beakanya go sepelasepela ka tshwanelo, di-tooltips le di-popovers, di-modal, le tše dingwe.

Ditekanyetšo tše tša godimo di thoma ka palo ya boithatelo, ye e phagamego le ye e itšego ka mo go lekanego go efoga ka mo go swanetšego dithulano. Re hloka sete e tlwaelegilego ya tše go ralala le dikarolo tša rena tša legato—di-tooltips, popovers, navbars, dropdowns, modals—e le gore re kgone go ba ba sa fetogego ka mo go kwagalago boitshwarong. Ga go na lebaka leo re bego re ka se diriše 100+ goba 500+.

Ga re kgothaletše go dira gore ditekanyetšo tše tša motho ka o tee ka o tee di be tša gago; ge e ba o ka fetoša e tee, go bonagala o swanetše go di fetoša ka moka.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Go swara mellwane ye e lekelelanago ka gare ga dikarolo (mohlala, dikonope le ditseno ka dihlopheng tša tsenyo), re šomiša z-indexdikelo tša fase tša dinomoro tše tee tša 1, 2, le 3tša maemo a go se fetoge, a go hover, le a go šoma. Ka hover/focus/active, re tliša elemente ye e itšego pele ka z-indexboleng bjo bo phagamego go bontšha mollwane wa bona godimo ga dielemente tša bana babo rena.