Oltre all'impalcatura, gli elementi HTML di base sono stilizzati e migliorati con classi estensibili per fornire un aspetto fresco e coerente.
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.
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 ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| 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 .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> |
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.
Di seguito sono riportati due esempi di utilizzo del <address>tag:
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 .
| Elemento | Utilizzo | Opzionale |
|---|---|---|
<blockquote> |
Elemento a livello di blocco per citare il contenuto da un'altra fonte | Aggiungi .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 —prima per scopi di stile.
- <citazione in blocco>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> Qualcuno famoso </small>
- </blockquote>
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
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
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.
Avvolgi frammenti di codice in linea con <code>.
- Ad esempio , la sezione < code> </ code > deve essere racchiusa come inline .
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>
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.
Prendi lo stesso <pre>elemento e aggiungi due classi opzionali per il rendering avanzato.
- <p> Testo di esempio qui... </p>
- <pre classe = "prettyprint
- numeri di riga" >
- <p>Testo di esempio qui...</p>
- </pre>
Scarica google-code-prettify e visualizza il readme su come utilizzarlo.
| 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 |
- <tabella>
- <testa>
- <tr>
- <esimo> … </esimo>
- <esimo> … </esimo>
- </tr>
- </thead>
- <corpo>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </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 |
Le tabelle vengono automaticamente stilizzate con solo pochi bordi per garantire la leggibilità e mantenere la struttura. Con 2.0, la .tableclasse è obbligatoria.
- < classe tabella = "tabella" >
- …
- </tabella>
| # | Nome di battesimo | Cognome | Nome utente |
|---|---|---|---|
| 1 | Segno | Ottone | @mdo |
| 2 | Giacobbe | Thornton | @Grasso |
| 3 | Larry | l'uccello |
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.
- < classe tabella = "tabella a strisce di tabella" >
- …
- </tabella>
| # | Nome di battesimo | Cognome | Nome utente |
|---|---|---|---|
| 1 | Segno | Ottone | @mdo |
| 2 | Giacobbe | Thornton | @Grasso |
| 3 | Larry | l'uccello |
Aggiungi bordi attorno all'intero tavolo e angoli arrotondati per scopi estetici.
- < classe tabella = "tabella con bordo tabella" >
- …
- </tabella>
| # | Nome di battesimo | Cognome | Nome utente |
|---|---|---|---|
| 1 | Segno | Ottone | @mdo |
| Segno | Ottone | @getbootstrap | |
| 2 | Giacobbe | Thornton | @Grasso |
| 3 | Larry l'Uccello | ||
Rendi le tue tabelle più compatte aggiungendo la .table-condensedclasse per tagliare a metà il riempimento delle celle della tabella (da 8px a 4px).
- < classe tabella = "tabella condensata in tabella" >
- …
- </tabella>
| # | Nome di battesimo | Cognome | Nome utente |
|---|---|---|---|
| 1 | Segno | Ottone | @mdo |
| 2 | Giacobbe | Thornton | @Grasso |
| 3 | Larry l'Uccello | ||
Sentiti libero di combinare una qualsiasi delle classi del tavolo per ottenere un aspetto diverso utilizzando una qualsiasi delle classi disponibili.
- < classe tabella = "tabella a strisce con bordo tabella condensata" >
- ...
- </tabella>
| Nome e cognome | |||
|---|---|---|---|
| # | Nome di battesimo | Cognome | Nome utente |
| 1 | Segno | Ottone | @mdo |
| 2 | Giacobbe | Thornton | @Grasso |
| 3 | Larry l'Uccello | ||
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.
Bootstrap viene fornito con il supporto per quattro tipi di layout dei moduli:
Diversi tipi di layout dei moduli richiedono alcune modifiche al markup, ma i controlli stessi rimangono e si comportano allo stesso modo.
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.
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 |
Impostazioni predefinite intelligenti e leggere senza markup aggiuntivo.
- < classe modulo = "bene" >
- <label> Nome etichetta </label>
- < tipo di input = "testo" class = "span3" segnaposto = "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>
- </modulo>
Aggiungi .form-searchal modulo e .search-queryal input.
- < classe modulo = "ricerca bene modulo" >
- < tipo di input = "testo" class = "query-ricerca del mezzo di input" >
- <button type = "submit" class = "btn" > Cerca </button>
- </modulo>
Aggiungi .form-inlineper perfezionare l'allineamento verticale e la spaziatura dei controlli del modulo.
- < classe modulo = "bene in linea" >
- < 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>
A destra sono mostrati tutti i controlli dei moduli predefiniti che supportiamo. Ecco l'elenco puntato:
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.
- < classe modulo = "forma-orizzontale" >
- <set di campi>
- <legend> Testo legenda </legend>
- < classe div = "gruppo di controllo" >
- <label class = "control-label" for = "input01" > Input di testo </label>
- < classe div = "controlli" >
- < tipo di input = "testo" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Testo della guida di supporto </p>
- </div>
- </div>
- </fieldset>
- </modulo>
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.
Include anche stili di convalida per errori, avvisi e successo. Per utilizzare, aggiungi la classe di errore al circostante .control-group.
- <campo
- class = "errore del gruppo di controllo" >
- …
- </fieldset>
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.
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.
Per utilizzare anteporre o aggiungere input in un modulo inline, assicurati di posizionare .add-one inputsulla stessa riga, senza spazi.
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.
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.
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:
- <i classe = "ricerca di icone" ></i>
Ci sono anche stili disponibili per le icone invertite (bianche), preparate con una classe extra:
- <i class = "icon-search icon-white" ></i>
Ci sono 120 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.
Le icone sono fantastiche, ma dove le userei? Ecco alcune idee:
In sostanza, ovunque tu possa inserire un <i>tag, puoi inserire un'icona.
Usali nei pulsanti, nei gruppi di pulsanti per una barra degli strumenti, nella navigazione o negli input di moduli anteposti.