Bootstrap

Impalcatura

Bootstrap è basato su griglie, layout e componenti reattivi a 12 colonne.

Impostazioni globali

Richiede doctype HTML5

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.

  1. <!DOCTYPE html>
  2. < lingua html = "it" > 
  3.   ...
  4. </html>

Tipografia e collegamenti

Bootstrap imposta la visualizzazione globale di base, la tipografia e gli stili di collegamento. Nello specifico noi:

  • Rimuovere marginsul corpo
  • Impostare background-color: white;ilbody
  • Utilizza gli attributi @baseFontFamily, @baseFontSize, e @baseLineHeightcome base tipografica
  • Imposta il colore del collegamento globale tramite @linkColore applica le sottolineature del collegamento solo su:hover

Questi stili possono essere trovati all'interno di scaffolding.less .

Ripristina tramite Normalizza

Con Bootstrap 2, il vecchio blocco di ripristino è stato eliminato a favore di Normalize.css , un progetto di Nicolas Gallagher e Jonathan Neal che alimenta anche HTML5 Boilerplate . Sebbene utilizziamo gran parte di Normalize all'interno del nostro reset.less , abbiamo rimosso alcuni elementi specifici per Bootstrap.

Sistema di griglia predefinito

Esempio di griglia live

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.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

HTML di base della griglia

Per un semplice layout a due colonne, crea .rowe 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).

  1. < classe div = "riga" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Dato questo esempio, abbiamo .span4e .span8, ottenendo 12 colonne totali e una riga completa.

Colonne di compensazione

Sposta le colonne a destra usando le .offset*classi. Ogni classe aumenta il margine sinistro di una colonna di un'intera colonna. Ad esempio, .offset4si sposta .span4su quattro colonne.

4
3 compensazione 2
3 compensazione 1
3 compensazione 2
6 compensazione 3 
  1. < classe div = "riga" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Colonne di nidificazione

Per annidare i tuoi contenuti con la griglia predefinita, aggiungi un nuovo .rowe 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.

Colonna di livello 1
Livello 2
Livello 2 
  1. < classe div = "riga" > 
  2.   < classe div = "span9" > 
  3.     Colonna di livello 1
  4.     < classe div = "riga" > 
  5.       <div class = "span6" > Livello 2 </div> 
  6.       <div class = "span3" > Livello 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistema a griglia fluida

Esempio di griglia fluida in tempo reale

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.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

HTML a griglia fluida di base

Rendi "fluida" qualsiasi riga cambiando .rowin .row-fluid. Le classi di colonne rimangono esattamente le stesse, rendendo facile passare da griglie fisse a griglie fluide.

  1. < classe div = "fluido riga" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Compensazione fluida

Funziona allo stesso modo dell'offset del sistema a griglia fissa: aggiungi .offset*a qualsiasi colonna per compensare di altrettante colonne.

4
4 compensazione 4
3 compensazione 3
3 compensazione 3
6 compensazione 6 
  1. < classe div = "fluido riga" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Nidificazione fluida

Le griglie fluide utilizzano la nidificazione in modo diverso: ogni livello nidificato di colonne deve aggiungere fino a 12 colonne. Questo perché la griglia fluida utilizza le percentuali, non i pixel, per impostare le larghezze.

fluido 12
fluido 6
fluido 6
fluido 6
fluido 6 
  1. < classe div = "fluido riga" > 
  2.   < classe div = "span12" > 
  3.     fluido 12
  4.     < classe div = "fluido riga" > 
  5.       < classe div = "span6" > 
  6.         fluido 6
  7.         < classe div = "fluido riga" > 
  8.           <div class = "span6" > Fluido 6 </div> 
  9.           <div class = "span6" > Fluido 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Fluido 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Layout

Disposizione fissa

Fornisce un layout comune a larghezza fissa (e facoltativamente reattivo) con solo <div class="container">richiesto.

  1. <corpo>
  2.   < classe div = "contenitore" > 
  3.     ...
  4.   </div>
  5. </corpo>

Disposizione fluida

Crea una pagina fluida a due colonne con <div class="container-fluid">—ottimo per applicazioni e documenti.

  1. < classe div = "fluido contenitore" > 
  2.   < classe div = "fluido riga" > 
  3.     < classe div = "span2" > 
  4.       <!--Contenuto della barra laterale-->
  5.     </div>
  6.     < classe div = "span10" > 
  7.       <!--Contenuto del corpo-->
  8.     </div>
  9.   </div>
  10. </div>

Design reattivo

Abilitazione delle funzioni reattive

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.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <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à.

Informazioni su Bootstrap reattivo

Dispositivi reattivi

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-widthe max-width.

  • Modifica la larghezza della colonna nella nostra griglia
  • Impila gli elementi invece di fluttuare dove necessario
  • Ridimensiona i titoli e il testo in modo che siano più appropriati per i dispositivi

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.

Dispositivi supportati

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 
  1. /* Desktop grande */
  2. @media ( larghezza minima : 1200px ) { ... } _     
  3.  
  4. /* Tablet da verticale a orizzontale e desktop */
  5. @media ( larghezza minima : 768px ) e ( larghezza massima : 979px ) { ... } _ _        
  6.  
  7. /* Da telefono orizzontale a tablet verticale */
  8. @media ( larghezza massima : 767px ) { ... } _     
  9.  
  10. /* Telefoni orizzontali e giù */
  11. @media ( larghezza massima : 480px ) { ... } _

Classi di utilità reattive

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
.visible-tablet Visibile
.visible-desktop Visibile
.hidden-phone Visibile Visibile
.hidden-tablet Visibile Visibile
.hidden-desktop Visibile Visibile

Quando usare

Utilizzare su base limitata ed evitare di creare versioni completamente diverse dello stesso sito. Invece, usali per completare la presentazione di ogni dispositivo. Le utilità reattive non devono essere utilizzate con le tabelle e pertanto non sono supportate.

Test case di utilità reattive

Ridimensiona il browser o carica su dispositivi diversi per testare le classi di cui sopra.

Visibile su...

I segni di spunta verdi indicano che la classe è visibile nella finestra corrente.

  • Telefono✔ Telefono
  • Tavoletta✔ Tablet
  • Desktop✔ Desktop

Nascosto su...

Qui, i segni di spunta verdi indicano che la classe è nascosta nella finestra corrente.

  • Telefono✔ Telefono
  • Tavoletta✔ Tablet
  • Desktop✔ Desktop