Bootstrap

Impalcatura

Bootstrap è costruito su una griglia reattiva a 12 colonne. Abbiamo anche incluso layout a larghezza fissa e fluida basati su quel sistema.

Stili globali per ripristino CSS, tipografia e collegamenti

Richiede doctype HTML5

Bootstrap fa uso di elementi HTML e proprietà CSS che richiedono l'uso del doctype HTML5. Assicurati di includerlo all'inizio di ogni pagina Bootstrapped nel tuo progetto.

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

Tipografia e collegamenti

All'interno del file scaffolding.less , impostiamo la visualizzazione globale di base, la tipografia e gli stili di collegamento. Nello specifico noi:

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

Ripristina tramite Normalizza

A partire da Bootstrap 2, il tradizionale ripristino CSS si è evoluto per utilizzare elementi di Normalize.css , un progetto di Nicolas Gallagher che alimenta anche HTML5 Boilerplate .

Il nuovo reset si trova ancora in reset.less , ma con molti elementi rimossi per brevità e precisione.

Sistema di griglia predefinito 12 colonne con una rotazione reattiva

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

Il sistema di griglia predefinito fornito in Bootstrap utilizza 12 colonne che vengono visualizzate con larghezze di 724 px, 940 px (predefinito senza CSS reattivo incluso) e 1170 px. Al di sotto dei viewport di 767px, le colonne diventano fluide e si impilano verticalmente.

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

Come mostrato qui, è possibile creare un layout di base con due "colonne", ciascuna che copre un numero di 12 colonne di base che abbiamo definito come parte del nostro sistema di griglia.


Colonne di compensazione

4
4 compensazione 4
3 compensazione 3
3 compensazione 3
8 compensazione 4 
  1. < classe div = "riga" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Colonne di nidificazione

Con il sistema di griglia statico (non fluido) in Bootstrap, il nesting è facile. Per annidare i tuoi contenuti, aggiungi semplicemente una nuova .rowe serie di colonne all'interno di una colonna .span*esistente ..span*

Esempio

Le righe nidificate dovrebbero includere un set di colonne che si sommano al numero di colonne del suo genitore. .span3Ad esempio, due colonne nidificate devono essere posizionate all'interno di un file .span6.

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

Sistema a griglia fluida 12 colonne reattive basate su percentuale

Colonne fluide

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

Percentuali, non pixel

Il sistema a griglia fluida utilizza le percentuali per le larghezze delle colonne anziché i pixel fissi. Ha anche le stesse variazioni reattive del nostro sistema a griglia fissa, garantendo proporzioni adeguate per risoluzioni e dispositivi chiave dello schermo.

Righe fluide

Rendi fluida qualsiasi riga semplicemente cambiando .rowin .row-fluid. Le colonne rimangono esattamente le stesse, rendendo estremamente semplice passare da layout fissi a layout fluidi.

Marcatura

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

Nidificazione fluida

La nidificazione con le griglie fluide è leggermente diversa: il numero di colonne nidificate non deve necessariamente corrispondere al genitore. Invece, le tue colonne vengono reimpostate a ogni livello perché ogni riga occupa il 100% della colonna principale.

fluido 12
fluido 6
fluido 6 
  1. < classe div = "fluido riga" > 
  2.   < classe div = "span12" > 
  3.     Livello 1 della colonna
  4.     < classe div = "fluido riga" > 
  5.       <div class = "span6" > Livello 2 </div> 
  6.       <div class = "span6" > Livello 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Personalizzazione della griglia

Variabile Valore di default Descrizione
@gridColumns 12 Numero di colonne
@gridColumnWidth 60px Larghezza di ogni colonna
@gridGutterWidth 20px Spazio negativo tra le colonne

Variabili in LESS

In Bootstrap sono integrate una manciata di variabili per la personalizzazione del sistema di griglia predefinito da 940 pixel, documentato sopra. Tutte le variabili per la griglia sono memorizzate in variabili.less.

Come personalizzare

Modificare la griglia significa cambiare le tre @grid*variabili e ricompilare Bootstrap. Modificare le variabili della griglia in variabili.less e utilizzare uno dei quattro modi documentati per ricompilare . Se stai aggiungendo più colonne, assicurati di aggiungere il CSS per quelle in grid.less.

Rimanere reattivi

La personalizzazione della griglia funziona solo al livello predefinito, la griglia 940px. Per mantenere gli aspetti reattivi di Bootstrap, dovrai anche personalizzare le griglie in responsive.less.

Layout Modelli base per creare pagine web

Disposizione fissa

Il layout centrato e di 940 px di larghezza di default per quasi tutti i siti Web o le pagine forniti da un singolo file <div class="container">.

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

Disposizione fluida

<div class="container-fluid">offre una struttura della pagina flessibile, larghezze minime e massime e una barra laterale sinistra. È ottimo per app 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 Query sui media per vari dispositivi e risoluzioni

Dispositivi reattivi

Cosa fanno

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
Smartphone 480px e inferiori Colonne fluide, nessuna larghezza fissa
Da smartphone a tablet 767px e inferiori Colonne fluide, nessuna larghezza fissa
Compresse per ritratti 768px e oltre 42px 20px
Predefinito 980px e oltre 60px 20px
Ampio display 1200px e oltre 70px 30px

Richiede meta tag

Per garantire che i dispositivi visualizzino correttamente le pagine reattive, includi il meta tag viewport.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

Utilizzo delle media query

Bootstrap non include automaticamente queste query multimediali, ma comprenderle e aggiungerle è molto semplice e richiede una configurazione minima. Hai alcune opzioni per includere le funzionalità reattive di Bootstrap:

  1. Utilizzare la versione reattiva compilata, bootstrap-responsive.css
  2. Aggiungi @import "responsive.less" e ricompila Bootstrap
  3. Modifica e ricompila responsive.less come file separato

Perché non includerlo e basta? A dire il vero, non tutto deve essere reattivo. Invece di incoraggiare gli sviluppatori a rimuovere questa funzione, riteniamo che sia meglio abilitarla.

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

Classi di utilità reattive

Quali sono

Per uno sviluppo più rapido e ottimizzato per i dispositivi mobili, utilizza queste classi di utilità di base per mostrare e nascondere i contenuti in base al dispositivo.

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.

Ad esempio, potresti mostrare un <select>elemento per la navigazione su layout mobili, ma non su tablet o desktop.

Classi di supporto

Qui è mostrata una tabella delle classi che supportiamo e il loro effetto su un determinato layout di media query (etichettato per dispositivo). Si possono trovare in responsive.less.

Classe Telefoni480px e inferiori Compresse767px e inferiori Desktop768px e oltre
.visible-phone Visibile
.visible-tablet Visibile
.visible-desktop Visibile
.hidden-phone Visibile Visibile
.hidden-tablet Visibile Visibile
.hidden-desktop Visibile Visibile

Caso di prova

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