Bootstrap hè custruitu nantu à una griglia responsiva di 12 colonne. Avemu ancu inclusu layout fissi è di larghezza di fluidu basatu annantu à quellu sistema.
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.
- <!DOCTYPE html>
- <html lang = "fr" >
- ...
- </html>
In u schedariu scaffolding.less , avemu stabilitu a visualizazione globale di basa, a tipografia è i stili di ligame. In particulare, noi:
background-color: white;
nantu à ubody
@baseFontFamily
, @baseFontSize
, è @baseLineHeight
cum'è a nostra basa tipografica@linkColor
è applicà i ligami sottumessi solu nantu:hover
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.
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.
- <div class = "fila" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </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.
- <div class = "fila" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
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*
.
E fila nidificate duveranu include un inseme di colonne chì aghjunghjenu à u numeru di colonne di u so parente. Per esempiu, duie .span3
colonne nidificate deve esse piazzate in un .span6
.
- <div class = "fila" >
- <div class = "span6" >
- Livellu 1 colonna
- <div class = "fila" >
- <div class = "span3" > Livellu 2 </div>
- <div class = "span3" > Livellu 2 </div>
- </div>
- </div>
- </div>
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.
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.
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
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.
- <div class = "row-fluid" >
- <div class = "span12" >
- Livellu 1 di a colonna
- <div class = "row-fluid" >
- <div class = "span6" > Livellu 2 </div>
- <div class = "span6" > Livellu 2 </div>
- </div>
- </div>
- </div>
Variabile | Valore predeterminatu | Descrizzione |
---|---|---|
@gridColumns |
12 | Numaru di culonni |
@gridColumnWidth |
60 px | Larghezza di ogni colonna |
@gridGutterWidth |
20px | Spaziu negativu trà e colonne |
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.
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.
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.
U layout predeterminatu è simplice 940px-wide, centratu per quasi ogni situ web o pagina furnita da un unicu <div class="container">
.
- <corpu>
- <div class = "container" >
- ...
- </div>
- </corpu>
<div class="container-fluid">
dà una struttura di pagina flessibile, larghezza minima è massima, è una barra laterale di manca. Hè grande per app è documenti.
- <div class = "container-fluid" >
- <div class = "row-fluid" >
- <div class = "span2" >
- <!--Cuntinutu di a barra laterale-->
- </div>
- <div class = "span10" >
- <!--Cuntinutu corpu-->
- </div>
- </div>
- </div>
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
.
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.
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 |
Per assicurà chì i dispositi mostranu e pagine responsive currettamente, include u meta tag viewport.
- <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" >
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:
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à.
- /* Telefoni di paisaghju è giù */
- @media ( max - larghezza : 480px ) { ... }
- /* U telefuninu di paisaghju à a tableta di ritrattu */
- @media ( max - larghezza : 767px ) { ... }
- /* Tavuletta di ritrattu à u paisaghju è u desktop */
- @media ( larghezza minima : 768px ) è ( larghezza massima : 979px ) { ... } _ _
- /* Grande desktop */
- @media ( min - larghezza : 1200px ) { ... }
Per un sviluppu più veloce per u telefuninu, aduprate queste classi di utilità di basa per mostrà è nasconde u cuntenutu per u dispositivu.
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.
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 | Ammucciatu | Ammucciatu |
.visible-tablet |
Ammucciatu | Visibile | Ammucciatu |
.visible-desktop |
Ammucciatu | Ammucciatu | Visibile |
.hidden-phone |
Ammucciatu | Visibile | Visibile |
.hidden-tablet |
Visibile | Ammucciatu | Visibile |
.hidden-desktop |
Visibile | Visibile | Ammucciatu |
Ridimensionà u vostru navigatore o caricate nantu à diversi dispositi per pruvà e classi sopra.
I marchi verdi indicanu chì a classe hè visibile in a vostra finestra attuale.
Quì, i marchi verdi indicanu chì a classe hè oculata in a vostra vista attuale.