Bootstrap è basato su griglie, layout e componenti reattivi a 12 colonne.
Bootstrap fa uso di alcuni elementi HTML e proprietà CSS che richiedono l'uso del doctype HTML5. Includilo all'inizio di tutti i tuoi progetti.
- <!DOCTYPE html>
- < lingua html = "it" >
- ...
- </html>
Bootstrap imposta la visualizzazione globale di base, la tipografia e gli stili di collegamento. Nello specifico noi:
margin
sul corpobackground-color: white;
ilbody
@baseFontFamily
, @baseFontSize
, e @baseLineHeight
come base tipografica@linkColor
e applica le sottolineature del collegamento solo su:hover
Questi stili possono essere trovati all'interno di scaffolding.less .
Con Bootstrap 2, il vecchio blocco di ripristino è stato eliminato a favore di Normalize.css , un progetto di Nicolas Gallagher che alimenta anche HTML5 Boilerplate . Sebbene utilizziamo gran parte di Normalize all'interno del nostro reset.less , abbiamo rimosso alcuni elementi specifici per Bootstrap.
Il sistema di griglia Bootstrap predefinito utilizza 12 colonne , creando un contenitore largo 940 pixel senza funzionalità reattive abilitate. Con l'aggiunta del file CSS reattivo, la griglia si adatta per essere larga 724px e 1170px a seconda del viewport. Al di sotto dei viewport di 767px, le colonne diventano fluide e si impilano verticalmente.
Per un semplice layout a due colonne, crea .row
e aggiungi il numero appropriato di .span*
colonne. Poiché si tratta di una griglia a 12 colonne, ciascuna .span*
si estende su un numero di quelle 12 colonne e dovrebbe sempre sommare fino a 12 per ogni riga (o il numero di colonne nel genitore).
- < classe div = "riga" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Dato questo esempio, abbiamo .span4
e .span8
, ottenendo 12 colonne totali e una riga completa.
Sposta le colonne a destra usando le .offset*
classi. Ogni classe aumenta il margine sinistro di una colonna di un'intera colonna. Ad esempio, .offset4
si sposta .span4
su quattro colonne.
- < classe div = "riga" >
- <div class = "span4" > ... </div>
- <div class = "span3 offset2" > ... </div>
- </div>
Per annidare i tuoi contenuti con la griglia predefinita, aggiungi un nuovo .row
e un insieme di colonne all'interno di una colonna .span*
esistente . .span*
Le righe nidificate dovrebbero includere un insieme di colonne che si sommano al numero di colonne del relativo genitore.
- < classe div = "riga" >
- < classe div = "span9" >
- Colonna di livello 1
- < classe div = "riga" >
- <div class = "span6" > Livello 2 </div>
- <div class = "span3" > Livello 2 </div>
- </div>
- </div>
- </div>
Il sistema a griglia fluida utilizza le percentuali anziché i pixel per le larghezze delle colonne. Ha le stesse capacità di risposta del nostro sistema a griglia fissa, garantendo proporzioni adeguate per risoluzioni e dispositivi chiave dello schermo.
Rendi "fluida" qualsiasi riga cambiando .row
in .row-fluid
. Le classi di colonne rimangono esattamente le stesse, rendendo facile passare da griglie fisse a griglie fluide.
- < classe div = "fluido riga" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Funziona allo stesso modo dell'offset del sistema a griglia fissa: aggiungi .offset*
a qualsiasi colonna per compensare di altrettante colonne.
- < classe div = "fluido riga" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset2" > ... </div>
- </div>
La nidificazione con le griglie fluide è leggermente diversa: il numero di colonne nidificate non deve corrispondere al numero di colonne del genitore. Al contrario, ogni livello di colonne nidificate viene reimpostato perché ogni riga occupa il 100% della colonna padre.
- < classe div = "fluido riga" >
- < classe div = "span12" >
- Livello 1 della colonna
- < classe div = "fluido riga" >
- <div class = "span6" > Livello 2 </div>
- <div class = "span6" > Livello 2 </div>
- </div>
- </div>
- </div>
Fornisce un layout comune a larghezza fissa (e facoltativamente reattivo) con solo <div class="container">
richiesto.
- <corpo>
- < classe div = "contenitore" >
- ...
- </div>
- </corpo>
Crea una pagina fluida a due colonne con <div class="container-fluid">
—ottimo per applicazioni e documenti.
- < classe div = "fluido contenitore" >
- < classe div = "fluido riga" >
- < classe div = "span2" >
- <!--Contenuto della barra laterale-->
- </div>
- < classe div = "span10" >
- <!--Contenuto del corpo-->
- </div>
- </div>
- </div>
Attiva il CSS reattivo nel tuo progetto includendo il meta tag appropriato e un foglio di stile aggiuntivo all'interno <head>
del tuo documento. Se hai compilato Bootstrap dalla pagina Personalizza, devi solo includere il meta tag.
- <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
- <link href = "assets/css/bootstrap-responsive.css" rel = "foglio di stile" >
Dritta! Bootstrap non include funzionalità reattive per impostazione predefinita in questo momento poiché non tutto deve essere reattivo. Invece di incoraggiare gli sviluppatori a rimuovere questa funzione, riteniamo che sia meglio abilitarla secondo necessità.
Le media query consentono CSS personalizzati in base a una serie di condizioni (rapporti, larghezze, tipo di visualizzazione, ecc.), ma di solito si concentra su min-width
e max-width
.
Usa le media query in modo responsabile e solo come inizio per il tuo pubblico mobile. Per progetti più grandi, considera basi di codice dedicate e non livelli di query multimediali.
Bootstrap supporta una manciata di media query in un unico file per rendere i tuoi progetti più appropriati su diversi dispositivi e risoluzioni dello schermo. Ecco cosa è incluso:
Etichetta | Larghezza del layout | Larghezza della colonna | Larghezza della grondaia |
---|---|---|---|
Ampio display | 1200px e oltre | 70px | 30px |
Predefinito | 980px e oltre | 60px | 20px |
Compresse per ritratti | 768px e oltre | 42px | 20px |
Da telefoni a tablet | 767px e inferiori | Colonne fluide, nessuna larghezza fissa | |
Telefoni | 480px e inferiori | Colonne fluide, nessuna larghezza fissa |
- /* Desktop grande */
- @media ( larghezza minima : 1200px ) { ... } _
- /* Tablet da verticale a orizzontale e desktop */
- @media ( larghezza minima : 768px ) e ( larghezza massima : 979px ) { ... } _ _
- /* Da telefono orizzontale a tablet verticale */
- @media ( larghezza massima : 767px ) { ... } _
- /* Telefoni orizzontali e giù */
- @media ( larghezza massima : 480px ) { ... } _
Per uno sviluppo più rapido e ottimizzato per dispositivi mobili, usa queste classi di utilità per mostrare e nascondere i contenuti in base al dispositivo. Di seguito è riportata una tabella delle classi disponibili e del loro effetto su un determinato layout di query multimediali (etichettato per dispositivo). Si possono trovare in responsive.less
.
Classe | Telefoni767px e inferiori | CompresseDa 979 px a 768 px | DesktopPredefinito |
---|---|---|---|
.visible-phone |
Visibile | Nascosto | Nascosto |
.visible-tablet |
Nascosto | Visibile | Nascosto |
.visible-desktop |
Nascosto | Nascosto | Visibile |
.hidden-phone |
Nascosto | Visibile | Visibile |
.hidden-tablet |
Visibile | Nascosto | Visibile |
.hidden-desktop |
Visibile | Visibile | Nascosto |
Utilizzare su base limitata ed evitare di creare versioni completamente diverse dello stesso sito. Invece, usali per completare la presentazione di ogni dispositivo.
Ridimensiona il browser o carica su dispositivi diversi per testare le classi di cui sopra.
I segni di spunta verdi indicano che la classe è visibile nella finestra corrente.
Qui, i segni di spunta verdi indicano che la classe è nascosta nella finestra corrente.