Oorsig

Komponente en opsies vir die uitleg van jou Bootstrap-projek, insluitend die toedraai van houers, 'n kragtige roosterstelsel, 'n buigsame media-voorwerp en responsiewe nutsklasse.

Houers

Houers is die mees basiese uitlegelement in Bootstrap en word vereis wanneer ons ons verstekroosterstelsel gebruik . Kies uit 'n reageerbare houer met vaste breedte (wat beteken dat dit max-widthby elke breekpunt verander) of vloeistofwydte (wat beteken dat dit 100%heeltyd wyd is).

Alhoewel houers geneste kan word, benodig die meeste uitlegte nie 'n geneste houer nie.

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

Gebruik .container-fluidvir 'n volle breedte houer wat oor die hele breedte van die uitsigpoort strek.

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

Responsiewe breekpunte

Aangesien Bootstrap ontwikkel is om eerstens mobiel te wees, gebruik ons ​​'n handvol medianavrae om sinvolle breekpunte vir ons uitlegte en koppelvlakke te skep. Hierdie breekpunte is meestal gebaseer op minimum viewport-wydtes en stel ons in staat om elemente op te skaal soos die viewport verander.

Bootstrap gebruik hoofsaaklik die volgende medianavraagreekse—of breekpunte—in ons bron Sass-lêers vir ons uitleg, roosterstelsel en komponente.

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

Aangesien ons ons bron-CSS in Sass skryf, is al ons media-navrae beskikbaar via Sass-mengsels:

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

Ons gebruik soms medianavrae wat in die ander rigting gaan (die gegewe skermgrootte of kleiner ):

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

Weereens, hierdie media-navrae is ook beskikbaar via Sass mixins:

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

Daar is ook medianavrae en -mengings om 'n enkele segment van skermgroottes te rig deur die minimum en maksimum breekpuntwydtes te gebruik.

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

Hierdie medianavrae is ook beskikbaar via 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) { ... }

Net so kan medianavrae oor verskeie breekpuntwydtes strek:

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

Die Sass-mengsel vir die teiken van dieselfde skermgroottereeks sou wees:

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

Z-indeks

Verskeie Bootstrap-komponente gebruik z-index, die CSS-eienskap wat help om uitleg te beheer deur 'n derde as te verskaf om inhoud te rangskik. Ons gebruik 'n verstek z-indeks skaal in Bootstrap wat ontwerp is om behoorlik laag navigasie, gereedskapwenke en popovers, modale, en meer.

Hierdie hoër waardes begin by 'n arbitrêre getal, hoog en spesifiek genoeg om konflik te vermy. Ons benodig 'n standaardstel hiervan oor ons gelaagde komponente - nutswenke, popovers, navigasiebalke, dropdowns, modale - sodat ons redelik konsekwent in die gedrag kan wees. Daar is geen rede waarom ons nie 100+ of 500+ kon gebruik het nie.

Ons moedig nie aanpassing van hierdie individuele waardes aan nie; sou jy een verander, moet jy hulle waarskynlik almal verander.

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

Om oorvleuelende grense binne komponente (bv. knoppies en invoere in invoergroepe) te hanteer, gebruik ons ​​lae enkelsyferwaardes z-indexvan 1, 2, en 3vir verstek-, sweef- en aktiewe toestande. Op sweef/fokus/aktief bring ons 'n bepaalde element na vore met 'n hoër z-indexwaarde om hul grens oor die broer en suster-elemente te wys.