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 . Kontenè yo itilize pou genyen, pad, ak (pafwa) sant kontni an nan yo. Pandan ke resipyan yo ka enbrike, pifò layouts pa mande pou yon veso anbrike.

Bootstrap vini ak twa resipyan diferan:

• .container, ki mete yon max-widthnan chak pwen rupture reponn
• .container-fluid, ki se width: 100%nan tout breakpoints
• .container-{breakpoint}, ki se width: 100%jiska pwen rupture espesifye a

Tablo ki anba a montre kouman chak veso yo max-widthkonpare ak orijinal la .containerak .container-fluidatravè chak pwen rupture.

Gade yo an aksyon epi konpare yo nan egzanp Grid nou an .

Tout-an-yon sèl

Klas defo nou .containeran se yon veso ki reponn ak lajè fiks, sa vle di max-widthchanjman li yo nan chak pwen rupture.

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

Likid

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

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

Reponn

Kontenè ki reponn yo nouvo nan Bootstrap v4.4. Yo pèmèt ou presize yon klas ki se 100% lajè jiskaske pwen rupture espesifye a rive, apre sa nou aplike max-widths pou chak nan pwen rupture ki pi wo yo. Pa egzanp, .container-smse 100% lajè pou kòmanse jiskaske pwen smrupture a rive, kote li pral monte ak md, lg, ak 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>

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

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.