Bootstrap

Scaffolding

Bootstrap hè custruitu nantu à una griglia responsiva di 12 colonne. Avemu ancu inclusu layout fissi è di larghezza di fluidu basatu annantu à quellu sistema.

Stili globali per reset CSS, tipografia è ligami

Richiede HTML5 doctype

Bootstrap usa elementi HTML è proprietà CSS chì necessitanu l'usu di u doctype HTML5. Assicuratevi di includellu à u principiu di ogni pagina Bootstrapped in u vostru prughjettu.

  1. <!DOCTYPE html>
  2. <html lang = "fr" > 
  3.   ...
  4. </html>

Tipografia è ligami

In u schedariu scaffolding.less , avemu stabilitu a visualizazione globale di basa, a tipografia è i stili di ligame. In particulare, noi:

  • Eliminate margini nantu à u corpu
  • Mettite background-color: white;nantu à ubody
  • Aduprate l' attributi @baseFontFamily, @baseFontSize, è @baseLineHeightcum'è a nostra basa tipografica
  • Stabilite u culore di ligame glubale via @linkColorè applicà i ligami sottumessi solu nantu:hover

Resettate via Normalize

Da Bootstrap 2, u resettore CSS tradiziunale hà evolutu per fà usu di elementi da Normalize.css , un prughjettu di Nicolas Gallagher chì ancu powers the HTML5 Boilerplate .

U novu reset pò ancu esse truvatu in reset.less , ma cù parechji elementi eliminati per brevità è precisione.

Sistema di griglia predeterminatu 12 culonni cù una torsione responsiva

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

U sistema di griglia predeterminatu furnitu cum'è parte di Bootstrap hè una griglia di 940 px-wide, 12-colonna .

Hà ancu quattru variazioni responsive per diversi dispositi è risoluzioni: telefuninu, ritratti di tavuletta, paisaghji di tavulinu è picculi desktop, è grandi desktop widescreen.

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

Comu mostra quì, un layout basicu pò esse creatu cù duie "columne", ognuna spanning un numeru di e 12 culonni fundamentali chì avemu definitu cum'è parte di u nostru sistema di griglia.


Colonne di compensazione

4
4 offset 4
3 offset 3
3 offset 3
8 offset 4 
  1. <div class = "fila" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Colonne di nidificazione

Cù u sistema di griglia statica (non fluida) in Bootstrap, a nidificazione hè faciule. Per nidificà u vostru cuntenutu, basta aghjunghje un novu .rowè un set di .span*colonne in una colonna esistente .span*.

Esempiu

E fila nidificate duveranu include un inseme di colonne chì aghjunghjenu à u numeru di colonne di u so parente. Per esempiu, duie .span3colonne nidificate deve esse piazzate in un .span6.

Livellu 1 di a colonna
Livellu 2
Livellu 2 
  1. <div class = "fila" > 
  2.   <div class = "span12" > 
  3.     Livellu 1 di a colonna
  4.     <div class = "fila" > 
  5.       <div class = "span6" > Livellu 2 </div> 
  6.       <div class = "span6" > Livellu 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistema di griglia fluida 12 colonne rispunsevuli, basate in percentualità

Culonni fluidi

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

Per centu, micca pixel

U sistema di griglia fluida usa percentuali per a larghezza di colonna invece di pixel fissi. Havi ancu e stesse variazioni rispunsevuli cum'è u nostru sistema di griglia fissa, assicurendu proporzioni adatte per e risoluzioni chjave di u screnu è i dispositi.

Righe fluide

Fate ogni fluidu di fila solu cambiendu .rowà .row-fluid. I culonni restanu esattamente u listessu, facendu super semplice per cambià trà layout fissi è fluidi.

Marcatura

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Nidificazione di fluidi

A nidificazione cù griglie fluide hè un pocu sfarente: u nùmeru di colonne nidificate ùn hà micca bisognu di currisponde à u genitore. Invece, e vostre colonne sò resettate à ogni livellu perchè ogni fila occupa u 100% di a colonna parente.

fluidu 12
fluidu 6
fluidu 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Livellu 1 di a colonna
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Livellu 2 </div> 
  6.       <div class = "span6" > Livellu 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

persunalizazione di a griglia

Variabile Valore predeterminatu Descrizzione
@gridColumns 12 Numaru di culonni
@gridColumnWidth 60 px Larghezza di ogni colonna
@gridGutterWidth 20px Spaziu negativu trà e colonne
@siteWidth Somma calculée de toutes les colonnes et gouttières Cunta u numeru di culonni è di canotti per stabilisce a larghezza di u .container-fixed()mixin

Variabili in LESS

Custruitu in Bootstrap sò una manciata di variabili per persunalizà u sistema di griglia 940px predeterminatu, documentatu sopra. Tutte e variàbili per a griglia sò guardati in variables.less.

Cumu persunalizà

Mudificà a griglia significa cambià e trè @grid*variàbili è recompilà Bootstrap. Cambiate e variàbili di griglia in variables.less è utilizate una di e quattru manere documentate per recompilà . Sè aghjunghje più colonne, assicuratevi di aghjunghje u CSS per quelli in grid.less.

Stà responsive

A persunalizazione di a griglia funziona solu à u livellu predeterminatu, a griglia 940px. Per mantene l'aspettu responsive di Bootstrap, avete ancu persunalizà e griglie in responsive.less.

Layouts Modelli basi per creà pagine web

Disposizione fissa

U layout predeterminatu è simplice 940px-wide, centratu per quasi ogni situ web o pagina furnita da un unicu <div class="container">.

  1. <corpu>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </corpu>

Disposizione fluida

<div class="container-fluid">dà una struttura di pagina flessibile, larghezza minima è massima, è una barra laterale di manca. Hè grande per app è documenti.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Cuntinutu di a barra laterale-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Cuntinutu corpu-->
  8.     </div>
  9.   </div>
  10. </div>

Disegnu responsive Media queries per parechji dispositi è risoluzioni

Dispositivi rispunsevuli

Chì facenu

E dumande di media permettenu un CSS persunalizatu basatu annantu à una quantità di cundizioni - rapporti, larghezze, tippu di visualizazione, etc. - ma di solitu si focalizeghja intornu min-widthè max-width.

  • Mudificà a larghezza di a colonna in a nostra griglia
  • Stack elementi invece di float induve necessariu
  • Resize headings è testu per esse più apprupriati per i dispositi

Aduprate e dumande di media in modu rispunsevule è solu cum'è un principiu per u vostru audience mobile. Per prughjetti più grandi, cunsiderà basi di codice dedicate è micca strati di dumande media.

Dispositivi supportati

Bootstrap supporta una manciata di dumande di media in un unicu schedariu per aiutà à fà i vostri prughjetti più apprupriati in diversi dispositi è risoluzioni di schermu. Eccu ciò chì hè inclusu:

Etichetta Larghezza di layout A larghezza di a colonna Larghezza di gutter
Smartphones 480px è sottu Culonni fluidi, senza larghezza fissa
Smartphones à tablette 767px è sottu Culonni fluidi, senza larghezza fissa
Tablet ritratti 768 px è sopra 42 px 20px
Default 980 px è più 60 px 20px
Display grande 1200 px è più 70 px 30px

Richiede meta tag

Per assicurà chì i dispositi mostranu e pagine responsive bè, includenu a meta tag viewport.

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

Utilizà e dumande di media

Bootstrap ùn include micca automaticamente queste dumande di media, ma capisce è aghjunghje hè assai faciule è richiede una configurazione minima. Avete uni pochi d'opzioni per cumprendi e funzioni responsive di Bootstrap:

  1. Aduprate a versione responsive compilata, bootstrap-responsive.css
  2. Aghjunghjite @import "responsive.less" è ricompilate Bootstrap
  3. Mudificà è recompilà responsive.less cum'è un schedariu separatu

Perchè micca solu include? A verità à dì, micca tuttu deve esse responsive. Invece di incuragisce i sviluppatori à caccià sta funzione, ci hè megliu per attivà.

  1.   // Telefoni di paisaghju è giù
  2.   @media ( max - larghezza : 480px ) { ... }     
  3.  
  4.   // Landscape phone to portrait tablet
  5.   @media ( max - larghezza : 768px ) { ... }     
  6.  
  7.   // Tavuletta di ritrattu à u paisaghju è u desktop
  8.   @media ( larghezza minima : 768px ) è ( larghezza massima : 980px ) { ... } _ _        
  9.  
  10.   // Grande desktop
  11.   @media ( min - larghezza : 1200px ) { .. }

Classi di utilità rispunsevuli

Chì sò

Per un sviluppu più veloce per u telefuninu, aduprate queste classi di utilità di basa per mostrà è oculte u cuntenutu per u dispositivu.

Quandu aduprà

Aduprate in una basa limitata è evite micca di creà versioni completamente diverse di u stessu situ. Invece, aduprate per cumplementari a presentazione di ogni dispusitivu.

Per esempiu, pudete mostrà un <select>elementu per a navigazione nantu à i dispositi mobili, ma micca in tablette o desktop.

Classi di sustegnu

A mostra quì hè una tavula di e classi chì supportemu è u so effettu nantu à un layout di query media data (etichettatu da u dispositivu). Puderanu esse truvati in responsive.less.

Classe Telefoni480px è sottu Pasticchi767px è sottu Desktops768 px è sopra
.visible-phone Visibile
.visible-tablet Visibile
.visible-desktop Visibile
.hidden-phone Visibile Visibile
.hidden-tablet Visibile Visibile
.hidden-desktop Visibile Visibile

Casu di prova

Ridimensionà u vostru navigatore o caricate nantu à diversi dispositi per pruvà e classi sopra.

Visibile nantu à...

  • telefonu✔ Telefonu
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Ammucciatu nantu à...

  • telefonu✔ Telefonu
  • Tablet✔ Tablet
  • Desktop✔ Desktop