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

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:

Esempi di abbreviazioni

Le abbreviazioni hanno uno stile con testo maiuscolo e un bordo inferiore punteggiato chiaro. Hanno anche un cursore di aiuto al passaggio del mouse in modo che gli utenti abbiano un'indicazione aggiuntiva che qualcosa verrà mostrato al passaggio del mouse.

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.

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 trasformare tutti i punti di inserimento nei loro caratteri unicode 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.

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.

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

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

Nota: le tabelle sprite utilizzano il :nth-childselettore CSS e non è disponibile in IE7-IE8.

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

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

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

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>

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>

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.

Con la v2.0, abbiamo impostazioni predefinite più leggere e intelligenti per gli stili dei moduli. Nessun markup aggiuntivo, solo controlli dei moduli.

Riflettendo gli stili WebKit predefiniti, aggiungi semplicemente .form-searchcampi di ricerca arrotondati extra.

Gli ingressi sono a livello di blocco per iniziare. Per .form-inlinee .form-horizontal, utilizziamo inline-block.

Cosa è incluso

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

Nuove impostazioni predefinite con v2.0

Fino alla v1.4, gli stili di modulo predefiniti di Bootstrap utilizzavano il layout orizzontale. Con Bootstrap 2, abbiamo rimosso quel vincolo per avere impostazioni predefinite più intelligenti e scalabili per qualsiasi modulo.

Stati del browser ridisegnati

Bootstrap offre stili per stati e focalizzati supportati dal browser disabled. Rimuoviamo il Webkit predefinito outlinee applichiamo un box-shadowal 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>

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.

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.

Per ancore e forme

Gli stili dei pulsanti possono essere applicati a qualsiasi cosa con .btnapplicato. Tuttavia, in genere ti consigliamo di applicarli solo a <a>e agli <button>elementi.

Nota: tutti i pulsanti devono includere la .btnclasse. Gli stili dei pulsanti devono essere applicati a <button>e agli <a>elementi per coerenza.

Taglie multiple

Ti piacciono i pulsanti più grandi o più piccoli? Fallo!

Azione primaria Azione

Azione primaria Azione

Stato disabile

Per i pulsanti disabilitati, utilizzare .btn-disabledper i collegamenti e :disabledper <button>gli elementi.

Azione primaria Azione

Azione primaria Azione

Compatibilità tra browser

In IE9, riduciamo il gradiente su tutti i pulsanti a favore degli angoli arrotondati poiché IE9 non ritaglia i gradienti di sfondo agli angoli.

Correlati, IE9 jankifica gli buttonelementi disabilitati, rendendo il testo grigio con una brutta ombreggiatura del testo, sfortunatamente non possiamo risolverlo.

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.

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

How to use

With v2.0.0, we have opted to use an <i> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

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

There are also styles available for inverted (white) icons, made ready with one extra class:

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

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