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 . Swibye swi tirhisiwa ku khoma, ku pad, na (minkarhi yin’wana) ku hlanganisa leswi nga endzeni ka swona. Hambi leswi swikhomela-ndhawu swi nga ha pfaleriwaka, swivumbeko swo tala a swi lavi xikhomela-ndhawu lexi pfanganisiweke.

Bootstrap yi ta na swibye swinharhu swo hambana:

• .container, leyi vekaka a max-widtheka ndhawu yin’wana ni yin’wana yo wisa leyi hlamulaka
• .container-fluid, leyi nga width: 100%eka tindhawu hinkwato to tshoveka
• .container-{breakpoint}, ku nga ku width: 100%fikela eka ndhawu leyi boxiweke yo tshoveka

Tafula leri nga laha hansi ri kombisa hilaha container yin’wana na yin’wana yi max-widthpimanisiwaka hakona na ya masungulo .containerna .container-fluidku tsemakanya breakpoint yin’wana na yin’wana.

Va vona va ri karhi va tirha u va pimanisa eka xikombiso xa hina xa Gridi .

Hinkwaswo-eka-xin’we

Tlilasi ya hina ya ntolovelo .containeri xikhomela-ndhawu lexi hlamulaka, xa ku anama loku nga cinciki, leswi vulaka ku max-widthcinca ka xona eka ndhawu yin’wana ni yin’wana yo tshoveka.

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

Xihalaki

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

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

Ku hlamula

Swikhomela-ndhawu leswi hlamulaka i swintshwa eka Bootstrap v4.4. Va ku pfumelela ku boxa tlilasi leyi nga 100% yo anama ku kondza ku fika ndhawu yo tsema leyi boxiweke, endzhaku ka sweswo hi tirhisa max-widths eka yin’wana na yin’wana ya tindhawu to tsema ta le henhla. Xikombiso, .container-smyi anama hi 100% ku sungula ku kondza ku fika eka smbreakpoint, laha yi nga ta ringanisa hi md, lg, na 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>

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.