Bootstrap

CSS di basa

Elementi HTML fundamentali stilati è rinfurzati cù classi extensibili.

Tipografia

Intestazioni

Tutti i tituli HTML, <h1>attraversu <h6>sò dispunibili.

h1. Titre 1

h2. Titre 2

h3. Titre 3

h4. Titre 4

h5. Titre 5
h6. Titre 6

Copia di corpu

L'impostazione predefinita globale di Bootstrap font-sizehè 14px , cù una line-heightdi 20px . Questu hè appiicatu à <body>tutti i paragrafi. Inoltre, <p>(paragrafi) ricevenu un margine di fondu di a mità di a so altezza di linea (9px per difettu).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Copia di u corpu di piombu

Fate un paràgrafu spiccà aghjunghjendu .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class = "lead" > ... </p>

Custruitu cù Meno

A scala tipografica hè basatu annantu à duie variabili LESS in variables.less : @baseFontSizeè @baseLineHeight. U primu hè a dimensione di fonti di basa utilizata in tuttu è u sicondu hè l'altezza di a linea di basa. Utilizemu quelli variàbili è qualchì matematica simplice per creà i marghjini, i paddings è l'alte di linea di tutti i nostri tipi è più. Personalizzali è Bootstrap si adatta.

Enfasi

Aduprate l'etichette di enfasi predeterminate di HTML cù stili ligeri.

<small>

Per de-emphasizing inline o blocchi di testu, utilizate a piccula tag.

Questa linea di testu hè destinata à esse trattata cum'è stampa fine.

<p> <small> Questa linea di testu hè destinata à esse trattata cum'è stampa fine. </small> </p>

<strong>

Per enfatizà un snippet di testu cù impurtante

U seguente frammentu di testu hè resu cum'è testu in grassu .

<strong> resu cum'è testu in grassu </strong>

<em>

Per enfatizà un snippet di testu cù stress

U seguente frammentu di testu hè resu cum'è testu in italicized .

<em> resu cum'è testu in italicized </em>

A testa alta ! Sentite liberu di utilizà <b>è <i>in HTML5. <b>hè destinatu à mette in risaltu parolle o frasi senza trasmette più impurtanza mentre <i>hè soprattuttu per voce, termini tecnichi, etc.

Abbreviazioni

Implementazione stilizzata di l' <abbr>elementu HTML per l'abbreviazioni è l'acronimi per vede a versione allargata nantu à u passaghju. L'abbreviazioni cù un titleattributu anu un bordu di fondu puntuatu chjaru è un cursore d'aiutu nantu à u passaghju, chì furnisce un cuntestu supplementu nantu à u passaghju.

<abbr>

Per u testu allargatu nantu à longu passaghju di una abbreviazione, include l' titleattributu.

Un'abbreviazione di a parolla attributu hè attr .

<abbr title = "attributu" > attr </abbr>

<abbr class="initialism">

Aghjunghjite .initialismà una abbreviazione per un font-size ligeramente più chjucu.

HTML hè u megliu dapoi u pane fettu.

<abbr title = "attributu" class = "inizialisimu" > attr </abbr>

Indirizzi

Presente infurmazione di cuntattu per l'antenatu più vicinu o tuttu u corpu di u travagliu.

<address>

Preservate u furmatu finendu tutte e linee cù <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Nome
pienu [email protected] 
  1. <indirizzu>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Telefono" > P: </abbr> (123) 456-7890 
  6. </indirizzu>
  7.  
  8. <indirizzu>
  9.   <strong> Nome cumpletu </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </indirizzu>

Blockquotes

Per cite blocchi di cuntenutu da una altra fonte in u vostru documentu.

Bloccu predefinitu

Avvolge <blockquote>ogni HTML cum'è cita. Per i citazioni dritte ricumandemu un <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

  1. <quote di bloccu>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3. </blockquote>

Opzioni di blockquote

Stile è mudificazione di cuntenutu per variazioni simplici nantu à un blockquote standard.

Nomine una fonte

Aggiungi <small>tag per identificà a fonte. Imbulighjate u nome di u travagliu fonte in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Qualchissia famosu in u Titulu Fonte 
  1. <quote di bloccu>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3.   <small> Qualchissia famosu <cite title = "Source Title" > Source Title </cite></small> 
  4. </blockquote>

Display alternati

Aduprà .pull-rightper una citazione di bloccu fluttuata, allinata à destra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Qualchissia famosu in u Titulu Fonte 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </blockquote>

Listi

Senza ordine

Una lista di elementi in quale l'ordine ùn importa micca esplicitamente.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem à massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Cumandatu

Una lista di l'articuli in quale l'ordine importa esplicitamente.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem à massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Unstyled

Una lista di l'articuli senza list-stylepadding left o supplementu.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem à massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "senza stile" > 
  2.   <li> ... </li>
  3. </ul>

Descrizzione

Una lista di termini cù e so descrizzione assuciata.

Lista di descrizzione
Una lista di descrizzione hè perfetta per definisce i termini.
Euismod
Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Descrizzione horizontale

Fate i termini è e descrizioni in <dl>linea fiancu à fiancu.

Lista di descrizzione
Una lista di descrizzione hè perfetta per definisce i termini.
Euismod
Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod sempre eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

A testa alta ! I listi di descrizzione orizontali truncaranu i termini chì sò troppu longu per inserisce in a correzione di a colonna di manca text-overflow. In viste più strette, cambiaranu à u layout stacked predeterminatu.

Codice

In linea

Imbulighjate snippets inline di codice cù <code>.

Per esempiu, <section>deve esse impannillatu cum'è in linea. 
  1. Per esempiu , <code><section> </ code > deve esse impannillatu cum'è inline .

Bloccu basicu

Aduprà <pre>per parechje linee di codice. Assicuratevi di scappà qualsiasi parentesi angulari in u codice per una resa curretta.

<p>Esempiu di testu quì...</p>
  1. <pre>
  2.   <p>Esempiu di testu quì...</p>
  3. </pre>

A testa alta ! Assicuratevi di mantene u codice in <pre>tags u più vicinu à a manca pussibule; renderà tutte e tabulazioni.

Pudete opzionalmente aghjunghje a .pre-scrollableclassa chì stabilisce una altezza massima di 350px è furnisce una barra di scorrimentu di l'asse y.

Tavule

Stili predeterminati

Per u stilu di basa - imbottitura ligera è solu divisori orizontali - aghjunghje a classa di basa .tableà qualsiasi <table>.

# Nomu Casata Nome d'utilizatore
1 Marcu Ottu @mdo
2 Ghjacobbu Thornton @grassu
3 Larry l'uccello @twitter 
  1. <table class = "table" > 
  2.   …
  3. </table>

Classi opzionali

Aghjunghjite qualsiasi di e seguenti classi à a .tableclassa di basa.

.table-striped

Aghjunghje zebra-striping à qualsiasi fila di tavula in <tbody>via u :nth-childselettore CSS (micca dispunibule in IE7-IE8).

# Nomu Casata Nome d'utilizatore
1 Marcu Ottu @mdo
2 Ghjacobbu Thornton @grassu
3 Larry l'uccello @twitter 
  1. <table class = "tavula à strisce" > 
  2.   …
  3. </table>

.table-bordered

Aghjunghjite cunfini è anguli arrotondati à a tavula.

# Nomu Casata Nome d'utilizatore
1 Marcu Ottu @mdo
Marcu Ottu @getbootstrap
2 Ghjacobbu Thornton @grassu
3 Larry l'uccello @twitter 
  1. <table class = "tavula bordata da tavola" > 
  2.   …
  3. </table>

.table-hover

Habilita un statu di hover nantu à e file di tavule in un <tbody>.

# Nomu Casata Nome d'utilizatore
1 Marcu Ottu @mdo
2 Ghjacobbu Thornton @grassu
3 Larry l'uccello @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

Rende i tavulini più compatti tagliando l'imbottitura cellulare in a mità.

# Nomu Casata Nome d'utilizatore
1 Marcu Ottu @mdo
2 Ghjacobbu Thornton @grassu
3 Larry l'uccello @twitter 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </table>

Classi di fila opzionali

Aduprate classi cuntestuali per colorà e file di tabella.

Classe Descrizzione
.success Indica una azione riescita o pusitiva.
.error Indica una azione periculosa o potenzialmente negativa.
.info Adupratu cum'è una alternativa à i stili predeterminati.
# Pruduttu Pagamentu pigliatu Status
1 TB - Mensili 01/04/2012 Appruvatu
2 TB - Mensili 02/04/2012 Declinatu
3 TB - Mensili 03/04/2012 In attesa 
  1. ...
  2.   < tr class = "successu" >
  3.     <td> 1 < /td>
  4.     <td>TB - Mensuale</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td> Appruvatu</ td >
  7.   </ tr >
  8. ...

Marcatura di tabella supportata

Lista di elementi HTML di tavula supportati è cumu si deve esse utilizatu.

Tag Descrizzione
<table> Elementu di imballaggio per a visualizazione di dati in un formatu tabulare
<thead> Elementu di cuntainer per e file di intestazioni di a tabella ( <tr>) per etichettate e colonne di a tabella
<tbody> Elementu di cuntainer per e file di tavulinu ( <tr>) in u corpu di a tavula
<tr> Elementu di cuntainer per un inseme di cellule di tavula ( <td>o <th>) chì appare nantu à una sola fila
<td> Cellula di a tabella predefinita
<th> Cella di tabella speciale per e etichette di colonna (o fila, secondu u scopu è a pusizione)
Deve esse aduprata in un<thead>
<caption> Descrizzione o riassuntu di ciò chì a tavula cuntene, soprattuttu utile per i lettori di schermu 
  1. <tavula>
  2.   <caption> ... </caption>
  3.   <testa>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </table>

Forme

Stili predeterminati

I cuntrolli di forma individuali ricevenu stili, ma senza alcuna classa di basa necessaria nantu à u <form>marcatu o grandi cambiamenti. Risulta in etichette impilate, allineate à manca sopra i cuntrolli di forma.

Legenda Esempiu di testu d'aiutu à livellu di bloccu quì. 
  1. <forma>
  2.   <legenda> Legenda </legenda>
  3.   <label> Nome di l'etichetta </label>
  4.   <input type = "text" placeholder = "Digita qualcosa..." >  
  5.   <span class = "help-block" > Esempiu di testu d'aiutu à livellu di bloccu quì. </span> 
  6.   <label class = "checkbox" > 
  7.     <input type = "checkbox" > Verificatemi 
  8.   </label>
  9.   <button type = "submit" class = "btn" > Invia </button>  
  10. </form>

Disposizione opzionale

Includite cù Bootstrap sò trè layout di forma opzionale per i casi d'usu cumuni.

Forma di ricerca

Aghjunghjite .form-searchà a forma è .search-queryà u <input>per un input di testu extra arrotondatu.

  1. <form class = "form-search" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <button type = "submit" class = "btn" > Ricerca </button>  
  4. </form>

Forma in linea

Aghjunghjite .form-inlineper etichette allineate à manca è cuntrolli di bloccu in linea per un layout compactu.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "E-mail" >   
  3.   <input type = "password" class = "input-small" placeholder = "Password" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Ricurdativi di mè 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Sign in </button>  
  8. </form>

Forma horizontale

Allineate l'etichette à destra è fluttu à a manca per fà apparisce in a stessa linea cum'è i cuntrolli. Richiede i più cambiamenti di marcatura da una forma predeterminata:

  • Aghjunghjite .form-horizontalà a forma
  • Imbulighjate l'etichette è i cuntrolli.control-group
  • Aghjunghjite .control-labelà l'etichetta
  • Imbulighjate tutti i cuntrolli assuciati .controlsper un allinamentu propiu
Legenda 
  1. <form class = "form-horizontal" > 
  2.   <div class = "gruppu di cuntrollu" > 
  3.     <label class = "control-label" for = "inputEmail" > Email </label>  
  4.     <div class = "cuntrolli" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "E-mail" >   
  6.     </div>
  7.   </div>
  8.   <div class = "gruppu di cuntrollu" > 
  9.     <label class = "control-label" for = "inputPassword" > Password </label>  
  10.     <div class = "cuntrolli" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Password" >   
  12.     </div>
  13.   </div>
  14.   <div class = "gruppu di cuntrollu" > 
  15.     <div class = "cuntrolli" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Ricurdativi di mè 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Sign in </button>  
  20.     </div>
  21.   </div>
  22. </form>

Cuntrolli di forma supportati

Esempii di cuntrolli di forma standard supportati in un layout di forma di esempiu.

Ingressi

U cuntrollu di forma più cumuni, campi di input basatu in testu. Include supportu per tutti i tipi HTML5: testu, password, datetime, datetime-local, data, month, time, week, number, email, url, search, tel, and color.

Esige l'usu di un specificatu typein ogni mumentu.

  1. <input type = "text" placeholder = "Input di testu" >

Area di testu

U cuntrollu di forma chì sustene parechje linee di testu. Cambia rowl'attributu quantu necessariu.

  1. <textarea rows = "3" ></textarea>

Checkboxes è radiu

I checkboxes sò per selezziunà una o parechje opzioni in una lista, mentre chì i radii sò per selezziunate una opzione da parechje.

Default (stacked)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" value = "" >  
  3.   L'opzione unu hè questu è quellu - assicuratevi di include perchè hè grande
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" verificata >     
  8.   L'opzione unu hè questu è quellu - assicuratevi di include perchè hè grande
  9. </label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   L'opzione duie pò esse qualcosa d'altru è selezziunate l'opzione diselezzione unu
  13. </label>

Caselle di spunta in linea

Aghjunghjite a .inlineclassa à una seria di caselle di spunta o radiu per i cuntrolli appariscenu nantu à a stessa linea.

  1. <label class = "checkbox inline" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </label>

Selezziunate

Aduprate l'opzione predeterminata o specificate a multiple="multiple"per vede parechje opzioni in una volta.


  1. <selezziunà>
  2.   <option> 1 </option>
  3.   <opzione> 2 </option>
  4.   <opzione> 3 </option>
  5.   <option> 4 </option>
  6.   <opzione> 5 </option>
  7. </select>
  8.  
  9. <select multiple = "multiple" > 
  10.   <option> 1 </option>
  11.   <opzione> 2 </option>
  12.   <opzione> 3 </option>
  13.   <option> 4 </option>
  14.   <opzione> 5 </option>
  15. </select>

Estende i cuntrolli di forma

Aghjunghjendu à i cuntrolli di u navigatore esistenti, Bootstrap include altri cumpunenti di forma utili.

Ingressi preposti è appiccicati

Aghjunghjite testu o buttone prima o dopu à qualsiasi input basatu in testu. Nota chì l' selectelementi ùn sò micca supportati quì.

Opzioni predefinite

Imbulighjate un .add-onè un inputcù una di e duie classi per appiccà o aghjunghje testu à un input.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span><input class = "span2" id = "prependedInput" size = "16" type = "text" placeholder = "Username" >      
  3. </div>
  4. <div class = "input-append" > 
  5.   <input class = "span2" id = "appendedInput" size = "16" type = "text" ><span class = "add-on" > .00 </span>     
  6. </div>

Cumminatu

Aduprate e duie classi è duie istanze di .add-onper prepà è aghjunghje un input.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span><input class = "span2" id = "appendedPrependedInput" size = "16" type = "text" ><span class = "add-on" > .00 </span>      
  3. </div>

Buttons invece di testu

Invece di un <span>testu, aduprate a .btnper aghjunghje un buttone (o dui) à un input.


  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton" size = "16" type = "text" ><button class = "btn" type = "button" > Vai! </button>      
  3. </div>
  4.  
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInputButtons" size = "16" type = "text" ><button class = "btn" type = "button" > Ricerca </button><button class = "btn" type = "button" > Opzioni </button>        
  7. </div>

Forma di ricerca

  1. <form class = "form-search" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Ricerca </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Ricerca </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Cuntrolla a taglia

Aduprate classi di dimensione relative cum'è .input-largeo abbinate i vostri inputs à e dimensioni di a colonna di griglia usendu .span*classi.

Misure relative

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

A testa alta ! In e versioni future, alteremu l'usu di queste classi di input relative per currisponde à e nostre dimensioni di buttone. Per esempiu, .input-largeaumenterà u padding è font-size di un input.

Dimensione di a griglia

Aduprate .span1per .span12inputs chì currispondenu à e stesse dimensioni di e colonne di griglia.

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <select class = "span1" > 
  5.   ...
  6. </select>
  7. <select class = "span2" > 
  8.   ...
  9. </select>
  10. <select class = "span3" > 
  11.   ...
  12. </select>

Per ingressi multipli di griglia per linea, utilizate a .controls-rowclassa di modificatore per u spaziu propiu . Flotta l'inputs per colapsà u spaziu biancu, stabilisce i margini adattati, è sguassate u float.

  1. <div class = "cuntrolli" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "controls controls-row" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

Ingressi ineditabili

Presentate e dati in una forma chì ùn hè micca editabile senza aduprà u marcatu di forma attuale.

Qualchì valore quì 
  1. <span class = "input-xlarge uneditable-input" > Qualchese valore quì </span>

Forme azzione

Finisce una forma cù un gruppu di azzioni (buttoni). Quandu si mette in un .form-horizontal, i buttuni saranu automaticamente indentati per allineà cù i cuntrolli di forma.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Salvà i cambiamenti </button>  
  3.   <button type = "button" class = "btn" > Annulla </button>  
  4. </div>

Testu d'aiutu

Supportu in linea è à livellu di bloccu per u testu d'aiutu chì appare intornu à i cuntrolli di forma.

Aiutu in linea

Testu d'aiutu in linea 
  1. <input type = "text" ><span class = "help-inline" > Testu d'aiutu in linea </span>

Bloccà l'aiutu

Un bloccu più longu di testu d'aiutu chì rompe in una nova linea è pò estenderà oltre una linea. 
  1. <input type = "text" ><span class = "help-block" > Un bloccu più longu di testu d'aiutu chì rompe in una nova linea è pò estenderà oltre una linea. </span>

Stati di cuntrollu di forma

Fornite feedback à l'utilizatori o visitatori cù stati di feedback basi nantu à i cuntrolli di forma è etichette.

Focus di input

Eliminamu i outlinestili predeterminati in certi cuntrolli di forma è applicà un box-shadowin u so locu per :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Questu hè focu..." >

Ingressi disabilitati

Aghjunghjite l' disabledattributu nantu à un input per prevene l'input di l'utilizatori è attivà un aspettu pocu sfarente.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Input disattivatu quì..." disattivatu >

Stati di validazione

Bootstrap include stili di validazione per messagi d'errore, avvirtimentu è successu. Per aduprà, aghjunghje a classa appropritata à u circondu .control-group.

Qualcosa pò esse andatu male
Per piacè corregge l'errore
Woohoo! 
  1. <div class = "avvertimentu di u gruppu di cuntrollu" > 
  2.   <label class = "control-label" for = "inputWarning" > Input with warning </label>  
  3.   <div class = "cuntrolli" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Qualcosa pò esse andatu male </span> 
  6.   </div>
  7. </div>
  8. <div class = "errore di u gruppu di cuntrollu" > 
  9.   <label class = "control-label" for = "inputError" > Ingressu cù errore </label>  
  10.   <div class = "cuntrolli" > 
  11.     <input type = "text" id = "inputError" >  
  12.     <span class = "help-inline" > Per piacè corregge l'errore </span> 
  13.   </div>
  14. </div>
  15. <div class = "successu di u gruppu di cuntrollu" > 
  16.   <label class = "control-label" for = "inputSuccess" > Input cù successu </label>  
  17.   <div class = "cuntrolli" > 
  18.     <input type = "text" id = "inputSuccess" >  
  19.     <span class = "help-inline" > Woohoo! </span> 
  20.   </div>
  21. </div>

Bottoni

Buttuni predeterminati

Stili di buttone pò esse appiicati à qualcosa cù a .btnclassa applicata. Tuttavia, di solitu vulete applicà questi solu <a>è <button>elementi per u megliu rendering.

Pulsante class="" Descrizzione
btn Pulsante grisgiu standard cù gradiente
btn btn-primary Fornisce un pesu visuale extra è identifica l'azzione primaria in un set di buttoni
btn btn-info Adupratu cum'è una alternativa à i stili predeterminati
btn btn-success Indica una azione riescita o pusitiva
btn btn-warning Indica chì a prudenza deve esse presa cù questa azione
btn btn-danger Indica una azzione periculosa o potenzialmente negativa
btn btn-inverse Alternate u buttone grisgiu scuru, micca ligatu à una azzione semantica o usu
btn btn-link Deemphasize un buttone facendu chì pare un ligame mentre mantene u cumpurtamentu di u buttone

Cumpatibilità cross browser

IE9 ùn taglia micca i gradienti di fondu nantu à i cantoni arrotondati, cusì l'eliminemu. Related, IE9 jankifies buttonelementi disattivati, rende u testu grisgiu cù una brutta ombra di testu chì ùn pudemu micca riparà.

Taglie di buttone

Vulete i buttoni più grande o più chjucu? Aggiungi .btn-large, .btn-small, o .btn-miniper dimensioni supplementari.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Pulsante grande </button>  
  3.   <button class = "btn btn-large" type = "button" > Pulsante grande </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Pulsante predefinitu </button>  
  7.   <button class = "btn" type = "button" > Pulsante predefinitu </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Picculu buttone </button>  
  11.   <button class = "btn btn-small" type = "button" > Picculu buttone </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mini buttone </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini buttone </button>  
  16. </p>

Crea i buttoni di livellu di bloccu - quelli chì spannu tutta a larghezza di un genitore - aghjunghjendu .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Pulsante di livellu di bloccu </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Pulsante di livellu di bloccu </button>

Statu disattivatu

Fate chì i buttuni parenu incliccabili sguassenduli à u 50%.

Elementu di ancora

Aghjunghjite a .disabledclassa à i <a>buttoni.

Link primariu Link 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Link primariu </a>  
  2. <a href = "#" class = "btn btn-large disabled" > Link </a>

A testa alta ! Avemu aduprà .disabledcum'è una classa di utilità quì, simile à a .activeclassa cumuni, cusì ùn hè micca necessariu prefissu.

Elementu buttone

Aghjunghjite l' disabledattributu à i <button>buttoni.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Pulsante primariu </button>   
  2. <button type = "button" class = "btn btn-large" disabilitatu > Button </button>

Una classe, parechje tag

Aduprate a .btnclassa nantu à un elementu <a>, <button>, o .<input>

Link 
  1. <a class = "btn" href = "" > Link </a>  
  2. <button class = "btn" type = "submit" > Button </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit" value = "Invia" >

Cum'è una bona pratica, pruvate à currisponde à l'elementu per u vostru cuntestu per assicurà a resa cross-browser currispondente. Sè vo avete un input, utilizate un <input type="submit">per u vostru buttone.

Images

Aghjunghjite classi à un <img>elementu per stilà facilmente l'imaghjini in ogni prughjettu.

  1. <img src = "..." class = "img-rounded" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." class = "img-polaroid" >

A testa alta ! .img-roundedè .img-circleùn travaglià in IE7-8 per mancanza di border-radiussupportu.

Icone da Glyphicons

Glifi di l'icona

140 icone in forma di sprite, dispunibili in grisgiu scuru (predeterminatu) è biancu, furnite da Glyphicons .

  • icona-vetru
  • icona-musica
  • icona-cerca
  • icona-busta
  • icona-cuore
  • icona-stella
  • icona-stella-vuota
  • icona-utilizatori
  • icona-film
  • icona-th-grande
  • icona-th
  • icona-th-list
  • icona - ok
  • icona-eliminà
  • icona-zoom-in
  • icona-zoom-out
  • icona-off
  • icona-signale
  • icona-cog
  • icona-trash
  • icona-casa
  • icona-file
  • icona-tempu
  • icona-strada
  • icona-download-alt
  • icona-download
  • icona-upload
  • icona-inbox
  • icon-play-circle
  • icona-ripetizione
  • icona-refresh
  • icon-list-alt
  • icona-lock
  • icona-bandiera
  • icona-cuffie
  • icona-volume-off
  • icona-volume-down
  • icona-volume-up
  • icona-qrcode
  • icona-codice a barre
  • icona-tag
  • icona-tags
  • icona-libru
  • icona-marcatore
  • icona-stampa
  • icona-camera
  • icona-font
  • icona-grassa
  • icona-italic
  • icona-testu-altezza
  • icona-text-width
  • icona-align-left
  • icona-align-center
  • icona-align-destra
  • icona-align-justify
  • lista di icone
  • icona-indent-left
  • icona-indent-destra
  • icona-facetime-video
  • icona-imagine
  • icona-lapis
  • icona-mappa-marcatore
  • icona-ajustà
  • icona-tint
  • icona-edit
  • icona-share
  • icona-verificà
  • icona-move
  • icona-passu-in daretu
  • icona-fast-backward
  • icona-in daretu
  • icona-play
  • icona-pausa
  • icona-stop
  • icona-avanti
  • icona-fast-forward
  • icona-passu-avanti
  • icona-eject
  • icona-chevron-left
  • icona-chevron-destra
  • icona-plus-segnu
  • icona-segnu-minus
  • icona-eliminà-segnu
  • icona-ok-segnu
  • icona-questione-segnu
  • icona-info-segnu
  • icona-screenshot
  • icona-eliminà-circle
  • icona-ok-circle
  • icona-ban-circle
  • icona-freccia-left
  • icona-freccia-destra
  • icona-freccia-up
  • icona-freccia in giù
  • icona-share-alt
  • icona-resize-full
  • icona-resize-small
  • icona-plus
  • icona-minus
  • icona-asteriscu
  • icona-segnu-esclamazione
  • icona-rigalu
  • icona-foglia
  • icona-focu
  • icona-ochju-apertu
  • icona-ochju-close
  • icona-segnu-avvertimentu
  • icona-pianu
  • icona-calendaru
  • icona-aleatoriu
  • icona-cumentu
  • icona-magnete
  • icona-chevron-up
  • icona-chevron-down
  • icona-retweet
  • icona-carrettu
  • icon-folder-close
  • icona-cartulare-apertu
  • icona-resize-verticale
  • icona-resize-horizontal
  • icona-hdd
  • icona-bullhorn
  • icona-campana
  • icona-certificatu
  • icona-pollice in su
  • icona-pollice in giù
  • icona-manu-diritta
  • icona-manu-manu
  • icona-hand-up
  • icona-manu in giù
  • icona-circle-arrow-right
  • icona-circle-arrow-left
  • icona-circle-arrow-up
  • icona-circle-arrow-down
  • icona-globu
  • icona-chiave
  • icone-tasks
  • icona-filtru
  • icona-cartinetta
  • icona-fullscreen

Attribuzione di Glyphicons

I Glyphicons Halflings sò normalment micca dispunibili gratuitamente, ma un accordu trà Bootstrap è i creatori di Glyphicons anu fattu questu pussibule senza costu per voi cum'è sviluppatori. Cum'è un ringraziu, vi dumandemu di include un ligame opzionale torna à Glyphicons ogni volta chì hè pratica.

Cumu aduprà

Tutte l'icone necessitanu un <i>tag cù una classe unica, prefissata cù icon-. Per aduprà, mette u codice seguente quasi in ogni locu:

  1. <i class = "icon-search" ></i>

Ci hè ancu stili dispunibuli per l'icone invertite (bianche), preparate cù una classe extra. Infurzeremu specificamente sta classa nantu à i stati hover è attivi per i ligami nav è dropdown.

  1. <i class = "icona-cerca icona-bianca" ></i>

A testa alta ! Quandu s'utilice accantu à stringhe di testu, cum'è in i buttoni o ligami di navigazione, assicuratevi di lascià un spaziu dopu à l' <i>etichetta per un spaziu propiu.

Esempi di icone

Aduprate in i buttoni, gruppi di buttone per una barra di strumenti, navigazione, o input di forma preposta.

Bottoni

Gruppu di buttone in una barra di strumenti di buttone
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.  
  4.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  7.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  8.   </div>
  9. </div>
Dropdown in un gruppu di buttone
User 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icona-utente icona-bianca" ></i> User </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "menu a discesa" > 
  5.     <li><a href = "#" ><i class = "icona-matita" ></i> Edita </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Elimina </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Ban </a></li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Fate amministratore </a></li>  
  10.   </ul>
  11. </div>
Picculu buttone
  1. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i></a>

Navigazione

  1. <ul class = "nav nav-list" > 
  2.   <li class = "attivu" ><a href = "#" ><i class = "icona-home icona-bianca" ></i> Casa </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Biblioteca </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Applicazioni </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Varie </a></li>  
  6. </ul>

Campi di furmulariu

  1. <div class = "gruppu di cuntrollu" > 
  2.   <label class = "control-label" for = "inputIcon" > Indirizzu email </label>  
  3.   <div class = "cuntrolli" > 
  4.     <div class = "input-prepend" > 
  5.     <span class = "add-on" ><i class = "icon-envelope" ><i><span><input class = "span2" id = "inputIcon" type = "text" >     
  6.   </div>
  7. </div>