Panangkita iti pakabuklan

Dagiti paset ken dagiti pagpilian para iti panangiplastar ti proyektom ti Bootstrap, a mairaman dagiti pagkargaan ti panagbalkot, ti nabileg a sistema ti grid, ti nalaka a maibagay a banag ti media, ken dagiti makasungbat a klase ti utilidad.

Dagiti Pagkargaan

Dagiti pagkargaan ket isu dagiti kangrunaan nga elemento ti layout iti Bootstrap ken kasapulan no agus-usar ti default a sistematayo ti grid . Pilien manipud iti makasungbat, naikeddeng-kalawa a pagkargaan (kayatna a sawen dagiti max-widthpanagbalbaliwna iti tunggal breakpoint) wenno pluido-kalawa (kayatna a sawen a 100%nalawa dayta iti amin a tiempo).

Bayat a dagiti pagkargaan ket mabalin a mai-nest, kaaduan kadagiti layout ket saan a kasapulan ti naisanglad a pagkargaan.

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

Usaren .container-fluidpara iti naan-anay a kalawa a pagkargaan, a mangsaklaw ti sibubukel a kalawa ti viewport.

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

Dagiti makasungbat a breakpoint

Gapu ta ti Bootstrap ket naaramid tapno umuna a mobile, agus-usarkami iti sumagmamano a panagsaludsod ti media tapno mangpartuat kadagiti nainsiriban a breakpoint para kadagiti layout ken interfacemi. Dagitoy a breakpoint ket kaaduan a naibatay kadagiti kabassitan a kalawa ti viewport ken mangipalubos kadakami a mang-scale kadagiti elemento bayat nga agbaliw ti viewport.

Ti Bootstrap ket nangruna nga agus-usar kadagiti sumaganad a sakop ti panagsaludsod ti media—wenno dagiti breakpoint—kadagiti taudan a Sass a papelestayo para iti layouttayo, sistema ti grid, ken dagiti paset.

// Extra small devices (portrait phones, less than 576px)
// No media query 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) { ... }

Gapu ta isuratmi ti taudan a CSSmi iti Sass, amin a saludsodmi iti media ket magun-od babaen ti Sass mixins:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Sagpaminsan nga agusarkami kadagiti saludsod ti media a mapan iti sabali a direksion (ti naited a kadakkel ti iskrin wenno basbassit ):

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

Maminsan manen, dagitoy a saludsod ti media ket magun-od pay babaen dagiti Sass mixins:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

Adda pay dagiti panagsaludsod ti media ken dagiti mixin para iti panangpuntiria ti maymaysa a paset dagiti kadakkel ti iskrin babaen ti panagusar kadagiti kabassitan ken kangatuan a kalawa ti 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) { ... }

Dagitoy a saludsod ti media ket magun-od pay babaen dagiti Sass mixins:

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

Kasta met, dagiti panagsaludsod ti media ket mabalin a mangsaklaw kadagiti adu a kalawa ti breakpoint:

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

Ti Sass mixin para iti panangpuntiria iti isu met laeng a sakop ti kadakkel ti iskrin ket isu koma:

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

Z-indeks

Sumagmamano a paset ti Bootstrap ket agus-usar z-indexti , ti tagikua ti CSS a tumultulong a mangtengngel ti layout babaen ti panangipaay ti maikatlo nga ehe tapno mangurnos ti linaon. Usarenmi ti default a z-index a sukog iti Bootstrap a nadisenio tapno umno ti panag-layer ti nabigasion, toltips ken popovers, modals, ken dadduma pay.

Dagitoy a nangatngato a pateg ket mangrugi iti arbitrario a bilang, nangato ken espesipiko nga umdas tapno nasayaat a maliklikan dagiti panagsusuppiat. Kasapulantayo ti maysa a pagalagadan a grupo dagitoy iti ballasiw dagiti naisaad a pasettayo—tooltips, popovers, navbars, dropdowns, modals—tapno mabalintayo ti agbalin a nainkalintegan a maitunos kadagiti kababalin. Awan ti rason a dimi koma nausar ti 100+ wenno 500+.

Saanmi nga iparegta ti panangpasayaat kadagitoy nga indibidual a pateg; no baliwam ti maysa, masapul la ketdi a baliwam amin dagitoy.

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

Tapno mangasikaso kadagiti agtuon a beddeng iti uneg dagiti paset (kas pagarigan, dagiti buton ken dagiti input kadagiti grupo ti input), agus-usarkami kadagiti nababa a maymaysa a digit a z-indexpateg ti 1, 2, ken 3para kadagiti default, hover, ken aktibo nga estado. Iti hover/focus/active, iyegmi ti partikular nga elemento iti sango nga addaan iti nangatngato a z-indexpateg tapno maipakita ti beddengda kadagiti agkakabsat nga elemento.