Bootstrap

Scaffolding

Bootstrap hè custruitu nantu à griglie, layout è cumpunenti responsive di 12 colonne.

Paràmetri globale

Richiede HTML5 doctype

Bootstrap faci usu di certi elementi HTML è proprietà CSS chì necessitanu l'usu di u doctype HTML5. Includite à u principiu di tutti i vostri prughjetti.

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

Tipografia è ligami

Bootstrap stabilisce a visualizazione globale di basa, a tipografia è i stili di ligame. In particulare, noi:

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

Sti stili ponu esse truvati in scaffolding.less .

Resettate via Normalize

Cù Bootstrap 2, u vechju bloccu di resettore hè statu abbandunatu in favore di Normalize.css , un prughjettu di Nicolas Gallagher è Jonathan Neal chì alimenta ancu u HTML5 Boilerplate . Mentre usemu assai di Normalize in u nostru reset.less , avemu eliminatu alcuni elementi specificamente per Bootstrap.

Sistema di griglia predeterminatu

Esempiu di griglia in diretta

U sistema di griglia Bootstrap predeterminatu utilizeghja 12 culonni , facendu per un containeru largu 940px senza funzioni di risposta attivate . Cù u schedariu CSS responsive aghjuntu, a griglia si adatta à esse 724px è 1170px larga secondu a vostra vista. Sottu 767px viewports, i culonni diventanu fluidi è stack vertically.

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

HTML griglia basica

Per un layout simplice di duie colonne, crea un .rowè aghjunghje u numeru appropritatu di .span*colonne. Cum'è questa hè una griglia di 12 culonni, ognuna .span*copre un numeru di quelli 12 culonni, è deve sempre aghjunghje à 12 per ogni fila (o u numeru di colonne in u genitore).

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

Dopu questu esempiu, avemu .span4è .span8, facendu per 12 colonne totali è una fila completa.

Colonne di compensazione

Sposta e colonne à a diritta usendu .offset*classi. Ogni classa aumenta u margine di manca di una colonna da una colonna sana. Per esempiu, .offset4si move .span4nantu à quattru culonni.

4
3 offset 2
3 offset 1
3 offset 2
6 offset 3 
  1. <div class = "fila" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Culonni di nidificazione

Per nidificà u vostru cuntenutu cù a griglia predeterminata, aghjunghje un novu .rowè un set di .span*colonne in una colonna esistente .span*. E fila nidificate duveranu include un inseme di colonne chì aghjunghjenu à u numeru di colonne di u so parente.

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

Sistema di griglia di fluidu

Esempiu di griglia fluida in diretta

U sistema di griglia fluida usa percentuali invece di pixel per l'larghezza di colonna. Hà e stesse capacità di risposta cum'è u nostru sistema di griglia fissa, assicurendu proporzioni adatte per e risoluzioni chjave di u screnu è i dispositi.

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

HTML basi di griglia fluida

Fate ogni fila "fluida" cambiendu .rowà .row-fluid. E classi di colonna fermanu esattamente u listessu, facendu fàciule per flip trà e griglie fissi è fluidi.

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

Compensazione di fluidi

Funziona a listessa manera cum'è a compensazione di u sistema di griglia fissa: aghjunghje .offset*à qualsiasi colonna per cumpensà da tante colonne.

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

Nidificazione di fluidi

E griglie fluide utilizanu nidificazione in modu diversu: ogni livellu nidificatu di colonne deve aghjunghje sin'à 12 colonne. Questu hè chì a rete fluida usa percentuali, micca pixel, per stabilisce l'larghezza.

fluidu 12
fluidu 6
fluidu 6
fluidu 6
fluidu 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     fluidu 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         fluidu 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Fluid 6 </div> 
  9.           <div class = "span6" > Fluid 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Fluid 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Layouts

Disposizione fissa

Fornisce un layout cumuni di larghezza fissa (è eventualmente responsive) cù solu <div class="container">necessariu.

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

Disposizione fluida

Crea una pagina fluida di duie culonne cù <div class="container-fluid">- grande per l'applicazioni è i 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

Abilitazione di funzioni responsive

Attivate CSS responsive in u vostru prughjettu includendu a meta tag propria è u fogliu di stile supplementu in u <head>vostru documentu. Se avete compilatu Bootstrap da a pagina Customize, avete bisognu di include solu a meta tag.

  1. <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stilesheet" >

A testa alta !Bootstrap ùn include micca funzioni responsive di manera predeterminata in questu momentu perchè micca tuttu deve esse responsive. Invece di incuragisce i sviluppatori à caccià sta funzione, pensemu chì hè megliu per attivà cum'è necessariu.

À propositu di Bootstrap responsive

Dispositivi rispunsevuli

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 i prughjetti più grandi, cunsiderà basi di codice dedicate è micca strati di dumande di 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
Display grande 1200 px è più 70 px 30px
Default 980 px è più 60 px 20px
Tablet ritratti 768 px è sopra 42 px 20px
Telefoni à tablette 767px è sottu Culonni fluidi, senza larghezza fissa
Telefoni 480px è sottu Culonni fluidi, senza larghezza fissa 
  1. /* Grande desktop */
  2. @media ( min - larghezza : 1200px ) { ... }     
  3.  
  4. /* Tavuletta di ritrattu à u paisaghju è u desktop */
  5. @media ( larghezza minima : 768px ) è ( larghezza massima : 979px ) { ... } _ _        
  6.  
  7. /* U telefuninu di paisaghju à a tableta di ritrattu */
  8. @media ( max - larghezza : 767px ) { ... }     
  9.  
  10. /* Telefoni di paisaghju è giù */
  11. @media ( max - larghezza : 480px ) { ... }

Classi di utilità rispunsevuli

Per un sviluppu più veloce per u telefuninu, utilizate queste classi di utilità per mostrà è ammuccià u cuntenutu per u dispositivu. A sottu hè una tavola di e classi dispunibuli è u so effettu nantu à una disposizione di media query data (etichettata da u dispositivu). Puderanu esse truvati in responsive.less.

Classe Telefoni767px è sottu Pasticchi979 px à 768 px DesktopsDefault
.visible-phone Visibile
.visible-tablet Visibile
.visible-desktop Visibile
.hidden-phone Visibile Visibile
.hidden-tablet Visibile Visibile
.hidden-desktop Visibile Visibile

Quandu aduprà

Aduprate in una basa limitata è evite micca di creà versioni completamente diverse di u stessu situ. Invece, aduprate per cumplementarii a presentazione di ogni dispusitivu. L'utilità responsive ùn deve micca esse aduprata cù tavule, è per quessa ùn sò micca supportati.

Casu di prova di utilità rispunsevuli

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

Visibile nantu à...

I marchi verdi indicanu chì a classe hè visibile in a vostra finestra attuale.

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

Ammucciatu nantu à...

Quì, i marchi verdi indicanu chì a classe hè oculata in a vostra vista attuale.

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