Txheej txheem cej luam

Cheebtsam thiab cov kev xaiv rau kev tso tawm koj txoj haujlwm Bootstrap, suav nrog cov thawv ntim khoom, lub kaw lus muaj zog, cov khoom siv xov xwm hloov tau yooj yim, thiab cov chav kawm siv hluav taws xob.

Ntim

Cov thawv ntim khoom yog cov txheej txheem yooj yim tshaj plaws hauv Bootstrap thiab yuav tsum tau siv thaum siv peb lub default grid system . Xaiv los ntawm lub thawv teb, qhov dav dav (lub ntsiab lus nws cov max-widthkev hloov pauv ntawm txhua qhov chaw tawg) lossis dej dav dav (lub ntsiab lus nws 100%dav txhua lub sijhawm).

Thaum cov thawv tuaj yeem ua zes, feem ntau layouts tsis xav tau lub thawv nested.

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

Siv .container-fluidrau lub thawv dav dav, hla tag nrho qhov dav ntawm qhov chaw saib.

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

Teb cov ntsiab lus tawg

Txij li thaum Bootstrap yog tsim los ua mobile ua ntej, peb siv ib tug puv tes ntawm xov xwm queries los tsim kom paub meej breakpoints rau peb layouts thiab interfaces. Cov breakpoints no feem ntau yog raws li qhov tsawg kawg nkaus saib qhov dav dav thiab tso cai rau peb los ntsuas cov ntsiab lus raws li qhov pom qhov hloov pauv.

Bootstrap feem ntau siv cov lus nug hauv qab no - lossis cov ntsiab lus tawg - hauv peb cov ntaub ntawv Sass rau peb qhov kev teeb tsa, kab sib chaws, thiab cov khoom.

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

Txij li thaum peb sau peb qhov chaw CSS hauv Sass, tag nrho peb cov lus nug xov xwm muaj nyob ntawm 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;
  }
}

Peb qee zaus siv cov lus nug xov xwm uas mus rau lwm qhov kev taw qhia (qhov muab lub vijtsam loj lossis me dua ):

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

Ib zaug ntxiv, cov lus nug xov xwm no kuj muaj nyob ntawm Sass mixins:

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

Kuj tseem muaj cov lus nug xov xwm thiab cov mixins rau lub hom phiaj ib ntu ntawm qhov screen loj siv qhov tsawg kawg nkaus thiab qhov siab tshaj plaws breakpoint widths.

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

Cov lus nug xov xwm no kuj muaj nyob ntawm 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) { ... }

Ib yam li ntawd, cov lus nug xov xwm tuaj yeem nthuav dav ntau qhov dav dav:

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

Lub Sass mixin rau lub hom phiaj tib lub vijtsam loj yuav yog:

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

Z-index

Ob peb Bootstrap Cheebtsam siv z-index, CSS cov cuab yeej uas pab tswj kev teeb tsa los ntawm kev muab peb axis los npaj cov ntsiab lus. Peb siv lub default z-index scale nyob rau hauv Bootstrap uas yog tsim los kom zoo txheej navigation, tooltips thiab popovers, modals, thiab ntau dua.

Cov txiaj ntsig siab dua no pib ntawm tus lej tsis txaus ntseeg, siab thiab tshwj xeeb txaus kom tsis txhob muaj kev tsis sib haum xeeb. Peb xav tau cov txheej txheem txheej txheem ntawm cov no thoob plaws peb cov txheej txheem - cov lus qhia, popovers, navbars, dropdowns, modals - yog li peb tuaj yeem ua raws li kev coj cwj pwm. Tsis muaj laj thawj peb tsis tuaj yeem siv 100+ lossis 500+.

Peb tsis txhawb kom customization ntawm tus kheej qhov tseem ceeb no; Yog tias koj hloov ib qho, koj yuav xav tau hloov lawv txhua tus.

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

Txhawm rau tswj cov ciam teb sib tshooj hauv cov khoom (piv txwv li, cov nyees khawm thiab cov khoom siv hauv pawg tswv yim), peb siv tus lej qis tus lej z-indexntawm 1, 2, thiab 3rau lub neej ntawd, hover, thiab lub xeev nquag. Ntawm hover/focus/active, peb nqa ib lub ntsiab rau pem hauv ntej nrog tus nqi siab dua z-indexlos qhia lawv ciam teb ntawm cov kwv tij.