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 . Lits'oants'o li sebelisetsoa ho kenya, pad, le (ka linako tse ling) ho beha litaba tse ka hare ho tsona. Le hoja lijana li ka etsoa sehlaha, boholo ba libopeho ha li hloke setshelo sa sehlaha.

Bootstrap e tla le lijana tse tharo tse fapaneng:

• .container, e behang sebaka max-widthse seng le se seng se arabelang
• .container-fluid, e leng width: 100%likheo tsohle
• .container-{breakpoint}, e leng width: 100%ho fihlela sebaka se boletsoeng

Tafole e ka tlase e bonts'a hore na sets'oants'o ka seng se max-widthbapisoa joang le sa mantlha .containerle .container-fluidho pholletsa le sebaka se seng le se seng.

Li bone li sebetsa 'me u li bapise mohlaleng oa rona oa Grid .

Tsohle ka bonngwe

Sehlopha sa rona sa kamehla .containerke setshelo se arabelang, se bophara bo tsitsitseng, ho bolelang max-widthliphetoho tsa sona sebakeng se seng le se seng.

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

Mokelikeli

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

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

Ea arabelang

Lijana tse arabelang li ncha ho Bootstrap v4.4. Ba u lumella ho hlakisa sehlopha se bophara ba 100% ho fihlela sebaka se boletsoeng se fihletsoe, ka mor'a moo re sebelisa max-widths bakeng sa sebaka se seng le se seng se phahameng. Mohlala, .container-smke bophara ba 100% ho qala ho fihlela sebaka sa smphomolo se fihletsoe, moo se tla nyoloha 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>

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

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.