Intestazioni

<h1>Sono disponibili tutte le intestazioni HTML <h6>.

h1. Titolo 1

h2. Titolo 2

h3. Titolo 3

h4. Titolo 4

h5. Titolo 5

h6. Titolo 6

Copia del corpo

L'impostazione predefinita globale di Bootstrap font-sizeè 14px , con a line-heightdi 20px . Questo si applica a <body>e tutti i paragrafi. Inoltre, <p>(paragrafi) ricevono un margine inferiore della metà dell'altezza della linea (10px per impostazione predefinita).

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.

Mecenate 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 del corpo principale

Fai risaltare un paragrafo aggiungendo .lead.

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

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

Costruito con meno

La scala tipografica si basa su due variabili LESS in variabili.less : @baseFontSizee @baseLineHeight. La prima è la dimensione del carattere di base utilizzata in tutto e la seconda è l'altezza della linea di base. Usiamo queste variabili e alcuni semplici calcoli matematici per creare i margini, i padding e le altezze delle linee di tutti i nostri tipi e altro ancora. Personalizzali e Bootstrap si adatta.

Enfasi

Utilizza i tag di enfasi predefiniti di HTML con stili leggeri.

`<small>`

Per ridurre l'enfasi in linea o blocchi di testo, utilizzare il tag piccolo.

Questa riga di testo deve essere trattata come una stampa fine.

<p> <piccolo> Questa riga di testo deve essere trattata come caratteri piccoli. </piccolo> </p>

Grassetto

Per enfatizzare uno snippet di testo con una grammatura più pesante.

Il seguente frammento di testo viene visualizzato in grassetto .

<strong> visualizzato in grassetto </strong>

Corsivo

Per enfatizzare un frammento di testo in corsivo.

Il seguente frammento di testo viene visualizzato in corsivo .

<em> reso come testo in corsivo </em>

Dritta!Sentiti libero di usare <b>e <i>in HTML5. <b>ha lo scopo di evidenziare parole o frasi senza trasmettere ulteriore importanza mentre <i>è principalmente per voce, termini tecnici, ecc.

Classi di allineamento

Riallinea facilmente il testo ai componenti con le classi di allineamento del testo.

Testo allineato a sinistra.

Testo allineato al centro.

Testo allineato a destra.

<p class = "text-left" > Testo allineato a sinistra. </p> 
<p class = "text-center" > Testo allineato al centro. </p> 
<p class = "testo-destra" > Testo allineato a destra. </p>

Classi di enfasi

Trasmetti significato attraverso il colore con una manciata 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. Pellentesco ornare sem lacinia quam venenatis.

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

<p class = "sordina" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "avviso di testo" > 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. Pellentesco ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Abbreviazioni

Implementazione stilizzata <abbr>dell'elemento HTML per abbreviazioni e acronimi per mostrare la versione estesa al passaggio del mouse. Le abbreviazioni con un titleattributo hanno un bordo inferiore punteggiato chiaro e un cursore di aiuto al passaggio del mouse, fornendo ulteriore contesto al passaggio del mouse.

`<abbr>`

Per il testo espanso al passaggio lungo di un'abbreviazione, includi l' titleattributo.

Un'abbreviazione della parola attributo è attr .

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

`<abbr class="initialism">`

Aggiungi .initialisma un'abbreviazione per una dimensione del carattere leggermente più piccola.

L' HTML è la cosa migliore dopo il pane a fette.

<abbr title = "HyperText Markup Language" class = "inizialismo" > HTML </abbr>

Indirizzi

Presentare le informazioni di contatto per l'antenato più vicino o l'intero corpo di lavoro.

`<address>`

Mantieni la formattazione terminando tutte le righe con <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Nome completo
[email protected]

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

Citazioni in blocco

Per citare blocchi di contenuto da un'altra fonte all'interno del documento.

Citazione predefinita

Avvolgi <blockquote>qualsiasi HTML come citazione. Per virgolette semplici consigliamo un <p>.

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

<citazione in blocco>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Intero posuere erat a ante. </p>
</blockquote>

Opzioni tra virgolette

Cambiamenti di stile e contenuto per semplici variazioni su un blockquote standard.

Denominare una fonte

Aggiungi <small>tag per identificare la fonte. Avvolgi il nome del lavoro di origine in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Intero posuere erat a ante.
Qualcuno famoso nel titolo della fonte

<citazione in blocco>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Intero posuere erat a ante. </p>
  <small> Qualcuno famoso <cite title = "Source Title" > Source Title </cite></small> 
</blockquote>

Visualizzazioni alternative

Utilizzare .pull-rightper un blockquote flottante allineato a destra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Intero posuere erat a ante.
Qualcuno famoso nel titolo della fonte

< classe blockquote = "tira-destra" > 
  ...
</blockquote>

Elenchi

Non ordinato

Un elenco di elementi in cui l'ordine non è esplicitamente rilevante.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Intero molestie lorem a massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibolo 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>

Ordinato

Un elenco di elementi in cui l'ordine è esplicitamente rilevante .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Intero molestie lorem a 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>

Senza stile

Rimuovere il riempimento predefinito list-stylee sinistro sugli elementi dell'elenco (solo bambini immediati).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Intero molestie lorem a massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibolo 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

Posiziona tutti gli elementi dell'elenco su una singola riga con inline-blockun leggero riempimento.

Lorem ipsum
Fasello iaculo
Nulla volutpat

<ul class = "inline" > 
  <li> ... </li>
</ul>

Descrizione

Un elenco di termini con le relative descrizioni.

Elenchi di descrizione: Un elenco di descrizioni è perfetto per definire i termini.
Euismod: Vestibulum id ligula porta felis euismod semper 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>

Descrizione orizzontale

Metti in <dl>fila termini e descrizioni fianco a fianco.

Elenchi di descrizione: Un elenco di descrizioni è perfetto per definire i termini.
Euismod: Vestibulum id ligula porta felis euismod semper 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.

< classe dl = "dl-orizzontale" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Dritta!Gli elenchi di descrizioni orizzontali troncheranno i termini troppo lunghi per rientrare nella correzione della colonna di sinistra text-overflow. Nelle viste più strette, passeranno al layout in pila predefinito.

In linea

Avvolgi frammenti di codice in linea con <code>.

Ad esempio, <section>dovrebbe essere avvolto come inline.

Ad esempio , <codice> & lt ; la sezione & gt ;</ code > deve essere racchiusa come inline .

Blocco di base

Utilizzare <pre>per più righe di codice. Assicurati di sfuggire alle parentesi angolari nel codice per un rendering corretto.

<p>Testo di esempio qui...</p>

<precedente>
  <p>Testo di esempio qui...</p>
</pre>

Dritta!Assicurati di mantenere il codice all'interno <pre>dei tag il più vicino possibile a sinistra; renderà tutte le schede.

Puoi facoltativamente aggiungere la .pre-scrollableclasse che imposterà un'altezza massima di 350 px e fornirà una barra di scorrimento dell'asse y.

Stili predefiniti

Per uno stile di base, con imbottitura leggera e solo divisori orizzontali, aggiungi la classe base .tablea qualsiasi <table>.

#	Nome di battesimo	Cognome	Nome utente
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry	l'uccello	@twitter

< classe tabella = "tabella" > 
  …
</tabella>

Classi facoltative

Aggiungi una delle seguenti classi alla .tableclasse base.

`.table-striped`

Aggiunge zebra-striping a qualsiasi riga della tabella all'interno del selettore CSS (non disponibile in IE7-8) <tbody>.:nth-child

#	Nome di battesimo	Cognome	Nome utente
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry	l'uccello	@twitter

< classe tabella = "tabella a strisce di tabella" > 
  …
</tabella>

`.table-bordered`

Aggiungi bordi e angoli arrotondati al tavolo.

#	Nome di battesimo	Cognome	Nome utente
1	Segno	Ottone	@mdo
1	Segno	Ottone	@getbootstrap
2	Giacobbe	Thornton	@Grasso
3	Larry l'Uccello		@twitter

< classe tabella = "tabella con bordo tabella" > 
  …
</tabella>

`.table-hover`

Abilita uno stato al passaggio del mouse sulle righe della tabella all'interno di un file <tbody>.

#	Nome di battesimo	Cognome	Nome utente
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry l'Uccello		@twitter

< classe tabella = "tabella al passaggio del mouse" > 
  …
</tabella>

`.table-condensed`

Rende i tavoli più compatti tagliando a metà l'imbottitura delle celle.

#	Nome di battesimo	Cognome	Nome utente
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry l'Uccello		@twitter

< classe tabella = "tabella condensata in tabella" > 
  …
</tabella>

Classi di riga opzionali

Usa le classi contestuali per colorare le righe della tabella.

Classe	Descrizione
`.success`	Indica un'azione riuscita o positiva.
`.error`	Indica un'azione pericolosa o potenzialmente negativa.
`.warning`	Indica un avviso che potrebbe richiedere attenzione.
`.info`	Utilizzato in alternativa agli stili predefiniti.

#	Prodotto	Pagamento preso	Stato
1	TB - Mensile	01/04/2012	Approvato
2	TB - Mensile	02/04/2012	Rifiutato
3	TB - Mensile	03/04/2012	In attesa di
4	TB - Mensile	04/04/2012	Chiama per confermare

...
  < tr classe = "successo" >
    <td> 1 < /td>
    <td>TB - Mensile</ td >
    < td > 01/04/2012 < / td >
    <td>Approvato</ td >
  </ tr >
...

Marcatura tabella supportata

Elenco degli elementi HTML della tabella supportati e come dovrebbero essere utilizzati.

Etichetta	Descrizione
`<table>`	Elemento di wrapping per la visualizzazione dei dati in formato tabellare
`<thead>`	Elemento contenitore per le righe di intestazione della tabella ( `<tr>`) per etichettare le colonne della tabella
`<tbody>`	Elemento contenitore per righe di tabella ( `<tr>`) nel corpo della tabella
`<tr>`	Elemento contenitore per un set di celle di tabella ( `<td>`o `<th>`) che appare su una singola riga
`<td>`	Cella di tabella predefinita
`<th>`	Cella di tabella speciale per etichette di colonna (o riga, a seconda dell'ambito e della posizione).
`<caption>`	Descrizione o riepilogo di ciò che contiene la tabella, particolarmente utile per le utilità per la lettura dello schermo

<tabella>
  <caption> ... </caption>
  <testa>
    <tr>
      <esimo> ... </esimo>
      <esimo> ... </esimo>
    </tr>
  </thead>
  <corpo>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</tabella>

Stili predefiniti

I controlli dei moduli individuali ricevono uno stile, ma senza alcuna classe di base richiesta <form>o modifiche sostanziali nel markup. Risulta in etichette impilate allineate a sinistra sopra i controlli modulo.

<modulo>
  <set di campi>
    <legend> Legenda </legend>
    <label> Nome etichetta </label>
    < tipo di input = segnaposto "testo" = "Digita qualcosa..." >  
    <span class = "help-block" > Esempio di testo di aiuto a livello di blocco qui. </span> 
    < classe etichetta = "casella di controllo" > 
      < tipo di input = "casella di controllo" > Controllami 
    </etichetta>
    < tipo di pulsante = "invia" class = "btn" > Invia </button>  
  </fieldset>
</modulo>

Layout opzionali

In Bootstrap sono inclusi tre layout di moduli opzionali per casi d'uso comuni.

Modulo di ricerca

Aggiungi .form-searchal modulo e .search-queryal <input>per un input di testo extra-arrotondato.

< classe modulo = "ricerca modulo" > 
  < tipo di input = "testo" class = "query-ricerca del mezzo di input" >  
  <button type = "submit" class = "btn" > Cerca </button>  
</modulo>

Modulo in linea

Aggiungi .form-inlineetichette allineate a sinistra e controlli di blocco in linea per un layout compatto.

< classe modulo = "inline modulo" > 
  < tipo di input = "testo" class = segnaposto "input-small" = "Email" >   
  < tipo di input = "password" class = segnaposto "input-small" = "password" >   
  < classe etichetta = "casella di controllo" > 
    < tipo di input = "casella di controllo" > Ricordami 
  </etichetta>
  <button type = "submit" class = "btn" > Accedi </button>  
</modulo>

Forma orizzontale

Allinea a destra le etichette e spostale a sinistra per farle apparire sulla stessa riga dei controlli. Richiede il maggior numero di modifiche al markup da un modulo predefinito:

Aggiungi .form-horizontalal modulo
Avvolgi etichette e controlli.control-group
Aggiungi .control-labelall'etichetta
Avvolgere tutti i controlli associati .controlsper un corretto allineamento

< classe modulo = "forma-orizzontale" > 
  < classe div = "gruppo di controllo" > 
    <label class = "etichetta di controllo" for = "inputEmail" > Email </label>  
    < classe div = "controlli" > 
      < tipo di input = "testo" id = segnaposto "inputEmail" = "Email" >   
    </div>
  </div>
  < classe div = "gruppo di controllo" > 
    <label class = "etichetta di controllo" for = "inputPassword" > Password </label>  
    < classe div = "controlli" > 
      < tipo di input = "password" id = segnaposto "inputPassword" = "Password" >   
    </div>
  </div>
  < classe div = "gruppo di controllo" > 
    < classe div = "controlli" > 
      < classe etichetta = "casella di controllo" > 
        < tipo di input = "casella di controllo" > Ricordami 
      </etichetta>
      <button type = "submit" class = "btn" > Accedi </button>  
    </div>
  </div>
</modulo>

Controlli dei moduli supportati

Esempi di controlli di modulo standard supportati in un layout di modulo di esempio.

Ingressi

Controllo modulo più comune, campi di input basati su testo. Include il supporto per tutti i tipi di HTML5: testo, password, datetime, datetime-local, data, mese, ora, settimana, numero, e-mail, url, ricerca, tel e colore.

Richiede l'uso di uno specificato typein ogni momento.

< tipo di input = segnaposto "testo" = "Input di testo" >

Area di testo

Controllo modulo che supporta più righe di testo. Modificare rowsl'attributo se necessario.

<textarea righe = "3" ></textarea>

Caselle di controllo e radio

Le caselle di controllo servono per selezionare una o più opzioni in un elenco mentre le radio servono per selezionare un'opzione tra molte.

Predefinito (impilato)

< classe etichetta = "casella di controllo" > 
  < tipo di input = valore "casella di controllo" = "" >  
  L'opzione uno è questo e quello: assicurati di includere perché è fantastico
</etichetta>
 
< classe etichetta = "radio" > 
  < tipo di input = "radio" nome = "optionsRadios" id = "optionsRadios1" valore = "opzione1" selezionata >     
  L'opzione uno è questo e quello: assicurati di includere perché è fantastico
</etichetta>
< classe etichetta = "radio" > 
  < tipo di input = "radio" nome = "optionsRadios" id = "optionsRadios2" valore = "opzione2" >    
  L'opzione due può essere qualcos'altro e selezionandola si deseleziona l'opzione uno
</etichetta>

Caselle di controllo in linea

Aggiungi la .inlineclasse a una serie di caselle di controllo o le radio per i controlli vengono visualizzate sulla stessa riga.

< classe etichetta = "casella di controllo in linea" > 
  < tipo di input = "casella di controllo" id = "inlineCheckbox1" valore = "opzione1" > 1   
</etichetta>
< classe etichetta = "casella di controllo in linea" > 
  < tipo di input = "casella di controllo" id = "inlineCheckbox2" valore = "opzione2" > 2   
</etichetta>
< classe etichetta = "casella di controllo in linea" > 
  < tipo di input = "casella di controllo" id = "inlineCheckbox3" valore = "opzione3" > 3   
</etichetta>

Seleziona

Utilizzare l'opzione predefinita o specificare a multiple="multiple"per mostrare più opzioni contemporaneamente.

<seleziona>
  <opzione> 1 </opzione>
  <opzione> 2 </opzione>
  <opzione> 3 </opzione>
  <opzione> 4 </opzione>
  <opzione> 5 </opzione>
</seleziona>
 
<seleziona multiplo = "multiplo" > 
  <opzione> 1 </opzione>
  <opzione> 2 </opzione>
  <opzione> 3 </opzione>
  <opzione> 4 </opzione>
  <opzione> 5 </opzione>
</seleziona>

Estensione dei controlli dei moduli

Aggiungendo oltre ai controlli del browser esistenti, Bootstrap include altri utili componenti del modulo.

Input anteposti e aggiunti

Aggiungi testo o pulsanti prima o dopo qualsiasi input basato su testo. Tieni presente che selectgli elementi non sono supportati qui.

Opzioni predefinite

Avvolgi an .add-one an inputcon una delle due classi per anteporre o aggiungere testo a un input.

<div class = "input-prepend" > 
  <span class = "componente aggiuntivo" > @ </span> 
  < classe di input = "span2" id = "prependedInput" tipo = segnaposto "testo" = "Nome utente" >    
</div>
< classe div = "input-append" > 
  < classe di input = "span2" id = "appendedInput " tipo = "testo" >   
  <span class = "add-on" > .00 </span> 
</div>

Combinato

Usa entrambe le classi e due istanze di .add-onper anteporre e aggiungere un input.

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  < classe di input = "span2" id = "appendedPrependedInput " tipo = "testo" >   
  <span class = "add-on" > .00 </span> 
</div>

Pulsanti al posto del testo

Invece di a <span>con testo, usa a .btnper allegare uno o due pulsanti a un input.

< classe div = "input-append" > 
  < classe di input = "span2" id = "appendedInputButton " tipo = "testo" >   
  < classe pulsante = "btn" tipo = "pulsante" > Vai! </pulsante>  
</div>

< classe div = "input-append" > 
  < classe di input = "span2" id = "appendedInputButtons " tipo = "testo" >   
  <button class = "btn" type = "button" > Cerca </button>  
  < classe pulsante = "btn" tipo = "pulsante" > Opzioni </pulsante>  
</div>

Menu a discesa dei pulsanti

< classe div = "input-append" > 
  < classe di input = "span2" id = "appendedDropdownButton " tipo = "testo" >   
  < classe div = "gruppo btn" > 
    < classe pulsante = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Azione
      <span class = "caret" ></span> 
    </pulsante>
    <ul class = "menu a discesa" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  < classe div = "gruppo btn" > 
    < classe pulsante = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Azione
      <span class = "caret" ></span> 
    </pulsante>
    <ul class = "menu a discesa" > 
      ...
    </ul>
  </div>
  < classe di input = "span2" id = "prependedDropdownButton" tipo = "testo" >   
</div>

<div class = "input-prepend input-append" > 
  < classe div = "gruppo btn" > 
    < classe pulsante = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Azione
      <span class = "caret" ></span> 
    </pulsante>
    <ul class = "menu a discesa" > 
      ...
    </ul>
  </div>
  < classe di input = "span2" id = "appendedPrependedDropdownButton " type = "testo" >   
  < classe div = "gruppo btn" > 
    < classe pulsante = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Azione
      <span class = "caret" ></span> 
    </pulsante>
    <ul class = "menu a discesa" > 
      ...
    </ul>
  </div>
</div>

Gruppi a discesa segmentati

<modulo>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    < tipo di input = "testo" > 
  </div>
  < classe div = "input-append" > 
    < tipo di input = "testo" > 
    <div class = "btn-group" > ... </div> 
  </div>
</modulo>

Modulo di ricerca

< classe modulo = "ricerca modulo" > 
  < classe div = "input-append" > 
    < tipo di input = "testo" classe = "span2 query di ricerca" >  
    <button type = "submit" class = "btn" > Cerca </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Cerca </button>  
    < tipo di input = "testo" classe = "span2 query di ricerca" >  
  </div>
</modulo>

Controllo del dimensionamento

Usa classi di dimensioni relative come .input-largeo abbina i tuoi input alle dimensioni delle colonne della griglia usando .span*le classi.

Ingressi a livello di blocco

Fai in modo che qualsiasi elemento <input>o <textarea>si comporti come un elemento a livello di blocco.

< classe di input = "livello di blocco di input" tipo = segnaposto "testo" = ".livello di blocco di input" >

Dimensionamento relativo

< classe di input = "input-mini" tipo = "testo" segnaposto = ".input-mini" >   
< classe di input = "input-small" type = "text" segnaposto = ".input-small" >   
< classe di input = "medio-input" tipo = segnaposto "testo" = ".medio-input" >   
< classe di input = "input-large" type = "testo" segnaposto = ".input-large" >   
< classe di input = "input-xlarge" type = "testo" segnaposto = ".input-xlarge" >   
< classe di input = "input-xxlarge" type = "testo" segnaposto = ".input-xxlarge" >

Dritta!Nelle versioni future, modificheremo l'uso di queste classi di input relative in modo che corrispondano alle dimensioni dei nostri pulsanti. Ad esempio, .input-largeaumenterà il riempimento e la dimensione del carattere di un input.

Dimensionamento della griglia

Utilizzare .span1per .span12per input che corrispondono alle stesse dimensioni delle colonne della griglia.

< classe di input = "span1" tipo = "testo" segnaposto = ".span1" >   
< classe di input = "span2" tipo = "testo" segnaposto = ".span2" >   
< classe di input = "span3" tipo = "testo" segnaposto = ".span3" >   
<seleziona classe = "span1" > 
  ...
</seleziona>
<seleziona classe = "span2" > 
  ...
</seleziona>
<seleziona classe = "span3" > 
  ...
</seleziona>

Per più input di griglia per riga, utilizzare la .controls-rowclasse modificatore per la spaziatura corretta . Fa fluttuare gli input per comprimere gli spazi bianchi, imposta i margini appropriati e cancella il float.

< classe div = "controlli" > 
  < classe di input = "span5" tipo = "testo" segnaposto = ".span5" >   
</div>
<div class = "controlli controlli-riga" > 
  < classe di input = "span4" tipo = "testo" segnaposto = ".span4" >   
  < classe di input = "span1" tipo = "testo" segnaposto = ".span1" >   
</div>
...

Input non modificabili

Presenta i dati in un modulo che non è modificabile senza utilizzare il markup del modulo effettivo.

<span class = "input-xlarge uneditable-input" > Qualche valore qui </span>

Azioni di forma

Termina un modulo con un gruppo di azioni (pulsanti). Se posizionati all'interno di un .form-actions, i pulsanti rientreranno automaticamente per allinearsi con i controlli del modulo.

< classe div = "azioni-form" > 
  <button type = "submit" class = "btn btn-primary" > Salva le modifiche </button>  
  < tipo di pulsante = "pulsante" class = "btn" > Annulla </button>  
</div>

Testo guida

Supporto in linea e a livello di blocco per il testo della guida che appare intorno ai controlli dei moduli.

Aiuto in linea

< tipo di input = "testo" ><span class = "help-inline" > Testo della guida in linea </span>

Blocca aiuto

<input type = "text" ><span class = "help-block" > Un blocco più lungo di testo della guida che si interrompe su una nuova riga e può estendersi oltre una riga. </span>

Stati di controllo della forma

Fornisci feedback a utenti o visitatori con stati di feedback di base sui controlli dei moduli e sulle etichette.

Messa a fuoco dell'input

outlineRimuoviamo gli stili predefiniti su alcuni controlli del modulo e applichiamo un box-shadowa al suo posto per :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Questo è focalizzato..." >

Input non validi

Input di stile tramite la funzionalità predefinita del browser con :invalid. Specificare a type, aggiungere l' requiredattributo se il campo non è facoltativo e (se applicabile) specificare a pattern.

Questo non è disponibile nelle versioni di Internet Explorer 7-9 a causa della mancanza di supporto per pseudo-selettori CSS.

< classe di input = tipo "span3" = "email" richiesta >

Ingressi disabilitati

Aggiungi l' disabledattributo su un input per impedire l'input dell'utente e attivare un aspetto leggermente diverso.

< classe di input = "input-xlarge" id = "disabledInput" type = "text" segnaposto = "Input disabilitato qui..." disabilitato >

Stati di convalida

Bootstrap include stili di convalida per messaggi di errore, avviso, informazioni e successo. Per utilizzare, aggiungi la classe appropriata al circostante .control-group.

<div class = "avviso gruppo di controllo" > 
  <label class = "control-label" for = "inputWarning" > Input con avviso </label>  
  < classe div = "controlli" > 
    < tipo di input = "testo" id = "inputWarning" >  
    <span class = "help-inline" > Qualcosa potrebbe essere andato storto </span> 
  </div>
</div>
 
<div class = "errore del gruppo di controllo" > 
  <label class = "control-label" for = "inputError" > Input con errore </label>  
  < classe div = "controlli" > 
    < tipo di input = "testo" id = "inputError" >  
    <span class = "help-inline" > Correggi l'errore </span> 
  </div>
</div>
 
<div class = "informazioni gruppo di controllo" > 
  <label class = "control-label" for = "inputInfo" > Input con informazioni </label>  
  < classe div = "controlli" > 
    < tipo di input = "testo" id = "inputInfo" >  
    <span class = "help-inline" > Il nome utente è già occupato </span> 
  </div>
</div>
 
<div class = "successo del gruppo di controllo" > 
  <label class = "control-label" for = "inputSuccess" > Input con successo </label>  
  < classe div = "controlli" > 
    < tipo di input = "testo" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

Pulsanti predefiniti

Gli stili dei pulsanti possono essere applicati a qualsiasi cosa con la .btnclasse applicata. Tuttavia, in genere ti consigliamo di applicarli solo a <a>e <button>agli elementi per il miglior rendering.

Pulsante	classe=""	Descrizione
	`btn`	Pulsante grigio standard con sfumatura
	`btn btn-primary`	Fornisce un peso visivo aggiuntivo e identifica l'azione principale in una serie di pulsanti
	`btn btn-info`	Utilizzato in alternativa agli stili predefiniti
	`btn btn-success`	Indica un'azione riuscita o positiva
	`btn btn-warning`	Indica che è necessario prestare attenzione con questa azione
	`btn btn-danger`	Indica un'azione pericolosa o potenzialmente negativa
	`btn btn-inverse`	Pulsante grigio scuro alternativo, non legato a un'azione oa un utilizzo semantico
	`btn btn-link`	Riduci l'enfasi a un pulsante facendolo sembrare un collegamento mantenendo il comportamento del pulsante

Compatibilità tra browser

IE9 non ritaglia i gradienti di sfondo sugli angoli arrotondati, quindi lo rimuoviamo. Correlati, IE9 jankifica gli buttonelementi disabilitati, rendendo il testo grigio con una brutta ombra di testo che non possiamo correggere.

Dimensioni dei bottoni

Ti piacciono i pulsanti più grandi o più piccoli? Aggiungi .btn-large, .btn-small, o .btn-miniper dimensioni aggiuntive.

<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 predefinito </button>  
  <button class = "btn" type = "button" > Pulsante predefinito </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Pulsante piccolo </button>  
  <button class = "btn btn-small" type = "button" > Pulsante piccolo </button>  
</p>
<p>
  < classe pulsante = "btn btn-mini btn-primary" type = "pulsante" > Mini pulsante </button>  
  <button class = "btn btn-mini" type = "button" > Mini button </button>  
</p>

Crea pulsanti a livello di blocco, quelli che si estendono per l'intera larghezza di un genitore, aggiungendo .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > Pulsante di livello di blocco </button>  
<button class = "btn btn-large btn-block" type = "button" > Pulsante livello di blocco </button>

Stato disabile

Rendi i pulsanti non cliccabili sbiadendoli indietro del 50%.

Elemento di ancoraggio

Aggiungi la .disabledclasse ai <a>pulsanti.

Collegamento primario Collegamento

<a href = "#" class = "btn btn-large btn-primary disabilitato" > Link principale </a>  
<a href = "#" class = "btn btn-large disabilitato" > Collegamento </a>

Dritta!Usiamo .disabledcome classe di utilità qui, simile alla .activeclasse comune, quindi non è richiesto alcun prefisso. Inoltre, questa classe è solo per l'estetica; è necessario utilizzare JavaScript personalizzato per disabilitare i collegamenti qui.

Elemento pulsante

Aggiungi l' disabledattributo ai <button>pulsanti.

< tipo di pulsante = "pulsante" class = "btn btn-large btn-primary disabilitato" disabilitato = "disabilitato" > Pulsante principale </button>   
< tipo di pulsante = "pulsante" class = "btn btn-large" disabilitato > Pulsante </pulsante>

Una classe, più tag

Usa la .btnclasse su un elemento <a>, <button>, o .<input>

<a class = "btn" href = "" > Collegamento </a>  
< classe pulsante = "btn" tipo = "invia" > Pulsante </pulsante>  
< classe di input = tipo "btn" = valore "pulsante" = "Input" >   
< classe di input = "btn" tipo = "invia" valore = "invia" >

Come best practice, prova ad abbinare l'elemento per il tuo contesto per garantire la corrispondenza del rendering cross-browser. Se hai un input, usa un <input type="submit">per il tuo pulsante.

Aggiungi classi a un <img>elemento per applicare facilmente uno stile alle immagini in qualsiasi progetto.

<img src = "..." class = "img-arrotondato" >  
<img src = "..." class = "img-cerchio" >  
<img src = "..." class = "img-polaroid" >

Dritta! .img-roundede .img-circlenon funzionano in IE7-8 per mancanza di border-radiussupporto.

Glifi di icone

140 icone in forma sprite, disponibili in grigio scuro (predefinito) e bianco, fornite da Glyphicons .

icona-vetro
icona-musica
icona-ricerca
icona-busta
icona-cuore
icona-stella
icona-stella-vuota
icona-utente
icona-film
icona-th-grande
icona-esimo
icona-esima-lista
icona-ok
icona-rimuovi
icona-zoom-in
icona-zoom-out
icona disattivata
icona-segnale
icona-ingranaggio
icona-cestino
icona-casa
icona-file
icona-tempo
icona-strada
icona-download-alt
download di icone
caricamento icone
icona-posta in arrivo
icon-play-circle
icona-ripeti
aggiornamento delle icone
icona-elenco-alt
icona-blocco
icona-bandiera
icon-cuffie
icona-volume-off
icona-volume-basso
icona-volume su
icon-qrcode
icona-codice a barre
icona-tag
tag-icona
icona-libro
icona-segnalibro
icona-stampa
icona-fotocamera
carattere-icona
icona in grassetto
icona-corsivo
icona-testo-altezza
icona-testo-larghezza
icona-allineamento-sinistra
icon-align-center
icona-allineamento-destra
icon-align-justify
elenco-icone
icona-rientro-sinistra
icona-rientro-destra
icona-facetime-video
icona-immagine
icona-matita
icona-mappa-marcatore
icona-regola
icona-tinta
icona-modifica
icona-condivisione
icona-verifica
icona-mossa
icona-passo-indietro
icona-veloce-indietro
icona indietro
icon-play
icona-pausa
icona-stop
icona avanti
icona-avanti veloce
icona-passo-avanti
icona-espellere
icona-chevron-sinistra
icona-chevron-destra
icona-segno-più
icona-segno-meno
icona-rimozione-segno
icona-ok-segno
icona-domanda-segno
icona-info-segno
screenshot dell'icona
icona-rimuovi-cerchio
icona-ok-cerchio
icona-ban-cerchio
icona-freccia-sinistra
icona-freccia-destra
icona-freccia su
icona-freccia giù
icona-condivisione-alt
icona-ridimensionamento-pieno
icona-ridimensiona-piccola
icona-più
icona-meno
icona-asterisco
icona-segno-esclamativo
icona-regalo
icona-foglia
icona-fuoco
icona-occhio-aperto
icona-occhio-chiudi
icona-segnale di avvertimento
icona-aereo
icona-calendario
icona casuale
icona-commento
icona-magnete
icona-chevron-up
icona-chevron-giù
icona-retweet
icona-carrello
icona-cartella-chiudi
icona-cartella-apri
icona-ridimensiona-verticale
icona-ridimensiona-orizzontale
icona-hdd
icona-corno
icona-campana
icona-certificato
icona pollice in su
icona-pollice-giù
icona-mano-destra
icona-mano-sinistra
icona-mano in alto
icona a mano
icona-cerchio-freccia-destra
icona-cerchio-freccia-sinistra
icona-cerchio-freccia-su
icona-cerchio-freccia-giù
icona-globo
chiave inglese
icone-attività
filtro-icona
icona-cartella
icona a schermo intero

Attribuzione di glificoni

Gli Halfling di Glyphicons normalmente non sono disponibili gratuitamente, ma un accordo tra Bootstrap e i creatori di Glyphicons lo ha reso possibile senza alcun costo per gli sviluppatori. Come ringraziamento, ti chiediamo di includere un link facoltativo di ritorno a Glyphicons quando possibile.

Come usare

Tutte le icone richiedono un <i>tag con una classe univoca, preceduta da icon-. Per usarlo, posiziona il seguente codice praticamente ovunque:

<i classe = "ricerca di icone" ></i>

Ci sono anche stili disponibili per le icone invertite (bianche), preparate con una classe extra. Applicheremo specificamente questa classe al passaggio del mouse e agli stati attivi per i collegamenti di navigazione e a discesa.

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

Dritta!Quando si utilizza accanto a stringhe di testo, come nei pulsanti o nei collegamenti di navigazione, assicurarsi di lasciare uno spazio dopo il <i>tag per una corretta spaziatura.

Esempi di icone

Usali nei pulsanti, nei gruppi di pulsanti per una barra degli strumenti, nella navigazione o negli input di moduli anteposti.

Bottoni

Gruppo di pulsanti in una barra degli strumenti dei pulsanti

< classe div = "barra degli strumenti btn" > 
  < classe div = "gruppo btn" > 
    <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>

Menu a discesa in un gruppo di pulsanti

Utente

< classe div = "gruppo btn" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Utente </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 = "icon-matita" ></i> Modifica </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 classe = "divisore" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Rendi amministratore </a></li>  
  </ul>
</div>

Dimensioni dei bottoni

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 = "attivo" ><a href = "#" ><i class = "icon-home icon-white" ></i> Home </a></li>   
  <li><a href = "#" ><i class = "libro-icona" ></i> Biblioteca </a></li>  
  <li><a href = "#" ><i class = "icon-matita" ></i> Applicazioni </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Varie </a></li>  
</ul>

Campi del modulo

< classe div = "gruppo di controllo" > 
  <label class = "control-label" for = "inputIcon" > Indirizzo e-mail </label>  
  < classe div = "controlli" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      < classe di input = "span2" id = "inputIcon" tipo = "testo" >   
    </div>
  </div>
</div>

Tipografia

Intestazioni

h1. Titolo 1

h2. Titolo 2

h3. Titolo 3

h4. Titolo 4

h5. Titolo 5

h6. Titolo 6

Copia del corpo

Copia del corpo principale

Costruito con meno

Enfasi

<small>

Grassetto

Corsivo

Classi di allineamento

Classi di enfasi

Abbreviazioni

<abbr>

<abbr class="initialism">

Indirizzi

<address>

Citazioni in blocco

Citazione predefinita

Opzioni tra virgolette

Denominare una fonte

Visualizzazioni alternative

Elenchi

Non ordinato

Ordinato

Senza stile

In linea

Descrizione

Descrizione orizzontale

Codice

In linea

Blocco di base

Tabelle

Stili predefiniti

Classi facoltative

.table-striped

.table-bordered

.table-hover

.table-condensed

Classi di riga opzionali

Marcatura tabella supportata

Le forme

Stili predefiniti

Layout opzionali

Modulo di ricerca

Modulo in linea

Forma orizzontale

Controlli dei moduli supportati

Ingressi

Area di testo

Caselle di controllo e radio

Predefinito (impilato)

Caselle di controllo in linea

Seleziona

Estensione dei controlli dei moduli

Input anteposti e aggiunti

Opzioni predefinite

Combinato

Pulsanti al posto del testo

Menu a discesa dei pulsanti

Gruppi a discesa segmentati

Modulo di ricerca

Controllo del dimensionamento

Ingressi a livello di blocco

Dimensionamento relativo

Dimensionamento della griglia

Input non modificabili

Azioni di forma

Testo guida

Aiuto in linea

Blocca aiuto

Stati di controllo della forma

Messa a fuoco dell'input

Input non validi

Ingressi disabilitati

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`