Source

Apèsi sou lekòl la

Konpozan ak opsyon pou mete pwojè Bootstrap ou a, ki gen ladan resipyan anbalaj, yon sistèm griy pwisan, yon objè medya fleksib, ak klas sèvis piblik ki reponn.

Kontenè

Kontenè yo se eleman layout ki pi fondamantal nan Bootstrap epi yo obligatwa lè w ap itilize sistèm griy default nou an . Chwazi nan yon veso ki reponn ak lajè fiks (sa vle di max-widthchanjman li yo nan chak pwen rupture) oswa lajè likid (sa vle di li 100%lajè tout tan).

Pandan ke resipyan yo ka enbrike, pifò layouts pa mande pou yon veso anbrike.

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

Itilize .container-fluidpou yon veso plen lajè, ki kouvri tout lajè fenèt la.

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

Repons ki reponn

Depi Bootstrap devlope pou li mobil an premye, nou itilize yon ti ponyen demann medya yo pou kreye pwen rupture sansib pou layouts ak interfaces nou yo. Pwen rupture sa yo sitou baze sou lajè minimòm de vi yo epi yo pèmèt nou echèl eleman pandan vi a ap chanje.

Bootstrap prensipalman itilize seri medya rechèch sa yo—oswa pwen breakpoints—nan fichye sous Sass nou yo pou Layout nou an, sistèm kadriyaj nou an, ak konpozan.

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

Depi nou ekri CSS sous nou an nan Sass, tout demann medya nou yo disponib atravè 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;
  }
}

Nou itilize detanzantan rekèt medya ki ale nan lòt direksyon (gwosè ekran yo bay la oswa pi piti ):

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

Remake byen ke piske navigatè yo pa sipòte kounye a rechèch kontèks ranje , nou travay sou limit yo min-ak max-prefiks ak fenèt yo ak lajè fraksyon (ki ka rive nan sèten kondisyon sou aparèy ki wo-dpi, pou egzanp) lè nou itilize valè ak pi gwo presizyon pou konparezon sa yo. .

Yon fwa ankò, demann medya sa yo disponib tou atravè 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;
  }
}

Genyen tou demann medya ak mixin pou vize yon sèl segman nan gwosè ekran lè l sèvi avèk lajè minimòm ak maksimòm pwen 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) { ... }

Rekèt medya sa yo disponib tou atravè 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) { ... }

Menm jan an tou, demann medya yo ka kouvri plizyè lajè breakpoint:

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

Mixin Sass la pou vize menm seri gwosè ekran an ta dwe:

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

Z-endèks

Plizyè konpozan Bootstrap itilize z-index, pwopriyete CSS ki ede kontwole layout lè yo bay yon twazyèm aks pou fè aranjman pou kontni. Nou itilize yon echèl z-index default nan Bootstrap ki fèt pou byen kouch navigasyon, konsèy zouti ak popovers, modal, ak plis ankò.

Valè sa yo ki pi wo kòmanse nan yon nimewo abitrè, wo ak espesifik ase yo depreferans evite konfli. Nou bezwen yon seri estanda sa yo atravè konpozan kouch nou yo - konsèy zouti, popovers, navbars, dropdowns, modal - pou nou ka rezonab konsistan nan konpòtman yo. Pa gen okenn rezon nou pa t 'kapab itilize 100+ oswa 500+.

Nou pa ankouraje personnalisation de valè endividyèl sa yo; ta dwe chanje youn, ou gen anpil chans bezwen chanje yo tout.

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

Pou jere fwontyè ki sipèpoze nan eleman yo (egzanp, bouton ak antre nan gwoup antre), nou itilize z-indexvalè ki ba yon sèl chif nan 1, 2, ak 3pou default, hover, ak eta aktif. Sou hover/konsantre/aktif, nou pote yon eleman patikilye nan devan ak yon z-indexvalè ki pi wo pou montre fwontyè yo sou eleman frè ak sè yo.