Scaffolding

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

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
  • Pone u culore di ligame globale 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.

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 in Bootstrap utilizeghja 12 colonne chì rendenu in larghezza di 724px, 940px (predeterminatu senza CSS responsive inclusu), è 1170px. Sottu 767px viewports, i culonni diventanu fluidi è stack vertically.

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

Cum'è mostratu quì, un layout di basa pò esse creatu cù duie "columne", ognuna spanning un numeru di e 12 culonni fundamintali 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>

Culonni 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 = "span6" >
  3. Livellu 1 colonna
  4. <div class = "fila" >
  5. <div class = "span3" > Livellu 2 </div>
  6. <div class = "span3" > Livellu 2 </div>
  7. </div>
  8. </div>
  9. </div>

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 un 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>
Variabile Valore predeterminatu Descrizzione
@gridColumns 12 Numaru di culonni
@gridColumnWidth 60 px Larghezza di ogni colonna
@gridGutterWidth 20px Spaziu negativu trà e colonne

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à rispunsevuli

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.

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>

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 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
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 currettamente, include u 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. /* U telefuninu di paisaghju à a tableta di ritrattu */
  5. @media ( max - larghezza : 767px ) { ... }
  6.  
  7. /* Tavuletta di ritrattu à u paisaghju è u desktop */
  8. @media ( larghezza minima : 768px ) è ( larghezza massima : 979px ) { ... } _ _
  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à è nasconde 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 cumplementarii 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 à...

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