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 . Dagiti pagkargaan ket mausar a manglaon, mangpadpad, ken (no dadduma) mangisentro ti linaon iti uneg dagitoy. Bayat a dagiti pagkargaan ket mabalin a mai-nest, kaaduan kadagiti layout ket saan a kasapulan ti naisanglad a pagkargaan.

Ti Bootstrap ket addaan iti tallo a nagduduma a container:

• .container, a mangikeddeng ti a max-widthiti tunggal sumungbat a breakpoint
• .container-fluid, nga adda width: 100%iti amin a breakpoint
• .container-{breakpoint}, nga width: 100%agingga iti naikeddeng a breakpoint

Ti lamisaan iti baba ket mangiladawan no kasano a tunggal container's max-widthket maidilig iti orihinal .containerken .container-fluiditi ballasiw ti tunggal breakpoint.

Kitaen dagitoy nga agtigtignay ken idilig dagitoy iti pagarigantayo iti Grid .

Amin-iti-maysa

Ti default .containera klasemi ket maysa a makasungbat, naikeddeng-kalawa a pagkargaan, kayatna a sawen dagiti max-widthpanagbalbaliwna iti tunggal maysa a breakpoint.

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

Likido

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

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

Nasungbatan

Dagiti makasungbat a pagkargaan ket baro iti Bootstrap v4.4. Dagitoy ket mangipalubos kenka a mangibaga ti maysa a klase a 100% a kalawa aginggana ti naikeddeng a puntos ti panagburak ket madanon, kalpasanna ket iyaplikarmi max-widthti s para iti tunggal maysa kadagiti nangatngato a puntos ti panagburak. Kas pagarigan, .container-smket 100% ti kalawana tapno mangrugi aginggana ti smbreakpoint ket madanon, a sadiay ket ag-scale up babaen ti md, lg, ken 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>

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

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

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

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

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