Panoramica
Componenti e opzioni per la struttura del tuo progetto Bootstrap, inclusi contenitori di wrapping, un potente sistema di griglia, un oggetto multimediale flessibile e classi di utilità reattive.
I contenitori sono l'elemento di layout più semplice in Bootstrap e sono necessari quando si utilizza il nostro sistema di griglia predefinito . Scegli tra un contenitore reattivo a larghezza fissa (ovvero le sue max-width
modifiche a ogni punto di interruzione) o fluido (il che significa che è 100%
sempre ampio).
Sebbene i contenitori possano essere nidificati, la maggior parte dei layout non richiede un contenitore nidificato.
Utilizzare .container-fluid
per un contenitore a larghezza intera, che copre l'intera larghezza della finestra.
Poiché Bootstrap è stato sviluppato per essere mobile first, utilizziamo una manciata di media query per creare punti di interruzione sensati per i nostri layout e interfacce. Questi punti di interruzione si basano principalmente su larghezze minime della vista e ci consentono di aumentare la scala degli elementi man mano che la vista cambia.
Bootstrap utilizza principalmente i seguenti intervalli di query multimediali, o punti di interruzione, nei nostri file Sass di origine per il nostro layout, sistema di griglia e componenti.
Poiché scriviamo il nostro CSS sorgente in Sass, tutte le nostre media query sono disponibili tramite Sass mixin:
We occasionally use media queries that go in the other direction (the given screen size or smaller):
Note that since browsers do not currently support range context queries, we work around the limitations of min-
and max-
prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.
Once again, these media queries are also available via Sass mixins:
There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
These media queries are also available via Sass mixins:
Similarly, media queries may span multiple breakpoint widths:
The Sass mixin for targeting the same screen size range would be:
Several Bootstrap components utilize z-index
, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.
These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used 100
+ or 500
+.
We don’t encourage customization of these individual values; should you change one, you likely need to change them all.
Per gestire i bordi sovrapposti all'interno dei componenti (ad es. pulsanti e input nei gruppi di input), utilizziamo z-index
valori bassi a una cifra di 1
, 2
, e 3
per gli stati predefiniti, al passaggio del mouse e attivi. Al passaggio del mouse/focus/attivo, portiamo in primo piano un elemento particolare con un z-index
valore più alto per mostrare il loro confine sugli elementi fratelli.