Nkatsakanyo

Swiphemu na swihlawulekisi swo veka phurojeke ya wena ya Bootstrap, ku katsa na swikhomela-ndhawu swo phutsela, sisiteme ya matimba ya giridi, nchumu wa midiya lowu cinca-cincaka, na titlilasi ta vukorhokeri leti hlamulaka.

Swikhomela-ndhawu

Tikhontheyina i xiphemu xa xisekelo xa layout eka Bootstrap naswona swa laveka loko u tirhisa sisiteme ya hina ya gridi ya ntolovelo . Hlawula eka xigwitsirisi lexi hlamulaka, xa fixed-width (leswivulaka ku max-widthcinca ka xona eka breakpoint yin’wana na yin’wana) kumbe fluid-width (leswivulaka leswaku xi 100%anama nkarhi hinkwawo).

Hambi leswi swikhomela-ndhawu swi nga ha pfaleriwaka, swivumbeko swo tala a swi lavi xikhomela-ndhawu lexi pfanganisiweke.

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

Tirhisa .container-fluideka xigwitsirisi xa ku anama loku heleleke, lexi hlanganisaka ku anama hinkwako ka xivono.

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

Ku tshoveka loku hlamulaka

Tanihi leswi Bootstrap yi tumbuluxiweke ku va mobile ro sungula, hi tirhisa swivutiso swi nga ri swingani swa midiya ku tumbuluxa tindhawu to wisa leti twisisekaka eka swivumbeko swa hina na swihlanganisi. Swiphemu leswi swi seketeriwa ngopfu eka ku anama ka xivono xa le hansi naswona swi hi pfumelela ku ringanisa swiaki loko xivono xi cinca.

Bootstrap ngopfu-ngopfu yi tirhisa swiyenge leswi landzelaka swa swivutiso swa midiya—kumbe tindhawu to wisa—eka tifayela ta hina ta xihlovo xa Sass eka layout ya hina, sisiteme ya gridi, na swiphemu.

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

Leswi hi tsalaka CSS ya hina ya xihlovo eka Sass, swivutiso swa hina hinkwaswo swa vuhangalasi bya mahungu swi kumeka hi ku tirhisa ti mixins ta 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;
  }
}

Minkarhi yin’wana hi tirhisa swivutiso swa swihangalasamahungu leswi yaka eka tlhelo rin’wana (sayizi ya xikirini leyi nyikiweke kumbe leyitsongo ):

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

Nakambe, swivutiso leswi swa vuhangalasi bya mahungu swi tlhela swi kumeka hi ku tirhisa ti-Mixin ta 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;
  }
}

Ku tlhela ku va na swivutiso swa vuhangalasi bya mahungu na ti-mixin to kongomisa eka xiphemu xin’we xa vukulu bya xikirini hi ku tirhisa ku anama ka le hansi na lokukulu ka breakpoint.

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

Swivutiso leswi swa vuhangalasi bya mahungu swi tlhela swi kumeka hi ku tirhisa ti-Mixin ta 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) { ... }

Hilaha ku fanaka, swivutiso swa midiya swi nga ha hlanganisa ku anama ko tala ka breakpoint:

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

Sass mixin yo kongomisa eka nxaxamelo wa sayizi ya xikirini leyi fanaka yi ta va:

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

Xikombo xa Z

Swiphemu swo hlayanyana swa Bootstrap swi tirhisa z-index, nhundzu ya CSS leyi pfunaka ku lawula layout hi ku nyika axis ya vunharhu ku hlela nhundzu. Hi tirhisa xikalo xa z-index xa ntolovelo eka Bootstrap lexi endleriweke ku leya kahle ku famba-famba, switsundzuxo swa switirhisiwa na ti-popover, ti-modal, na swin’wana.

Mimpimo leyi ya le henhla yi sungula eka nhlayo ya ku tihlawulela, ya le henhla naswona yi kongomile ku ringana ku papalata ku lwisana hi ndlela leyinene. Hi lava sete ya ntolovelo ya leswi ku tsemakanya swiphemu swa hina leswi nga ni swiphemu—switsundzuxo swa switirhisiwa, ti-popover, ti-navbar, ti-dropdown, ti-modal—leswaku hi ta kota ku va lava nga cincekiki hi ndlela leyi twalaka eka mahanyelo. A ku na xivangelo xa leswaku a hi nga ta tirhisa 100+ kumbe 500+.

A hi khutazi ku cinca-cinca ka mimpimanyeto leyi ya munhu hi xiyexe; loko u fanele u cinca yin’we, swi nga ha endleka u fanele u ti cinca hinkwato.

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

Ku khoma mindzilakano leyi hlanganisaka endzeni ka swiphemu (xikombiso, swikomba-nkarhi na swingheniso eka mintlawa ya swingheniso), hi tirhisa z-indexmimpimo ya le hansi ya dijiti yin’we ya 1, 2, na ya swiyimo swa 3xiviri, ku hover, na leswi tirhaka. Eka hover/focus/active, hi tisa elemente yo karhi emahlweni hi z-indexnkoka wa le henhla ku kombisa ndzilakano wa vona ehenhla ka swiaki swa vamakwavo.