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 se sephara se felletseng, se nkang bophara bohle 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 boholo ba khefu.

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

Likarolo tse 'maloa tsa Bootstrap li sebelisa z-index, thepa ea CSS e thusang ho laola sebopeho ka ho fana ka axis ea boraro ho hlophisa litaba. Re sebelisa sekala sa kamehla sa z-index ho Bootstrap se etselitsoeng hore se tsamaee hantle, lisebelisoa tsa lisebelisoa le popovers, modals, le tse ling.

Lintlha tsena tse holimo li qala ka palo e sa reroang, e phahameng le e tobileng ho qoba likhohlano. Re hloka sete e tloaelehileng ea lintho tsena ho pholletsa le likarolo tsa rona tse nang le lisebelisoa - lithulusi, popovers, navbar, dropdowns, modals - e le hore re ka tsitsa boitšoarong. Ha ho na lebaka leo re ka beng re sa ka ra sebelisa 100+ kapa 500+.

Ha re khothaletse ho fetola litekanyetso tsena tsa motho ka mong; Haeba u ka fetola e le 'ngoe, mohlomong u tla hloka ho li fetola kaofela.

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