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 (10px 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>

Audace

Per enfatizà un snippet di testu cù un pesu di font più pesante.

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

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

Italicu

Per enfatizà un snippet di testu cù i corsi.

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.

Classi di allineamentu

Realignate facilmente u testu à i cumpunenti cù classi di allineamentu di testu.

Testu allinatu à manca.

Testu allinatu centru.

Testu allinatu ghjustu.

<p class = "text-left" > Testu allinatu à manca. </p> 
<p class = "text-center" > Testu allinatu centru. </p> 
<p class = "text-right" > Testu allinatu à destra. </p>

Classi di enfasi

Trasmette u significatu attraversu u culore cù una mansa di classi di utilità di enfasi.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Abbreviazioni

Implementazione stilizzata di l' <abbr>elementu HTML per l'abbreviazioni è l'acronimi per vede a versione ampliata 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 = "HyperText Markup Language" class = "inizialisimu"   > HTML </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]

<indirizzu>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  San Francisco, CA 94107 <br>
  <abbr title = "Telefono" > P: </abbr>  (123) 456-7890
</indirizzu>
 
<indirizzu>
  <strong> Nome cumpletu </strong><br>
  <a href = "mailto:#" > [email protected]  </a>
</indirizzu>

Blockquotes

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

Blockquote predefinitu

Imbulighjate <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.

<quota di bloccu>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</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 Source Title

<quota di bloccu>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  <small> Qualchissia famosu <cite title = "Source Title" > Source Title </cite></small> 
</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 Source Title

<blockquote class = "pull-right" > 
  ...
</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

<ul>
  <li> ... </li>
</ul>

Cumandatu

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem à massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li> ... </li>
</ol>

Unstyled

Eliminate u padding predeterminatu list-styleè lasciatu nantu à l'articuli di lista (solu i zitelli immediati).

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

<ul class = "senza stile" > 
  <li> ... </li>
</ul>

In linea

Pone tutti l'articuli di lista nantu à una sola linea cù inline-blockun pocu padding light.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = "inline" > 
  <li> ... </li>
</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.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</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.

<dl class = "dl-horizontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</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.

In linea

Imbulighjate snippets inline di codice cù <code>.

Per esempiu, <section>deve esse impannillatu cum'è in linea.

Per esempiu , <code> & lt ; a sezione & gt ;</ code > deve esse impannillata 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>

<pre>
  <p>Esempiu di testu quì...</p>
</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.

Stili predeterminati

Per u stilu di basa - imbottitura ligera è solu divisori orizzontali - 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

<table class = "table" > 
  …
</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-8).

#	Nomu	Casata	Nome d'utilizatore
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry	l'uccello	@twitter

<table class = "tavula à strisce" > 
  …
</table>

`.table-bordered`

Aghjunghjite cunfini è anguli arrotondati à a tavula.

#	Nomu	Casata	Nome d'utilizatore
1	Marcu	Ottu	@mdo
1	Marcu	Ottu	@getbootstrap
2	Ghjacobbu	Thornton	@grassu
3	Larry l'uccello		@twitter

<table class = "tavula bordata da tavola" > 
  …
</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

<table class = "table table-hover" > 
  …
</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

<table class = "table table-condensed" > 
  …
</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.
`.warning`	Indica un avvisu chì puderia avè bisognu d'attenzione.
`.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
4	TB - Mensili	04/04/2012	Chjamate per cunfirmà

...
  < tr class = "successu" >
    <td> 1 < /td>
    <td>TB - Mensili</ td >
    <td> 01 / 04 / 2012 < /td>
    <td> Appruvatu</ td >
  </ tr >
...

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 è u piazzamentu).
`<caption>`	Descrizzione o riassuntu di ciò chì a tavula cuntene, soprattuttu utile per i lettori di schermu

<tavula>
  <caption> ... </caption>
  <testa>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

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.

<forma>
  <set di campi>
    <legenda> Legenda </legenda>
    <label> Nome di l'etichetta </label>
    <input type = "text" placeholder = "Digita qualcosa..." >  
    <span class = "help-block" > Esempiu di testu d'aiutu à livellu di bloccu quì. </span> 
    <label class = "checkbox" > 
      <input type = "checkbox" > Verificatemi 
    </label>
    <button type = "submit" class = "btn" > Invia </button>  
  </fieldset>
</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.

<form class = "form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Ricerca </button>  
</form>

Forma in linea

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

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "E-mail" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Ricurdativi di mè 
  </label>
  <button type = "submit" class = "btn" > Sign in </button>  
</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

<form class = "form-horizontal" > 
  <div class = "gruppu di cuntrollu" > 
    <label class = "control-label" for = "inputEmail" > Email </label>  
    <div class = "cuntrolli" > 
      <input type = "text" id = "inputEmail" placeholder = "E-mail" >   
    </div>
  </div>
  <div class = "gruppu di cuntrollu" > 
    <label class = "control-label" for = "inputPassword" > Password </label>  
    <div class = "cuntrolli" > 
      <input type = "password" id = "inputPassword" placeholder = "Password" >   
    </div>
  </div>
  <div class = "gruppu di cuntrollu" > 
    <div class = "cuntrolli" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > Ricurdativi di mè 
      </label>
      <button type = "submit" class = "btn" > Sign in </button>  
    </div>
  </div>
</form>

Cuntrolli di forma supportati

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

Inputs

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

Esige l'usu di un specificatu typein ogni mumentu.

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

Area di testu

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

<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)

<label class = "checkbox" > 
  <input type = "checkbox" value = "" >  
  L'opzione unu hè questu è quellu - assicuratevi di include perchè hè grande
</label>
 
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" verificata >     
  L'opzione unu hè questu è quellu - assicuratevi di include perchè hè grande
</label>
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  L'opzione duie pò esse qualcosa d'altru è selezziunate l'opzione diselezzione unu
</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.

<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</label>

Selezziunate

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

<selezzione>
  <option> 1 </option>
  <opzione> 2 </option>
  <opzione> 3 </option>
  <option> 4 </option>
  <opzione> 5 </option>
</select>
 
<select multiple = "multiple" > 
  <option> 1 </option>
  <opzione> 2 </option>
  <opzione> 3 </option>
  <option> 4 </option>
  <opzione> 5 </option>
</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.

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput" type = "testu" >   
  <span class = "add-on" > .00 </span> 
</div>

Cumminatu

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

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput" type = "testu" >   
  <span class = "add-on" > .00 </span> 
</div>

Buttons invece di testu

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

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton" type = "testu" >   
  <button class = "btn" type = "button" > Vai ! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons" type = "testu" >   
  <button class = "btn" type = "button" > Ricerca </button>  
  <button class = "btn" type = "button" > Opzioni </button>  
</div>

Button dropdowns

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton" type = "testu" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Azzione
      <span class = "caret" ></span> 
    </button>
    <ul class = "menu a discesa" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Azzione
      <span class = "caret" ></span> 
    </button>
    <ul class = "menu a discesa" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "testu" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Azzione
      <span class = "caret" ></span> 
    </button>
    <ul class = "menu a discesa" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton" type = "testu" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Azzione
      <span class = "caret" ></span> 
    </button>
    <ul class = "menu a discesa" > 
      ...
    </ul>
  </div>
</div>

Gruppi a tendina segmentati

<forma>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <input type = "testu" > 
  </div>
  <div class = "input-append" > 
    <input type = "testu" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Forma di ricerca

<form class = "form-search" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Ricerca </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Ricerca </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

Cuntrolla a taglia

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

Ingressi di livellu di bloccu

Fate qualsiasi <input>o <textarea>elementu cumportanu cum'è un elementu di livellu di bloccu.

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Misure relative

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<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.

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</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.

<div class = "cuntrolli" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controls controls-row" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

Ingressi ineditabili

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

<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-actions, i buttuni saranu automaticamente indentati per allineà cù i cuntrolli di forma.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > Salvà i cambiamenti </button>  
  <button type = "button" class = "btn" > Annulla </button>  
</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

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

Bloccà l'aiutu

<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.

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

Ingressi invalidi

Ingressi di stile via a funziunalità predefinita di u navigatore cù :invalid. Specificate un type, aghjunghje l' requiredattributu se u campu ùn hè micca opzionale, è (se applicabile) specificate un pattern.

Questu ùn hè micca dispunibule in versioni di Internet Explorer 7-9 per mancanza di supportu per i pseudo-selettori CSS.

<input class = "span3" type = "email" necessariu >

Ingressi disabilitati

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

<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, informazioni è successu. Per aduprà, aghjunghje a classa appropritata à u circondu .control-group.

<div class = "avvertimentu di u gruppu di cuntrollu" > 
  <label class = "control-label" for = "inputWarning" > Input with warning </label>  
  <div class = "cuntrolli" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Qualcosa pò esse andatu male </span> 
  </div>
</div>
 
<div class = "errore di u gruppu di cuntrollu" > 
  <label class = "control-label" for = "inputError" > Input cù errore </label>  
  <div class = "cuntrolli" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Per piacè corregge l'errore </span> 
  </div>
</div>
 
<div class = "infurmazione di u gruppu di cuntrollu" > 
  <label class = "control-label" for = "inputInfo" > Input with info </label>  
  <div class = "cuntrolli" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > U nome d'utilizatore hè digià pigliatu </span> 
  </div>
</div>
 
<div class = "successu di u gruppu di cuntrollu" > 
  <label class = "control-label" for = "inputSuccess" > Input cù successu </label>  
  <div class = "cuntrolli" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

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 azione 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

Compatibilità 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.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Pulsante grande </button>  
  <button class = "btn btn-large" type = "button" > Pulsante grande </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Pulsante predefinitu </button>  
  <button class = "btn" type = "button" > Pulsante predefinitu </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Picculu buttone </button>  
  <button class = "btn btn-small" type = "button" > Picculu buttone </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Mini buttone </button>  
  <button class = "btn btn-mini" type = "button" > Mini buttone </button>  
</p>

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

<button class = "btn btn-large btn-block btn-primary" type = "button" > Pulsante di livellu di bloccu </button>  
<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

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

A testa alta !Avemu usatu .disabledcum'è una classa di utilità quì, simile à a .activeclassa cumuni, cusì ùn hè micca necessariu prefissu. Inoltre, sta classa hè solu per l'esteticu; duvete aduprà JavaScript persunalizatu per disattivà i ligami quì.

Elementu buttone

Aghjunghjite l' disabledattributu à i <button>buttoni.

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

Una classe, parechje tag

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

<a class = "btn" href = "" > Link </a>  
<button class = "btn" type = "submit" > Button </button>  
<input class = "btn" type = "button" value = "Input" >   
<input class = "btn" type = "submit" value = "Invia" >

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

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

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

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

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:

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

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

<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

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

Dropdown in un gruppu di buttone

User

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icona-utente icona-bianca" ></i> User </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "menu a discesa" > 
    <li><a href = "#" ><i class = "icona-matita" ></i> Edita </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Elimina </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Ban </a></li>  
    <li class = "divider" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Fate amministratore </a></li>  
  </ul>
</div>

Taglie di buttone

Stella Stella Stella

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Stella </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Stella </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Stella </a>

Navigazione

<ul class = "nav nav-list" > 
  <li class = "attivu" ><a href = "#" ><i class = "icona-home icona-bianca" ></i> Casa </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Biblioteca </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Applicazioni </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Varie </a></li>  
</ul>

Campi di furmulariu

<div class = "gruppu di cuntrollu" > 
  <label class = "control-label" for = "inputIcon" > Indirizzu email </label>  
  <div class = "cuntrolli" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icona-busta" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

Tipografia

Intestazioni

h1. Titre 1

h2. Titre 2

h3. Titre 3

h4. Titre 4

h5. Titre 5

h6. Titre 6

Copia di corpu

Copia di u corpu di piombu

Custruitu cù Meno

Enfasi

<small>

Audace

Italicu

Classi di allineamentu

Classi di enfasi

Abbreviazioni

<abbr>

<abbr class="initialism">

Indirizzi

<address>

Blockquotes

Blockquote predefinitu

Opzioni di blockquote

Nomine una fonte

Display alternati

Listi

Senza ordine

Cumandatu

Unstyled

In linea

Descrizzione

Descrizzione horizontale

Codice

In linea

Bloccu basicu

Tavule

Stili predeterminati

Classi opzionali

.table-striped

.table-bordered

.table-hover

.table-condensed

Classi di fila opzionali

Marcatura di tabella supportata

Forme

Stili predeterminati

Disposizione opzionale

Forma di ricerca

Forma in linea

Forma horizontale

Cuntrolli di forma supportati

Inputs

Area di testu

Checkboxes è radiu

Default (stacked)

Caselle di spunta in linea

Selezziunate

Estende i cuntrolli di forma

Ingressi preposti è appiccicati

Opzioni predefinite

Cumminatu

Buttons invece di testu

Button dropdowns

Gruppi a tendina segmentati

Forma di ricerca

Cuntrolla a taglia

Ingressi di livellu di bloccu

Misure relative

Dimensione di a griglia

Ingressi ineditabili

Forme azzione

Testu d'aiutu

Aiutu in linea

Bloccà l'aiutu

Stati di cuntrollu di forma

Focus di input

Ingressi invalidi

Ingressi disabilitati

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`