Source

Ɔvaviu fɔ di Baybul

Komponent ɛn opshɔn fɔ layt ɔut yu Bootstrap projɛkt, inklud wrap kɔntena dɛn, wan pawaful grid sistem, wan fleksibul midia ɔbjɛkt, ɛn rispɔnsiv yutiliti klas dɛn.

Kɔntena dɛn

Kɔntinɛnt na di mɔs besik layout ɛlimɛnt na Bootstrap ɛn dɛn nid dɛn we yu de yuz wi difɔlt grid sistem . Pik frɔm wan kɔntena we de ansa, we gɛt fiks-wid (we min se i de max-widthchenj na ɛni brek pɔynt) ɔ we gɛt wata (we min se i de 100%wayd ɔltɛm).

Pan ɔl we dɛn kin nest kɔntena dɛn, bɔku pan di layout dɛn nɔ nid kɔntena we dɛn nest.

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

Yuz .container-fluidfɔ wan ful wit kɔntena, we de span di wan ol wit fɔ di viupɔt.

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

Brekpoint dɛn we de ansa

Bikɔs dɛn dɔn mek Bootstrap fɔ bi mobayl fɔs, wi de yuz wan anful midia kwɛstyɔn dɛn fɔ mek sɛnsful brekpɔynt dɛn fɔ wi layout ɛn intafays dɛn. Dɛn brekpɔynt ya mɔs bies pan di minimum viupɔt wit ɛn dɛn de alaw wi fɔ skel ɔp ɛlimɛnt dɛn as di viupɔt de chenj.

Bootstrap de yuz di fɔs midia kwɛstyɔn rɛnj dɛn—ɔ brekpɔynt dɛn—insay wi sɔs Sass fayl dɛn fɔ wi layout, grid sistem, ɛn kɔmpɔnɛnt dɛn.

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

Sins wi rayt wi sɔs CSS na Sass, ɔl wi midia kwɛstyɔn dɛn de via 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;
  }
}

Wan wan tɛm wi kin yuz midia kwɛstyɔn dɛn we kin go na di ɔda say (di skrin saiz we dɛn gi ɔ di smɔl wan ):

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

Notis se bikɔs brawza dɛn nɔ de sɔpɔt rɛnj kɔntɛks kwɛstyɔn dɛn naw , wi de wok rawnd di limiteshɔn dɛn fɔ min-ɛn max-prɛfiks ɛn viupɔt dɛn wit frakshɔn wid (we kin apin ɔnda sɔm kɔndishɔn dɛn na ay-dpi divays dɛn, fɔ ɛgzampul) bay we wi de yuz valyu dɛn wit ay prɛsishɔn fɔ dɛn kɔmpiashɔn dɛn ya .

Wans bak, dɛn midia kwɛstyɔn ya de bak bay 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;
  }
}

I gɛt bak midia kwɛstyɔn ɛn miksin fɔ tɔch wan singl sɛgmɛnt pan skrin saiz dɛn we de yuz di minim ɛn maksimal brekpɔynt wit.

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

Dɛn midia kwɛstyɔn ya de bak bay 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) { ... }

Semweso, midia kwɛstyɔn dɛn kin span bɔku bɔku brekpɔynt wit dɛn:

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

Di Sass mixin fɔ target di sem skrin saiz rɛnj go bi:

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

Z-indeks

Bɔku Bootstrap kɔmpɔnɛnt dɛn de yuz z-index, di CSS prɔpati we de ɛp fɔ kɔntrol layout bay we i de gi wan tɔd aks fɔ arenj kɔntinyu. Wi de yuz wan difɔlt z-indeks skel na Bootstrap we dɛn dɔn mek fɔ layt nevigishɔn, tultips ɛn popovers, modals, ɛn mɔ fayn fayn wan.

Dɛn ay valyu ya kin stat pan wan arbitri nɔmba, ay ɛn spɛshal inof fɔ ideally avɔyd kɔnflikt. Wi nid wan standad sɛt fɔ dɛn wan ya akɔdin to wi layt kɔmpɔnɛnt dɛn—tultips, popovers, navbars, dropdowns, modals—so wi kin rili kɔnsistɛnt insay di bihayvya dɛn. No rizin nɔ de fɔ mek wi nɔ bin fɔ dɔn yuz 100+ ɔ 500+.

Wi nɔ de ɛnkɔrej fɔ kɔstɔmayt dɛn wan wan valyu dɛn ya; if yu chenj wan, yu go mɔs nid fɔ chenj dɛn ɔl.

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

Fɔ handel ɔvalap bɔda dɛn insay kɔmpɔnɛnt dɛn (ɛgz., bɔtin ɛn input dɛn na input grup dɛn), wi de yuz lɔw singl dijit z-indexvalyu dɛn fɔ 1, 2, ɛn 3fɔ difɔlt, hova, ɛn aktiv stet dɛn. Na hover/focus/active, wi de bring wan patikyula elemɛnt to di fɔs wan wit wan ay z-indexvalyu fɔ sho dɛn bɔda oba di brɔda ɛn sista ɛlimɛnt dɛn.