CSS di base

Elementi HTML fondamentali disegnati e migliorati con classi estensibili.

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.

  1. <p class = "text-left" > Testo allineato a sinistra. </p>
  2. <p class = "text-center" > Testo allineato al centro. </p>
  3. <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.

  1. <p class = "sordina" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p>
  2. <p class = "avviso di testo" > Etiam porta sem malesuada magna mollis euismod. </p>
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p>
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesco ornare sem lacinia quam venenatis. </p>
  5. <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]
  1. <indirizzo>
  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. </indirizzo>
  7.  
  8. <indirizzo>
  9. <strong> Nome completo </strong><br>
  10. <a href = "mailto:#" > [email protected] </a>
  11. </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.

  1. <citazione in blocco>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Intero posuere erat a ante. </p>
  3. </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
  1. <citazione in blocco>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Intero posuere erat a ante. </p>
  3. <small> Qualcuno famoso <cite title = "Source Title" > Source Title </cite></small>
  4. </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
  1. < classe blockquote = "tira-destra" >
  2. ...
  3. </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
  1. <ul>
  2. <li> ... </li>
  3. </ul>

Ordinato

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

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

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
  1. <ul class = "senza stile" >
  2. <li> ... </li>
  3. </ul>

In linea

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

  • Lorem ipsum
  • Fasello iaculo
  • Nulla volutpat
  1. <ul class = "inline" >
  2. <li> ... </li>
  3. </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.
  1. <dl>
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </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.
  1. < classe dl = "dl-orizzontale" >
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </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.
  1. 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>
  1. <precedente>
  2. <p>Testo di esempio qui...</p>
  3. </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
  1. < classe tabella = "tabella" >
  2. </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
  1. < classe tabella = "tabella a strisce di tabella" >
  2. </tabella>

.table-bordered

Aggiungi bordi e angoli arrotondati al tavolo.

# Nome di battesimo Cognome Nome utente
1 Segno Ottone @mdo
Segno Ottone @getbootstrap
2 Giacobbe Thornton @Grasso
3 Larry l'Uccello @twitter
  1. < classe tabella = "tabella con bordo tabella" >
  2. </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
  1. < classe tabella = "tabella al passaggio del mouse" >
  2. </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
  1. < classe tabella = "tabella condensata in tabella" >
  2. </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
  1. ...
  2. < tr classe = "successo" >
  3. <td> 1 < /td>
  4. <td>TB - Mensile</ td >
  5. < td > 01/04/2012 < / td >
  6. <td>Approvato</ td >
  7. </ tr >
  8. ...

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
  1. <tabella>
  2. <caption> ... </caption>
  3. <testa>
  4. <tr>
  5. <esimo> ... </esimo>
  6. <esimo> ... </esimo>
  7. </tr>
  8. </thead>
  9. <corpo>
  10. <tr>
  11. <td> ... </td>
  12. <td> ... </td>
  13. </tr>
  14. </tbody>
  15. </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.

Leggenda Esempio di testo della guida a livello di blocco qui.
  1. <modulo>
  2. <set di campi>
  3. <legend> Legenda </legend>
  4. <label> Nome etichetta </label>
  5. < tipo di input = segnaposto "testo" = "Digita qualcosa..." >
  6. <span class = "help-block" > Esempio di testo di aiuto a livello di blocco qui. </span>
  7. < classe etichetta = "casella di controllo" >
  8. < tipo di input = "casella di controllo" > Controllami
  9. </etichetta>
  10. < tipo di pulsante = "invia" class = "btn" > Invia </button>
  11. </fieldset>
  12. </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.

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

Modulo in linea

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

  1. < classe modulo = "inline modulo" >
  2. < tipo di input = "testo" class = segnaposto "input-small" = "Email" >
  3. < tipo di input = "password" class = segnaposto "input-small" = "password" >
  4. < classe etichetta = "casella di controllo" >
  5. < tipo di input = "casella di controllo" > Ricordami
  6. </etichetta>
  7. <button type = "submit" class = "btn" > Accedi </button>
  8. </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
  1. < classe modulo = "forma-orizzontale" >
  2. < classe div = "gruppo di controllo" >
  3. <label class = "etichetta di controllo" for = "inputEmail" > Email </label>
  4. < classe div = "controlli" >
  5. < tipo di input = "testo" id = segnaposto "inputEmail" = "Email" >
  6. </div>
  7. </div>
  8. < classe div = "gruppo di controllo" >
  9. <label class = "etichetta di controllo" for = "inputPassword" > Password </label>
  10. < classe div = "controlli" >
  11. < tipo di input = "password" id = segnaposto "inputPassword" = "Password" >
  12. </div>
  13. </div>
  14. < classe div = "gruppo di controllo" >
  15. < classe div = "controlli" >
  16. < classe etichetta = "casella di controllo" >
  17. < tipo di input = "casella di controllo" > Ricordami
  18. </etichetta>
  19. <button type = "submit" class = "btn" > Accedi </button>
  20. </div>
  21. </div>
  22. </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.

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

Area di testo

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

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


  1. < classe etichetta = "casella di controllo" >
  2. < tipo di input = valore "casella di controllo" = "" >
  3. L'opzione uno è questo e quello: assicurati di includere perché è fantastico
  4. </etichetta>
  5.  
  6. < classe etichetta = "radio" >
  7. < tipo di input = "radio" nome = "optionsRadios" id = "optionsRadios1" valore = "opzione1" selezionata >
  8. L'opzione uno è questo e quello: assicurati di includere perché è fantastico
  9. </etichetta>
  10. < classe etichetta = "radio" >
  11. < tipo di input = "radio" nome = "optionsRadios" id = "optionsRadios2" valore = "opzione2" >
  12. L'opzione due può essere qualcos'altro e selezionandola si deseleziona l'opzione uno
  13. </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.

  1. < classe etichetta = "casella di controllo in linea" >
  2. < tipo di input = "casella di controllo" id = "inlineCheckbox1" valore = "opzione1" > 1
  3. </etichetta>
  4. < classe etichetta = "casella di controllo in linea" >
  5. < tipo di input = "casella di controllo" id = "inlineCheckbox2" valore = "opzione2" > 2
  6. </etichetta>
  7. < classe etichetta = "casella di controllo in linea" >
  8. < tipo di input = "casella di controllo" id = "inlineCheckbox3" valore = "opzione3" > 3
  9. </etichetta>

Seleziona

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


  1. <seleziona>
  2. <opzione> 1 </opzione>
  3. <opzione> 2 </opzione>
  4. <opzione> 3 </opzione>
  5. <opzione> 4 </opzione>
  6. <opzione> 5 </opzione>
  7. </seleziona>
  8.  
  9. <seleziona multiplo = "multiplo" >
  10. <opzione> 1 </opzione>
  11. <opzione> 2 </opzione>
  12. <opzione> 3 </opzione>
  13. <opzione> 4 </opzione>
  14. <opzione> 5 </opzione>
  15. </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.

@

.00
  1. <div class = "input-prepend" >
  2. <span class = "componente aggiuntivo" > @ </span>
  3. < classe di input = "span2" id = "prependedInput" tipo = segnaposto "testo" = "Nome utente" >
  4. </div>
  5. < classe div = "input-append" >
  6. < classe di input = "span2" id = "appendedInput " tipo = "testo" >
  7. <span class = "add-on" > .00 </span>
  8. </div>

Combinato

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

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

Pulsanti al posto del testo

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

  1. < classe div = "input-append" >
  2. < classe di input = "span2" id = "appendedInputButton " tipo = "testo" >
  3. < classe pulsante = "btn" tipo = "pulsante" > Vai! </pulsante>
  4. </div>
  1. < classe div = "input-append" >
  2. < classe di input = "span2" id = "appendedInputButtons " tipo = "testo" >
  3. <button class = "btn" type = "button" > Cerca </button>
  4. < classe pulsante = "btn" tipo = "pulsante" > Opzioni </pulsante>
  5. </div>

Menu a discesa dei pulsanti

  1. < classe div = "input-append" >
  2. < classe di input = "span2" id = "appendedDropdownButton " tipo = "testo" >
  3. < classe div = "gruppo btn" >
  4. < classe pulsante = "btn dropdown-toggle" data-toggle = "dropdown" >
  5. Azione
  6. <span class = "caret" ></span>
  7. </pulsante>
  8. <ul class = "menu a discesa" >
  9. ...
  10. </ul>
  11. </div>
  12. </div>
  1. <div class = "input-prepend" >
  2. < classe div = "gruppo btn" >
  3. < classe pulsante = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. Azione
  5. <span class = "caret" ></span>
  6. </pulsante>
  7. <ul class = "menu a discesa" >
  8. ...
  9. </ul>
  10. </div>
  11. < classe di input = "span2" id = "prependedDropdownButton" tipo = "testo" >
  12. </div>
  1. <div class = "input-prepend input-append" >
  2. < classe div = "gruppo btn" >
  3. < classe pulsante = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. Azione
  5. <span class = "caret" ></span>
  6. </pulsante>
  7. <ul class = "menu a discesa" >
  8. ...
  9. </ul>
  10. </div>
  11. < classe di input = "span2" id = "appendedPrependedDropdownButton " type = "testo" >
  12. < classe div = "gruppo btn" >
  13. < classe pulsante = "btn dropdown-toggle" data-toggle = "dropdown" >
  14. Azione
  15. <span class = "caret" ></span>
  16. </pulsante>
  17. <ul class = "menu a discesa" >
  18. ...
  19. </ul>
  20. </div>
  21. </div>

Gruppi a discesa segmentati

  1. <modulo>
  2. <div class = "input-prepend" >
  3. <div class = "btn-group" > ... </div>
  4. < tipo di input = "testo" >
  5. </div>
  6. < classe div = "input-append" >
  7. < tipo di input = "testo" >
  8. <div class = "btn-group" > ... </div>
  9. </div>
  10. </modulo>

Modulo di ricerca

  1. < classe modulo = "ricerca modulo" >
  2. < classe div = "input-append" >
  3. < tipo di input = "testo" classe = "span2 query di ricerca" >
  4. <button type = "submit" class = "btn" > Cerca </button>
  5. </div>
  6. <div class = "input-prepend" >
  7. <button type = "submit" class = "btn" > Cerca </button>
  8. < tipo di input = "testo" classe = "span2 query di ricerca" >
  9. </div>
  10. </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.

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

Dimensionamento relativo

  1. < classe di input = "input-mini" tipo = "testo" segnaposto = ".input-mini" >
  2. < classe di input = "input-small" type = "text" segnaposto = ".input-small" >
  3. < classe di input = "medio-input" tipo = segnaposto "testo" = ".medio-input" >
  4. < classe di input = "input-large" type = "testo" segnaposto = ".input-large" >
  5. < classe di input = "input-xlarge" type = "testo" segnaposto = ".input-xlarge" >
  6. < 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.

  1. < classe di input = "span1" tipo = "testo" segnaposto = ".span1" >
  2. < classe di input = "span2" tipo = "testo" segnaposto = ".span2" >
  3. < classe di input = "span3" tipo = "testo" segnaposto = ".span3" >
  4. <seleziona classe = "span1" >
  5. ...
  6. </seleziona>
  7. <seleziona classe = "span2" >
  8. ...
  9. </seleziona>
  10. <seleziona classe = "span3" >
  11. ...
  12. </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.

  1. < classe div = "controlli" >
  2. < classe di input = "span5" tipo = "testo" segnaposto = ".span5" >
  3. </div>
  4. <div class = "controlli controlli-riga" >
  5. < classe di input = "span4" tipo = "testo" segnaposto = ".span4" >
  6. < classe di input = "span1" tipo = "testo" segnaposto = ".span1" >
  7. </div>
  8. ...

Input non modificabili

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

Qualche valore qui
  1. <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.

  1. < classe div = "azioni-form" >
  2. <button type = "submit" class = "btn btn-primary" > Salva le modifiche </button>
  3. < tipo di pulsante = "pulsante" class = "btn" > Annulla </button>
  4. </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

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

Blocca aiuto

Un blocco di testo della guida più lungo che si interrompe su una nuova riga e può estendersi oltre una riga.
  1. <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.

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

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

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

Qualcosa potrebbe essere andato storto
Si prega di correggere l'errore
Il nome utente è preso
Woohoo!
  1. <div class = "avviso gruppo di controllo" >
  2. <label class = "control-label" for = "inputWarning" > Input con avviso </label>
  3. < classe div = "controlli" >
  4. < tipo di input = "testo" id = "inputWarning" >
  5. <span class = "help-inline" > Qualcosa potrebbe essere andato storto </span>
  6. </div>
  7. </div>
  8.  
  9. <div class = "errore del gruppo di controllo" >
  10. <label class = "control-label" for = "inputError" > Input con errore </label>
  11. < classe div = "controlli" >
  12. < tipo di input = "testo" id = "inputError" >
  13. <span class = "help-inline" > Correggi l'errore </span>
  14. </div>
  15. </div>
  16.  
  17. <div class = "informazioni gruppo di controllo" >
  18. <label class = "control-label" for = "inputInfo" > Input con informazioni </label>
  19. < classe div = "controlli" >
  20. < tipo di input = "testo" id = "inputInfo" >
  21. <span class = "help-inline" > Il nome utente è già occupato </span>
  22. </div>
  23. </div>
  24.  
  25. <div class = "successo del gruppo di controllo" >
  26. <label class = "control-label" for = "inputSuccess" > Input con successo </label>
  27. < classe div = "controlli" >
  28. < tipo di input = "testo" id = "inputSuccess" >
  29. <span class = "help-inline" > Woohoo! </span>
  30. </div>
  31. </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.

  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 predefinito </button>
  7. <button class = "btn" type = "button" > Pulsante predefinito </button>
  8. </p>
  9. <p>
  10. <button class = "btn btn-small btn-primary" type = "button" > Pulsante piccolo </button>
  11. <button class = "btn btn-small" type = "button" > Pulsante piccolo </button>
  12. </p>
  13. <p>
  14. < classe pulsante = "btn btn-mini btn-primary" type = "pulsante" > Mini pulsante </button>
  15. <button class = "btn btn-mini" type = "button" > Mini button </button>
  16. </p>

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

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Pulsante di livello di blocco </button>
  2. <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

  1. <a href = "#" class = "btn btn-large btn-primary disabilitato" > Link principale </a>
  2. <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.

  1. < tipo di pulsante = "pulsante" class = "btn btn-large btn-primary disabilitato" disabilitato = "disabilitato" > Pulsante principale </button>
  2. < 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>

Collegamento
  1. <a class = "btn" href = "" > Collegamento </a>
  2. < classe pulsante = "btn" tipo = "invia" > Pulsante </pulsante>
  3. < classe di input = tipo "btn" = valore "pulsante" = "Input" >
  4. < 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.

140x140 140x140 140x140
  1. <img src = "..." class = "img-arrotondato" >
  2. <img src = "..." class = "img-cerchio" >
  3. <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:

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

  1. <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
  1. < classe div = "barra degli strumenti btn" >
  2. < classe div = "gruppo btn" >
  3. <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>
  4. <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>
  5. <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>
  6. <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>
  7. </div>
  8. </div>
Menu a discesa in un gruppo di pulsanti
  1. < classe div = "gruppo btn" >
  2. <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Utente </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 = "icon-matita" ></i> Modifica </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 classe = "divisore" ></li>
  9. <li><a href = "#" ><i class = "i" ></i> Rendi amministratore </a></li>
  10. </ul>
  11. </div>
Dimensioni dei bottoni
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Stella </a>
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Stella </a>
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Stella </a>

Navigazione

  1. <ul class = "nav nav-list" >
  2. <li class = "attivo" ><a href = "#" ><i class = "icon-home icon-white" ></i> Home </a></li>
  3. <li><a href = "#" ><i class = "libro-icona" ></i> Biblioteca </a></li>
  4. <li><a href = "#" ><i class = "icon-matita" ></i> Applicazioni </a></li>
  5. <li><a href = "#" ><i class = "i" ></i> Varie </a></li>
  6. </ul>

Campi del modulo

  1. < classe div = "gruppo di controllo" >
  2. <label class = "control-label" for = "inputIcon" > Indirizzo e-mail </label>
  3. < classe div = "controlli" >
  4. <div class = "input-prepend" >
  5. <span class = "add-on" ><i class = "icon-envelope" ></i></span>
  6. < classe di input = "span2" id = "inputIcon" tipo = "testo" >
  7. </div>
  8. </div>
  9. </div>