Visió general

Components i opcions per dissenyar el vostre projecte Bootstrap, inclosos contenidors d'embolcall, un potent sistema de quadrícula, un objecte multimèdia flexible i classes d'utilitat sensibles.

Contenidors

Els contenidors són l'element de disseny més bàsic a Bootstrap i són necessaris quan s'utilitza el nostre sistema de graella predeterminat . Els contenidors s'utilitzen per contenir, empotrar i (de vegades) centrar el contingut dins d'ells. Tot i que els contenidors es poden imbricar, la majoria de dissenys no requereixen un contenidor imbricat.

Bootstrap inclou tres contenidors diferents:

• .container, que estableix un max-widtha cada punt d'interrupció de resposta
• .container-fluid, que es troba width: 100%en tots els punts d'interrupció
• .container-{breakpoint}, que és width: 100%fins al punt d'interrupció especificat

La taula següent il·lustra com es max-widthcompara cada contenidor amb l'original .containeri .container-fluiden cada punt d'interrupció.

Vegeu-los en acció i compareu-los al nostre exemple de quadrícula .

Tot en un

La nostra classe per defecte .containerés un contenidor sensible i d'amplada fixa, és a dir, els seus max-widthcanvis a cada punt d'interrupció.

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

Fluid

Utilitzeu .container-fluid-lo per a un contenidor d'amplada completa, que abasti tota l'amplada de la finestra gràfica.

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

Responent

Els contenidors responsius són nous a Bootstrap v4.4. Us permeten especificar una classe que tingui un 100% d'amplada fins que s'arribi al punt d'interrupció especificat, després del qual apliquem max-widths per a cadascun dels punts d'interrupció més alts. Per exemple, .container-smté un 100% d'amplada per començar fins smque s'assoleixi el punt d'interrupció, on augmentarà amb md, lg, i 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>

Punts d'interrupció sensibles

Com que Bootstrap està desenvolupat per ser mòbil primer, fem servir un bon grapat de consultes multimèdia per crear punts d'interrupció raonables per als nostres dissenys i interfícies. Aquests punts d'interrupció es basen principalment en amplades mínimes de la finestra gràfica i ens permeten augmentar l'escala dels elements a mesura que canvia la finestra gràfica.

Bootstrap utilitza principalment els intervals de consulta de mitjans següents (o punts d'interrupció) als nostres fitxers Sass d'origen per al nostre disseny, sistema de quadrícula i components.

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

Com que escrivim el nostre CSS d'origen a Sass, totes les nostres consultes multimèdia estan disponibles mitjançant mixins de Sass:

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

De tant en tant fem servir consultes multimèdia que van en l'altra direcció (la mida de pantalla donada o més petita ):

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

Una vegada més, aquestes consultes multimèdia també estan disponibles mitjançant 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;
  }
}

També hi ha consultes multimèdia i mixins per orientar un únic segment de mides de pantalla utilitzant l'amplada mínima i màxima dels punts d'interrupció.

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

Aquestes consultes de mitjans també estan disponibles mitjançant 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) { ... }

De la mateixa manera, les consultes multimèdia poden abastar diverses amplades de punt d'interrupció:

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

El mixin de Sass per orientar el mateix rang de mida de pantalla seria:

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

Índex Z

Diversos components Bootstrap utilitzen z-index, la propietat CSS que ajuda a controlar el disseny proporcionant un tercer eix per organitzar el contingut. Utilitzem una escala d'índex z predeterminada a Bootstrap que s'ha dissenyat per a la navegació en capes, consells sobre eines i popovers, modals i molt més.

Aquests valors més alts comencen en un nombre arbitrari, prou alt i específic per evitar conflictes idealment. Necessitem un conjunt estàndard d'aquests en els nostres components en capes: informació sobre eines, popovers, barres de navegació, menús desplegables, modalitats, perquè puguem ser raonablement coherents en els comportaments. No hi ha cap motiu pel qual no haguéssim pogut utilitzar 100+ o 500+.

No fomentem la personalització d'aquests valors individuals; si en canvieu un, probablement haureu de canviar-los tots.

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

Per gestionar les vores superposades dins dels components (p. ex., botons i entrades en grups d'entrada), utilitzem z-indexvalors baixos d'un dígit de 1, 2, i 3per als estats predeterminats, desplaçaments i actius. En passar el cursor/enfocar/actiu, portem un element particular al primer pla amb un z-indexvalor més alt per mostrar la seva vora sobre els elements germans.