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 . Houers word gebruik om die inhoud daarin te bevat, op te vul en (soms) te sentreer. Alhoewel houers geneste kan word, benodig die meeste uitlegte nie 'n geneste houer nie.

Bootstrap kom met drie verskillende houers:

• .container, wat 'n max-widthby elke responsiewe breekpunt stel
• .container-fluid, wat width: 100%by alle breekpunte is
• .container-{breakpoint}, wat width: 100%tot die gespesifiseerde breekpunt is

Die tabel hieronder illustreer hoe elke houer s'n max-widthvergelyk met die oorspronklike .containeren .container-fluidoor elke breekpunt.

Sien hulle in aksie en vergelyk hulle in ons Grid-voorbeeld .

Alles-in-een

Ons verstekklas .containeris 'n responsiewe houer met vaste breedte, wat beteken dat dit max-widthby elke breekpunt verander.

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

Vloeistof

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

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

Responsief

Responsiewe houers is nuut in Bootstrap v4.4. Hulle laat jou toe om 'n klas te spesifiseer wat 100% wyd is totdat die gespesifiseerde breekpunt bereik word, waarna ons max-widths toepas vir elk van die hoër breekpunte. Byvoorbeeld, .container-smis 100% wyd om te begin totdat die smbreekpunt bereik is, waar dit sal opskaal met md, lg, en 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>

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

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

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

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

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.