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.

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 .

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

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

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>

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

Google Prettifica

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>

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	@twitter

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	@twitter

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		@twitter

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		@twitter

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

Forma base

Impostazioni predefinite intelligenti e leggere senza markup aggiuntivo.

Nome etichetta

Esempio di testo della guida a livello di blocco qui.

Controllami Invia

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

Modulo di ricerca

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

Ricerca

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

Ricordati di me Registrazione

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

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

L'immissione di testo

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

Casella di controllo

L'opzione uno è questo e quello: assicurati di includere perché è fantastico

Seleziona elenco

qualche cosa 2 3 4 5

Selezione multipla

1 2 3 4 5

Inserimento file

Area di testo

Salvare le modifiche Annulla

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.

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

---

Convalida del modulo

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>

Input mirato

Input non modificabile

Qualche valore qui

Ingresso disabilitato

Casella di controllo disabilitata

Questa è una casella di controllo disabilitata

Ingresso con avviso

Qualcosa potrebbe essere andato storto

Input con errore

Si prega di correggere l'errore

Input con successo

Woohoo!

Seleziona con successo

1 2 3 4 5 Woohoo!

Salvare le modifiche Annulla

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.

Dimensioni della griglia del modulo

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

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

Dimensioni alternative

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

Testo anteposto

@

Ecco un testo di aiuto

Testo allegato

.00

Ecco altro testo di aiuto

Aggiungi e anteponi

$ .00

Aggiungi con il pulsante

Andare!

Aggiungi a due pulsanti

Ricerca Opzioni

Caselle di controllo in linea

1 2 3

Caselle di controllo

L'opzione uno è questo e quello: assicurati di includere perché è fantastico L'opzione due può anche essere verificata e inclusa nei risultati del modulo L'opzione tre può, sì, hai indovinato, anche essere verificata e inclusa nei risultati del modulo

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

Tasti della radio

L'opzione uno è questo e quello: assicurati di includere perché è fantastico L'opzione due può essere qualcos'altro e selezionandola si deseleziona l'opzione uno

Salvare le modifiche Annulla

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.

Azione primaria Azione

Azione primaria Azione

Azione primaria Azione

Stato disabile

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

Collegamento primario Collegamento

Pulsante principale Pulsante

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 Pulsante

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

• 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:

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

ricaricare Guardare Elimina

Commento Impostazioni Ulteriori informazioni

Indirizzo e-mail