Kakaretso

Likarolo le likhetho tsa ho rala projeke ea hau ea Bootstrap, ho kenyelletsa le lijana tsa ho phuthela, sistimi e matla ea grid, ntho e tenyetsehang ea media, le litlelase tsa ts'ebeliso tse arabelang.

Lijana

Lits'oants'o ke karolo ea mantlha ea sebopeho ho Bootstrap 'me lia hlokahala ha u sebelisa sistimi ea rona ea kamehla . Khetha ho tsoa ho sets'oants'o se arabelang, se bophara bo tsitsitseng (ho bolelang max-widthliphetoho tsa sona sebakeng se seng le se seng) kapa bophara ba mokelikeli (ho bolelang hore se 100%sephara ka linako tsohle).

Le hoja lijana li ka etsoa sehlaha, boholo ba libopeho ha li hloke setshelo sa sehlaha.

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

Sebelisa .container-fluidbakeng sa setshelo sa bophara bo felletseng, se pharalla ka bophara ba sebaka sa pono.

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

Li-breakpoints tse arabelang

Kaha Bootstrap e ntlafalitsoe hore e be selefouno pele, re sebelisa lipotso tse seng kae tsa mecha ea litaba ho theha likheo tse utloahalang bakeng sa meralo le lihokelo tsa rona. Hangata li-breakpoints tsena li ipapisitse le bophara ba bonyane ba sebaka sa pono, 'me li re lumella ho phahamisa likarolo ha sebaka sa pono se fetoha.

Bootstrap haholo-holo e sebelisa mefuta e latelang ea lipotso tsa mecha ea litaba-kapa li-breakpoints-mohloling oa rona oa lifaele tsa Sass bakeng sa sebopeho sa rona, tsamaiso ea grid, le likaroloana.

// 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) { ... }

Kaha re ngola mohloli oa rona oa CSS ho Sass, lipotso tsohle tsa rona tsa media li fumaneha ka li-mixins tsa 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 linako tse ling re sebelisa lipotso tsa media tse eang lehlakoreng le leng (saese e fanoeng skrineng kapa e nyane ):

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

Hape, lipotso tsena tsa media li fumaneha hape ka li-mixins tsa 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;
  }
}

Ho boetse ho na le lipotso tsa mecha ea litaba le li-mixins bakeng sa ho shebana le karolo e le 'ngoe ea boholo ba skrine ho sebelisa bonyane le bophara bo phahameng ka ho fetisisa.

// 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) { ... }

Lipotso tsena tsa media li fumaneha hape ka li-mixins tsa 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 mokhoa o ts'oanang, lipotso tsa media li ka akaretsa bophara ba libaka tse ngata:

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

Motsoako oa Sass bakeng sa ho shebana le boholo bo lekanang ba skrine e ka ba:

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

Z-index

Several Bootstrap components utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used 100+ or 500+.

We don’t encourage customization of these individual values; should you change one, you likely need to change them all.

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

Ho sebetsana le meeli e feteletsanang ka har'a likarolo (mohlala, likonopo le lintho tse kenang ka har'a lihlopha tsa ho kenya), re sebelisa boleng bo tlase ba nomoro e le 'ngoe z-indexea 1, 2, le 3bakeng sa maemo a kamehla, hover, le a active states. Ho hover/focus/active, re tlisa ntho e itseng ho ea pele ka z-indexboleng bo holimo ho bonts'a moeli oa bona holim'a likarolo tsa banab'abo.