CSS di base

Oltre all'impalcatura, gli elementi HTML di base sono stilizzati e migliorati con classi estensibili per fornire un aspetto fresco e coerente.

Intestazioni e copia del corpo

Scala tipografica

L'intera griglia tipografica si basa su due variabili Less nel nostro file 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 un po' di matematica, per creare i margini, i padding e le altezze delle linee di tutti i nostri tipi e altro ancora.

Esempio di corpo del testo

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.

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.

h1. Titolo 1

h2. Titolo 2

h3. Titolo 3

h4. Titolo 4

h5. Titolo 5
h6. Titolo 6

Enfasi, indirizzo e abbreviazione

Elemento Utilizzo Opzionale
<strong> Per enfatizzare un frammento di testo con importanti Nessuno
<em> Per enfatizzare un frammento di testo con stress Nessuno
<abbr> Avvolge abbreviazioni e acronimi per mostrare la versione estesa al passaggio del mouse

Includi titleattributo facoltativo per il testo espanso

Usa .initialismla classe per le abbreviazioni maiuscole.
<address> Per informazioni di contatto per il suo antenato più vicino o per l'intero corpo di lavoro Mantieni la formattazione terminando tutte le righe con<br>

Usando l'enfasi

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenate faucibus mollis interdum. Nulla vitae elit libero, a pharetra augu.

Nota: sentiti libero di usare <b>e <i>in HTML5, ma il loro utilizzo è leggermente cambiato. <b>ha lo scopo di evidenziare parole o frasi senza trasmettere ulteriore importanza mentre <i>è principalmente per voce, termini tecnici, ecc.

Esempi di indirizzi

Di seguito sono riportati due esempi di utilizzo del <address>tag:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Nome completo
[email protected]

Esempi di abbreviazioni

Le abbreviazioni con un titleattributo hanno un bordo inferiore punteggiato chiaro e un cursore di aiuto al passaggio del mouse. Ciò fornisce agli utenti un'ulteriore indicazione che qualcosa verrà mostrato al passaggio del mouse.

Aggiungi la initialismclasse a un'abbreviazione per aumentare l'armonia tipografica assegnandole una dimensione del testo leggermente inferiore.

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

Un'abbreviazione della parola attributo è attr .

Citazioni in blocco

Elemento Utilizzo Opzionale
<blockquote> Elemento a livello di blocco per citare il contenuto da un'altra fonte

Aggiungi citeattributo per l'URL di origine

Uso .pull-lefte .pull-rightclassi per le opzioni mobili
<small> Elemento facoltativo per l'aggiunta di una citazione rivolta all'utente, in genere un autore con il titolo dell'opera Posiziona <cite>intorno al titolo o al nome della fonte

Per includere una citazione in blocco, avvolgi <blockquote>qualsiasi codice HTML come citazione. Per virgolette semplici consigliamo un <p>.

Includi un elemento facoltativo <small>per citare la tua fonte e otterrai un trattino &mdash;prima per scopi di stile.

  1. <citazione in blocco>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Qualcuno famoso </small>
  4. </blockquote>

Esempi di citazioni in blocco

Le virgolette predefinite hanno lo stile seguente:

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

Qualcuno famoso in Body of work

Per spostare il tuo blockquote a destra, aggiungi class="pull-right":

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

Qualcuno famoso in Body of work

Elenchi

Non ordinato

<ul>

  • 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

Senza stile

<ul class="unstyled">

  • 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

Ordinato

<ol>

  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

Descrizione

<dl>

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.

Descrizione orizzontale

<dl class="dl-horizontal">

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.

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

  1. Ad esempio , la sezione < code> </ 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>

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

Google Prettifica

Prendi lo stesso <pre>elemento e aggiungi due classi opzionali per il rendering avanzato.

  1. <p> Testo di esempio qui... </p>
  1. <pre classe = "prettyprint
  2. numeri di riga" >
  3. <p>Testo di esempio qui...</p>
  4. </pre>

Scarica google-code-prettify e visualizza il readme su come utilizzarlo.

Marcatura della tabella

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)
Deve essere utilizzata all'interno di a<thead>
<caption> Descrizione o riepilogo di ciò che contiene la tabella, particolarmente utile per le utilità per la lettura dello schermo
  1. <tabella>
  2. <testa>
  3. <tr>
  4. <esimo> </esimo>
  5. <esimo> </esimo>
  6. </tr>
  7. </thead>
  8. <corpo>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </tabella>

Opzioni tabella

Nome Classe Descrizione
Predefinito Nessuno Nessuno stile, solo colonne e righe
Di base .table Solo linee orizzontali tra le righe
Confinato .table-bordered Arrotonda gli angoli e aggiunge il bordo esterno
Zebrato .table-striped Aggiunge un colore di sfondo grigio chiaro alle righe dispari (1, 3, 5, ecc.)
Condensato .table-condensed Dimezza il riempimento verticale, da 8px a 4px, all'interno di tutti gli elementi tdeth

Tabelle di esempio

1. Stili tabella predefiniti

Le tabelle vengono automaticamente stilizzate con solo pochi bordi per garantire la leggibilità e mantenere la struttura. Con 2.0, la .tableclasse è obbligatoria.

  1. < classe tabella = "tabella" >
  2. </tabella>
# Nome di battesimo Cognome Nome utente
1 Segno Ottone @mdo
2 Giacobbe Thornton @Grasso
3 Larry l'uccello @twitter

2. Tavolo a righe

Crea un po' di fantasia con i tuoi tavoli aggiungendo strisce zebrate: aggiungi semplicemente la .table-stripedclasse.

Nota: le tabelle con striping utilizzano il :nth-childselettore CSS e non sono disponibili in IE7-IE8.

  1. < classe tabella = "tabella a strisce di tabella" >
  2. </tabella>
# Nome di battesimo Cognome Nome utente
1 Segno Ottone @mdo
2 Giacobbe Thornton @Grasso
3 Larry l'uccello @twitter

3. Tavolo bordato

Aggiungi bordi attorno all'intero tavolo e angoli arrotondati per scopi estetici.

  1. < classe tabella = "tabella con bordo tabella" >
  2. </tabella>
# Nome di battesimo Cognome Nome utente
1 Segno Ottone @mdo
Segno Ottone @getbootstrap
2 Giacobbe Thornton @Grasso
3 Larry l'Uccello @twitter

4. Tavola condensata

Rendi le tue tabelle più compatte aggiungendo la .table-condensedclasse per tagliare a metà il riempimento delle celle della tabella (da 8px a 4px).

  1. < classe tabella = "tabella condensata in tabella" >
  2. </tabella>
# Nome di battesimo Cognome Nome utente
1 Segno Ottone @mdo
2 Giacobbe Thornton @Grasso
3 Larry l'Uccello @twitter

5. Combinali tutti!

Sentiti libero di combinare una qualsiasi delle classi del tavolo per ottenere un aspetto diverso utilizzando una qualsiasi delle classi disponibili.

  1. < classe tabella = "tabella a strisce con bordo tabella condensata" >
  2. ...
  3. </tabella>
Nome e cognome
# Nome di battesimo Cognome Nome utente
1 Segno Ottone @mdo
2 Giacobbe Thornton @Grasso
3 Larry l'Uccello @twitter

HTML e CSS flessibili

La parte migliore dei moduli in Bootstrap è che tutti i tuoi input e controlli hanno un bell'aspetto, indipendentemente da come li crei nel tuo markup. Non è richiesto HTML superfluo, ma forniamo i modelli per coloro che lo richiedono.

I layout più complicati sono dotati di classi concise e scalabili per semplificare lo stile e l'associazione di eventi, in modo da essere coperti in ogni fase.

Quattro layout inclusi

Bootstrap viene fornito con il supporto per quattro tipi di layout dei moduli:

  • Verticale (predefinito)
  • Ricerca
  • In linea
  • Orizzontale

Diversi tipi di layout dei moduli richiedono alcune modifiche al markup, ma i controlli stessi rimangono e si comportano allo stesso modo.

Stati di controllo e altro ancora

I moduli di Bootstrap includono stili per tutti i controlli del modulo di base come input, textarea e select che ti aspetteresti. Ma viene fornito anche con una serie di componenti personalizzati come input aggiunti e anteposti e supporto per elenchi di caselle di controllo.

Stati come errore, avviso e successo sono inclusi per ogni tipo di controllo modulo. Sono inclusi anche gli stili per i controlli disabilitati.

Quattro tipi di forme

Bootstrap fornisce markup e stili semplici per quattro stili di moduli Web comuni.

Nome Classe Descrizione
Verticale (predefinito) .form-vertical (non richiesto) Etichette impilate e allineate a sinistra sui controlli
In linea .form-inline Etichetta allineata a sinistra e controlli del blocco in linea per uno stile compatto
Ricerca .form-search Input di testo extra-arrotondato per un'estetica di ricerca tipica
Orizzontale .form-horizontal Sposta le etichette allineate a destra e sinistra sulla stessa riga dei controlli

Moduli di esempio che utilizzano solo controlli modulo, nessun markup aggiuntivo

Forma base

Impostazioni predefinite intelligenti e leggere senza markup aggiuntivo.

Esempio di testo della guida a livello di blocco qui.

  1. < classe modulo = "bene" >
  2. <label> Nome etichetta </label>
  3. < tipo di input = "testo" class = "span3" segnaposto = "Digita qualcosa..." >
  4. <span class = "help-block" > Esempio di testo di aiuto a livello di blocco qui. </span>
  5. < classe etichetta = "casella di controllo" >
  6. < tipo di input = "casella di controllo" > Controllami
  7. </etichetta>
  8. < tipo di pulsante = "invia" class = "btn" > Invia </button>
  9. </modulo>

Modulo di ricerca

Aggiungi .form-searchal modulo e .search-queryal input.

  1. < classe modulo = "ricerca bene 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-inlineper perfezionare l'allineamento verticale e la spaziatura dei controlli del modulo.

  1. < classe modulo = "bene in linea" >
  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>

Forme orizzontali

A destra sono mostrati tutti i controlli dei moduli predefiniti che supportiamo. Ecco l'elenco puntato:

  • input di testo (testo, password, e-mail, ecc.)
  • casella di controllo
  • Radio
  • Selezionare
  • selezione multipla
  • input di file
  • area di testo

Oltre al testo a mano libera, qualsiasi input basato su testo HTML5 appare in questo modo.

Esempio di markup

Dato il layout del modulo di esempio sopra, ecco il markup associato al primo gruppo di input e di controllo. Le classi .control-group, .control-label, e .controlssono tutte richieste per lo styling.

  1. < classe modulo = "forma-orizzontale" >
  2. <set di campi>
  3. <legend> Testo legenda </legend>
  4. < classe div = "gruppo di controllo" >
  5. <label class = "control-label" for = "input01" > Input di testo </label>
  6. < classe div = "controlli" >
  7. < tipo di input = "testo" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Testo della guida di supporto </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </modulo>

Stati di controllo della forma

Bootstrap offre stili per stati e focalizzati supportati dal browser disabled. Rimuoviamo il Webkit predefinito outlinee applichiamo un box-shadowa al suo posto per :focus.


Convalida del modulo

Include anche stili di convalida per errori, avvisi e successo. Per utilizzare, aggiungi la classe di errore al circostante .control-group.

  1. <campo
  2. class = "errore del gruppo di controllo" >
  3. </fieldset>
Qualche valore qui
Qualcosa potrebbe essere andato storto
Si prega di correggere l'errore
Woohoo!
Woohoo!

Estensione dei controlli dei moduli

Anteponi e aggiungi input

I gruppi di input, con testo aggiunto o anteposto, forniscono un modo semplice per dare più contesto ai tuoi input. Ottimi esempi includono il segno @ per i nomi utente di Twitter o $ per le finanze.


Caselle di controllo e radio

Fino alla v1.4, Bootstrap richiedeva un markup aggiuntivo attorno alle caselle di controllo e alle radio per impilarle. Ora, è una semplice questione di ripetere il <label class="checkbox">che avvolge il <input type="checkbox">.

Sono supportate anche le caselle di controllo e le radio in linea. Basta aggiungere .inlinea qualsiasi .checkboxo .radioe il gioco è fatto.


Moduli in linea e aggiungi/anteponi

Per utilizzare anteporre o aggiungere input in un modulo inline, assicurati di posizionare .add-one inputsulla stessa riga, senza spazi.


Testo della guida del modulo

Per aggiungere il testo della guida per gli input del modulo, includi il testo della guida in linea con <span class="help-inline">o un blocco del testo della guida <p class="help-block">dopo l'elemento di input.

Utilizzare le stesse .span*classi del sistema a griglia per le dimensioni degli input.

Puoi anche usare classi statiche che non si associano alla griglia, si adattano agli stili CSS reattivi o tengono conto di vari tipi di controlli (ad es. inputvs. select).

@

Ecco un testo di aiuto

.00
Ecco altro testo di aiuto
$ .00

Nota: le etichette circondano tutte le opzioni per aree di clic molto più grandi e un modulo più utilizzabile.

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

Pulsanti per le azioni

Per convenzione, i pulsanti devono essere utilizzati solo per le azioni mentre i collegamenti ipertestuali devono essere utilizzati per gli oggetti. Ad esempio, "Download" dovrebbe essere un pulsante mentre "attività recenti" dovrebbe essere un collegamento.

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 agli <button>elementi.

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.

Taglie multiple

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


Stato disabile

Per i pulsanti disabilitati, aggiungi la .disabledclasse ai link e l' disabledattributo per <button>gli elementi.

Collegamento primario Collegamento

Dritta! Usiamo .disabledcome classe di utilità qui, simile alla .activeclasse comune, quindi non è richiesto alcun prefisso.

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 = tipo "btn" = "invia" >
  3. Pulsante
  4. </pulsante>
  5. < classe di input = tipo "btn" = "pulsante"
  6. valore = "Input" >
  7. < classe di input = tipo "btn" = "invia"
  8. 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.

  • 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

Costruito come uno sprite

Invece di rendere ogni icona una richiesta extra, le abbiamo compilate in uno sprite, un gruppo di immagini in un file che utilizza CSS per posizionare le immagini con background-position. Questo è lo stesso metodo che utilizziamo su Twitter.com e ha funzionato bene per noi.

Tutte le classi di icone sono precedute da .icon-per un corretto spazio dei nomi e ambito, proprio come i nostri altri componenti. Ciò contribuirà a evitare conflitti con altri strumenti.

Glyphicons ci ha concesso l'uso del set Halflings nel nostro toolkit open source purché forniamo un collegamento e un credito qui nei documenti. Per favore, considera di fare lo stesso nei tuoi progetti.

Come usare

Bootstrap utilizza un <i>tag per tutte le icone, ma non hanno una classe case, solo un prefisso condiviso. 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:

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

Ci sono 140 classi tra cui scegliere per le tue icone. Basta aggiungere un <i>tag con le classi giuste e il gioco è fatto. Puoi trovare l'elenco completo in sprites.less o proprio qui in questo documento.

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.

Casi d'uso

Le icone sono fantastiche, ma dove le userei? Ecco alcune idee:

  • Come elementi visivi per la navigazione nella barra laterale
  • Per una navigazione puramente icon-driven
  • Per i pulsanti che aiutano a trasmettere il significato di un'azione
  • Con collegamenti per condividere il contesto sulla destinazione di un utente

In sostanza, ovunque tu possa inserire un <i>tag, puoi inserire un'icona.

Esempi

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