Gruppi di pulsanti

Utilizzare i gruppi di pulsanti per unire più pulsanti come un unico componente composito. Costruiscili con una serie di <a>o <button>elementi.

Migliori pratiche

Consigliamo le seguenti linee guida per l'utilizzo di gruppi di pulsanti e barre degli strumenti:

• Utilizzare sempre lo stesso elemento in un singolo gruppo di pulsanti <a>o <button>.
• Non mescolare pulsanti di colori diversi nello stesso gruppo di pulsanti.
• Usa le icone in aggiunta o al posto del testo, ma assicurati di includere alt e il testo del titolo dove appropriato.

I gruppi di pulsanti correlati con menu a discesa (vedi sotto) devono essere richiamati separatamente e includere sempre un cursore a discesa per indicare il comportamento previsto.

Esempio predefinito

Ecco come l'HTML cerca un gruppo di pulsanti standard creato con pulsanti di tag di ancoraggio:

< classe div = "gruppo btn" > 
  < classe pulsante = "btn" > 1 </button> 
  < classe pulsante = "btn" > 2 </button> 
  < classe pulsante = "btn" > 3 </button> 
</div>

Esempio di barra degli strumenti

Combina insiemi di <div class="btn-group">in a <div class="btn-toolbar">per componenti più complessi.

< classe div = "barra degli strumenti btn" > 
  < classe div = "gruppo btn" > 
    ...
  </div>
</div>

Casella di controllo e gusti radio

I gruppi di pulsanti possono anche funzionare come radio, in cui può essere attivo un solo pulsante, o caselle di controllo, in cui può essere attivo un numero qualsiasi di pulsanti. Visualizza i documenti Javascript per questo.

Ottieni il javascript »

Menu a discesa nei gruppi di pulsanti

Dritta! I pulsanti con i menu a discesa devono essere racchiusi singolarmente nei propri .btn-groupall'interno .btn-toolbardi un rendering corretto.

Panoramica ed esempi

Utilizzare qualsiasi pulsante per attivare un menu a discesa posizionandolo all'interno di a .btn-groupe fornendo il markup del menu corretto.

Esempio di markup

Simile a un gruppo di pulsanti, il nostro markup utilizza il normale markup dei pulsanti, ma con una manciata di aggiunte per perfezionare lo stile e supportare il plug-in jQuery a discesa di Bootstrap.

< classe div = "gruppo btn" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Azione
    <span class = "caret" ></span> 
  </a>
  <ul class = "menu a discesa" > 
    <!-- collegamenti al menu a discesa -->
  </ul>
</div>

Funziona con tutte le dimensioni dei pulsanti

I menu a discesa dei pulsanti funzionano a qualsiasi dimensione. le dimensioni del pulsante a .btn-large, .btn-small, o .btn-mini.

Richiede javascript

I menu a discesa dei pulsanti richiedono il plug-in a discesa Bootstrap per funzionare.

In alcuni casi, come i dispositivi mobili, i menu a discesa si estenderanno al di fuori della finestra. È necessario risolvere l'allineamento manualmente o con javascript personalizzato.

Panoramica ed esempi

Basandoci sugli stili e sul markup del gruppo di pulsanti, possiamo creare facilmente un pulsante diviso. I pulsanti divisi presentano un'azione standard a sinistra e un menu a discesa a destra con collegamenti contestuali.

Taglie

Utilizza le classi di pulsanti extra .btn-mini, .btn-smallo .btn-largeper il dimensionamento.

< classe div = "gruppo btn" > 
  ...
  <ul class = "menu a discesa pull-right" > 
    <!-- collegamenti al menu a discesa -->
  </ul>
</div>

Esempio di markup

Espandiamo i normali menu a discesa dei pulsanti per fornire una seconda azione del pulsante che funge da trigger a discesa separato.

< classe div = "gruppo btn" > 
  < classe pulsante = "btn" > Azione </button> 
  < classe pulsante = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </pulsante>
  <ul class = "menu a discesa" > 
    <!-- collegamenti al menu a discesa -->
  </ul>
</div>

Menu a comparsa

I menu a discesa possono anche essere attivati ​​dal basso verso l'alto aggiungendo una singola classe al genitore immediato di .dropdown-menu. Invertirà la direzione di .carete riposizionare il menu stesso per spostarsi dal basso verso l'alto anziché dall'alto verso il basso.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  < classe pulsante = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </pulsante>
  <ul class = "menu a discesa" > 
    <!-- collegamenti al menu a discesa -->
  </ul>
</div>

Classe base potente

Tutti i componenti di navigazione qui (schede, pillole ed elenchi) condividono lo stesso markup di base e gli stessi stili attraverso la .navclasse.

Quando usare

Le schede e le pillole sono ottime per sezioni di contenuto o per navigare tra pagine di contenuti correlati.

Allineamento dei componenti

Per allineare i collegamenti di navigazione, utilizzare le classi di utilità .pull-lefto . .pull-rightEntrambe le classi aggiungeranno un float CSS nella direzione specificata.

Schede di base

Prendi un normale <ul>di link e aggiungi .nav-tabs:

• Casa
• Profilo
• Messaggi

<ul class = "nav nav-schede" > 
  <li classe = "attivo" > 
    <a href = "#" > Pagina iniziale </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pillole di base

Prendi lo stesso HTML, ma usa .nav-pillsinvece:

• Casa
• Profilo
• Messaggi

<ul class = "nav nav-pillole" > 
  <li classe = "attivo" > 
    <a href = "#" > Pagina iniziale </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Come impilarli

Poiché le schede e le pillole sono orizzontali per impostazione predefinita, aggiungi semplicemente una seconda classe, .nav-stacked, per farle apparire impilate verticalmente.

Schede impilate

• Casa
• Profilo
• Messaggi

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Pillole impilate

• Casa
• Profilo
• Messaggi

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

Menu ricchi resi facili

I menu a discesa nelle schede e nelle pillole Bootstrap sono semplicissimi e richiedono solo un po' di HTML in più e un plugin jQuery leggero.

Vai alla pagina Javascript per leggere i documenti sull'inizializzazione dei menu a discesa in Bootstrap.

Schede con menu a discesa

• Casa
• Aiuto
• Cadere in picchiata
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-schede" > 
  <li classe = "elenco a discesa" > 
    <a class = "interruttore a discesa" 
       data-toggle = "menu a discesa"
       href = "#" >
        Cadere in picchiata
        <b classe = "accento circonflesso" ></b> 
      </a>
    <ul class = "menu a discesa" > 
      <!-- collegamenti -->
    </ul>
  </li>
</ul>

Pillole con menu a discesa

• Casa
• Aiuto
• Cadere in picchiata
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pillole" > 
  <li classe = "elenco a discesa" > 
    <a class = "interruttore a discesa" 
       data-toggle = "menu a discesa"
       href = "#" >
        Cadere in picchiata
        <b classe = "accento circonflesso" ></b> 
      </a>
    <ul class = "menu a discesa" > 
      <!-- collegamenti -->
    </ul>
  </li>
</ul>

Navigazione in stile applicazione

Gli elenchi di navigazione forniscono un modo semplice e facile per creare gruppi di collegamenti di navigazione con intestazioni opzionali. Sono utilizzati al meglio nelle barre laterali come il Finder in OS X.

Strutturalmente, sono costruiti sugli stessi stili di navigazione di base di schede e pillole, quindi l'utilizzo e la personalizzazione sono semplici.

Con icone

Gli elenchi di navigazione sono anche facili da equipaggiare con le icone. Aggiungi il tag corretto <i>con classe e sei pronto.

Divisori orizzontali

Aggiungi un divisore orizzontale creando un elemento di elenco vuoto con la classe .divider, in questo modo:

<ul class = "nav nav-list" > 
  ...
  <li classe = "divisore" ></li> 
  ...
</ul>

Esempio di elenco di navigazione

Prendi una lista di link e aggiungi class="nav nav-list":

<ul class = "nav nav-list" > 
  <li classe = "nav-intestazione" > 
    Intestazione elenco
  </li>
  <li classe = "attivo" > 
    <a href = "#" > Pagina iniziale </a> 
  </li>
  <li>
    <a href = "#" > Libreria </a> 
  </li>
  ...
</ul>

Esempio con icone

Stesso esempio, ma con <i>tag per icone.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i classe = "libro-icone" ></i> 
      Biblioteca
    </a>
  </li>
  ...
</ul>

Cosa è incluso

Dai vita alle tue schede con un semplice plug-in per passare da un contenuto all'altro tramite le schede. Bootstrap integra le schede tabb in quattro stili: in alto (predefinito), a destra, in basso e a sinistra.

Cambiare tra loro è facile e richiede solo una modifica minima del markup.

Dissolvenza in schede

Per far sfumare le schede, aggiungi .fadea ciascuna .tab-pane.

Richiede il plugin jQuery

Tutte le schede tabbable sono alimentate dal nostro plugin jQuery leggero. Maggiori informazioni su come dare vita alle schede tabbable nella pagina dei documenti javascript .

Ottieni il javascript →

Esempio tabbable

Per rendere tabable le schede, crea un .tab-paneID univoco per ogni scheda e avvolgile in .tab-content.

Per le schede allineate a destra oa sinistra, avvolgi .nav-tabse .tab-contentin .tabbable.

Markup diretto

L'uso delle schede tabbable richiede un div di wrapping, un set di schede e un set di riquadri di contenuto tabbable.

<div class = "tabable" > <!-- Richiesto solo per le schede sinistra/destra -->  
  <ul class = "nav nav-schede" > 
    <li class = "attivo" ><a href = "#tab1" data-toggle = "tab" > Sezione 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Sezione 2 </a></li>  
  </ul>
  < classe div = "contenuto della scheda" > 
    <div class = "tab-pannello attivo" id = "tab1" >  
      <p> Sono nella Sezione 1. </p>
    </div>
    <div class = "tab-pannello" id = "tab2" >  
      <p> Salve, sono nella sezione 2. </p>
    </div>
  </div>
</div>

Schede in basso

Capovolgi l'ordine dell'HTML e aggiungi una classe per mettere le schede in basso.

<div class = "tabable tabs-below" > 
  < classe div = "contenuto della scheda" > 
    ...
  </div>
  <ul class = "nav nav-schede" > 
    ...
  </ul>
</div>

Schede a sinistra

Scambia la classe per inserire le schede a sinistra.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-schede" > 
    ...
  </ul>
  < classe div = "contenuto della scheda" > 
    ...
  </div>
</div>

Schede a destra

Scambia la classe per inserire le schede a destra.

<div class = "schede tabbable-destra" > 
  <ul class = "nav nav-schede" > 
    ...
  </ul>
  < classe div = "contenuto della scheda" > 
    ...
  </div>
</div>

Ponteggio Navbar

La barra di navigazione richiede solo pochi div per strutturarla bene per la visualizzazione statica o fissa.

< classe div = "barra di navigazione" > 
  < classe div = "navbar-inner" > 
    < classe div = "contenitore" > 
      ...
    </div>
  </div>
</div>

Barra di navigazione fissa

Correggi la barra di navigazione nella parte superiore o inferiore della finestra con una classe aggiuntiva sul div più esterno, .navbar.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

Quando apponi la barra di navigazione, ricorda di tenere conto dell'area nascosta sottostante. Aggiungi 40px o più di padding al file <body>. Assicurati di aggiungerlo dopo il CSS di Bootstrap di base e prima del CSS reattivo opzionale.

Marchio

Un semplice link per mostrare il nome del tuo marchio o progetto richiede solo un tag di ancoraggio.

<a class = "marchio" href = "#" >  
  Nome del progetto
</a>

Moduli nella barra di navigazione

Per definire e posizionare correttamente un modulo all'interno della barra di navigazione, aggiungere le classi appropriate come mostrato di seguito. Per un modulo predefinito, includi .navbar-forme uno .pull-lefto .pull-rightper allinearlo correttamente.

<form class = "navbar-form pull-left" > 
  < tipo di input = "testo" classe = "span2" >  
</modulo>

Per un modulo di ricerca più personalizzato, aggiungi .navbar-searcha forme .search-queryall'input per stili specializzati nella barra di navigazione.

< classe modulo = "navbar-search pull-left" > 
  < tipo di input = "testo" class = segnaposto "interrogazione di ricerca" = "Cerca" >   
</modulo>

Variazione reattiva opzionale

A seconda della quantità di contenuto nella barra in alto, potresti voler implementare le opzioni reattive. Per fare ciò, avvolgi il contenuto della navigazione in un div contenitore .nav-collapse.collapse, e aggiungi il pulsante di attivazione/disattivazione della barra di navigazione, .btn-navbar.

< classe div = "barra di navigazione" > 
  < classe div = "navbar-inner" > 
    < classe div = "contenitore" > 
 
      <!-- .btn-navbar viene utilizzato come interruttore per il contenuto compresso della barra di navigazione -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "barra delle icone" ></span> 
        <span class = "barra delle icone" ></span> 
        <span class = "barra delle icone" ></span> 
      </a>
 
      <!-- Assicurati di lasciare il marchio là fuori se vuoi che venga mostrato -->
      <a class = "brand" href = "#" > Nome progetto </a>  
 
      <!-- Tutto quello che vuoi nascosto a 940px o meno, inseriscilo qui -->
      <div class = "nav-collasso" > 
        <!-- .nav, .navbar-search, .navbar-form, ecc -->
      </div>
 
    </div>
  </div>
</div>

Collegamenti di navigazione

Gli elementi di navigazione sono semplici da aggiungere tramite elenchi non ordinati.

<ul class = "nav" > 
  <li classe = "attivo" > 
    <a href = "#" > Pagina iniziale </a> 
  </li>
  <li><a href = "#" > Collegamento </a></li> 
  <li><a href = "#" > Collegamento </a></li> 
</ul>

Puoi facilmente aggiungere divisori ai tuoi collegamenti di navigazione con una voce di elenco vuota e una classe semplice. Basta aggiungere questo tra i link:

<ul class = "nav" > 
  ...
  <li classe = "divisore verticale" ></li> 
  ...
</ul>

Allineamento dei componenti

Per allineare un nav, un modulo di ricerca o un testo, utilizzare le classi di utilità .pull-lefto . .pull-rightEntrambe le classi aggiungeranno un float CSS nella direzione specificata.

Aggiunta di menu a discesa

Aggiungere menu a tendina e menu a tendina al nav è semplicissimo, ma richiede l'uso del nostro plugin javascript .

<ul class = "nav" > 
  <li classe = "elenco a discesa" > 
    <a href = "#" 
          classe = "interruttore a discesa"
          data-toggle = "menu a discesa" >
          Account
          <b classe = "accento circonflesso" ></b> 
    </a>
    <ul class = "menu a discesa" > 
      ...
    </ul>
  </li>
</ul>

Ottieni il javascript →

Testo nella barra di navigazione

Avvolgi stringhe di testo in un <.navbar-text>, di solito su un <p>tag per l'interlinea e il colore corretti.

Perché usarli

La navigazione breadcrumb viene utilizzata per mostrare agli utenti dove si trovano all'interno di un'app o di un sito, ma non per la navigazione principale. Mantieni il loro uso scarso e conciso per essere più efficace.

Esempi

Un singolo esempio mostrato in quanto potrebbe essere visualizzato su più pagine.

• Casa

• casa /
• Biblioteca

• casa /
• Biblioteca /
• Dati

Marcatura

HTML è l'elenco standard non ordinato con collegamenti.

<ul class = "briciole di pane" > 
  <li>
    <a href = "#" > Home </a> <span class = "divisore" > / </span>   
  </li>
  <li>
    <a href = "#" > Libreria </a> <span class = "divider" > / </span>   
  </li>
  <li class = "attivo" > Dati </li> 
</ul>

Quando usare

Impaginazione ultra semplicistica e dallo stile minimale ispirata a Rdio, ottima per app e risultati di ricerca. Il blocco grande è difficile da perdere, facilmente scalabile e offre ampie aree di clic.

Collegamenti a pagine con stato

I collegamenti sono personalizzabili e funzionano in diverse circostanze con la classe giusta. .disabledper i link non cliccabili e .activeper la pagina corrente.

Allineamento flessibile

Aggiungi una delle due classi facoltative per modificare l'allineamento dei collegamenti di impaginazione: .pagination-centerede .pagination-right.

Esempi

Il componente di impaginazione predefinito è flessibile e funziona in una serie di varianti.

Marcatura

Avvolto in un <div>, l'impaginazione è solo un file <ul>.

< classe div = "impaginazione" > 
  <ul>
    <li><a href = "#" > Prec . </a></li> 
    <li classe = "attivo" > 
      <a href = "#" > 1 </a> 
    </li>
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > Avanti </a></li> 
  </ul>
</div>

A proposito di cercapersone

Il componente pager è un insieme di collegamenti per semplici implementazioni di impaginazione con markup leggero e stili ancora più leggeri. È ottimo per siti semplici come blog o riviste.

Stato disabilitato opzionale

I collegamenti Pager utilizzano anche la .disabledclasse generale dell'impaginazione.

Esempio predefinito

Per impostazione predefinita, il cercapersone centra i collegamenti.

• Precedente
• Prossimo

<ul class = "cercapersone" > 
  <li>
    <a href = "#" > Precedente </a> 
  </li>
  <li>
    <a href = "#" > Avanti </a> 
  </li>
</ul>

Collegamenti allineati

In alternativa, puoi allineare ogni collegamento ai lati:

• ← Più vecchio
• Più recente →

<ul class = "cercapersone" > 
  <li classe = "precedente" > 
    <a href = "#" > ← Più vecchio </a> 
  </li>
  <li classe = "successivo" > 
    <a href = "#" > Più recente → </a> 
  </li>
</ul>

Di

I badge sono componenti piccoli e semplici per visualizzare un indicatore o un conteggio di qualche tipo. Si trovano comunemente nei client di posta elettronica come Mail.app o nelle app mobili per le notifiche push.

Classi disponibili

Bootstrap fornisce un componente leggero e flessibile chiamato unità eroe per mostrare i contenuti sul tuo sito. Funziona bene su siti di marketing e ricchi di contenuti.

Marcatura

Avvolgi i tuoi contenuti in un divmodo simile:

< classe div = "unità eroe" > 
  <h1> Intestazione </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Scopri di più
    </a>
  </p>
</div>

Una semplice shell per h1distanziare e segmentare in modo appropriato sezioni di contenuto in una pagina. Può utilizzare l' elemento h1predefinito smalldi , così come la maggior parte degli altri componenti (con stili aggiuntivi).

< classe div = "intestazione della pagina" > 
  <h1> Esempio di intestazione di pagina </h1>
</div>

Miniature predefinite

Per impostazione predefinita, le miniature di Bootstrap sono progettate per mostrare le immagini collegate con un markup minimo richiesto.

Altamente personalizzabile

Con un po' di markup in più, è possibile aggiungere qualsiasi tipo di contenuto HTML come intestazioni, paragrafi o pulsanti nelle miniature.

• 

  Etichetta miniatura

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Azione Azione

• 

  Etichetta miniatura

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Azione Azione

Perché usare le miniature

Le miniature (in precedenza .media-gridfino alla v1.4) sono ottime per griglie di foto o video, risultati di ricerca di immagini, prodotti al dettaglio, portafogli e molto altro. Possono essere collegamenti o contenuto statico.

Markup semplice e flessibile

Il markup delle miniature è semplice: un ulnumero qualsiasi di lielementi è tutto ciò che serve. È anche super flessibile, consentendo qualsiasi tipo di contenuto con solo un po' più di markup per avvolgere i tuoi contenuti.

Utilizza le dimensioni delle colonne della griglia

Infine, il componente miniature utilizza le classi del sistema di griglia esistenti, come .span2o .span3, per il controllo delle dimensioni delle miniature.

Il markup

Come accennato in precedenza, il markup richiesto per le miniature è leggero e diretto. Ecco uno sguardo alla configurazione predefinita per le immagini collegate :

<ul class = "miniature" > 
  <li classe = "span3" > 
    <a href = "#" class = "miniatura" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Per il contenuto HTML personalizzato nelle miniature, il markup cambia leggermente. Per consentire il contenuto a livello di blocco ovunque, sostituiamo il <a>con un <div>simile:

<ul class = "miniature" > 
  <li classe = "span3" > 
    < classe div = "miniatura" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Etichetta miniatura </h5>
      <p> Didascalia della miniatura proprio qui... </p>
    </div>
  </li>
  ...
</ul>

Altri esempi

Esplora tutte le tue opzioni con le varie classi di griglia a tua disposizione. Puoi anche mescolare e abbinare diverse dimensioni.

Classe base riscritta

Con Bootstrap 2, abbiamo semplificato la classe base: .alertinvece di .alert-message. Abbiamo anche ridotto il markup minimo richiesto: non <p>è richiesto per impostazione predefinita, solo il markup esterno <div>.

Messaggio di avviso unico

Per un componente più duraturo con meno codice, abbiamo rimosso l'aspetto differenziante per gli avvisi di blocco, i messaggi che vengono forniti con più spaziatura interna e in genere più testo. Anche la classe è cambiata in .alert-block.

Va benissimo con javascript

Bootstrap viene fornito con un ottimo plug-in jQuery che supporta i messaggi di avviso, rendendoli eliminabili in modo rapido e semplice.

Ottieni il plugin »

Esempi di avvisi

Avvolgi il tuo messaggio e un'icona di chiusura opzionale in un div con classe semplice.

< classe div = "avviso" > 
  <button class = "chiudi" data-dismiss = "avviso" > × </button>  
  <strong> Attenzione! </strong> Meglio controllarti, non stai molto bene.
</div>

Dritta! I dispositivi iOS richiedono un'autorizzazione href="#"per l'eliminazione degli avvisi. Assicurati di includerlo e l'attributo dei dati per le icone di chiusura dell'ancora. In alternativa, puoi utilizzare un <button>elemento con l'attributo data, cosa che abbiamo scelto di fare per i nostri documenti. Quando si utilizza <button>, è necessario includere type="button"o i moduli potrebbero non essere inviati.

Estendi facilmente il messaggio di avviso standard con due classi opzionali: .alert-blockper più spaziatura interna e controlli di testo e .alert-headingper un'intestazione corrispondente.

<div class = "blocco avvisi di avviso" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "intestazione di avviso" > Attenzione! </h4> 
  Meglio controllarti, non sei...
</div>

Errore o pericolo

<div class = "avviso di errore di avviso" > 
  ...
</div>

Successo

<div class = "avviso di esito positivo" > 
  ...
</div>

Informazione

<div class = "avviso-info-avviso" > 
  ...
</div>

Di base

Barra di avanzamento predefinita con gradiente verticale.

< classe div = "progresso" > 
  < classe div = "barra" 
       style = " larghezza : 60 %; " ></div> 
</div>

A strisce

Usa una sfumatura per creare un effetto a strisce (no IE).

<div class = "avanzamento a strisce" > 
  < classe div = "barra" 
       style = " larghezza : 20 %; " ></div> 
</div>

Animato

Prende l'esempio a strisce e lo anima (nessun IE).

<div class = "avanzamento a strisce 
     attivo" >
  < classe div = "barra" 
       style = " larghezza : 40 %; " ></div> 
</div>

Colori aggiuntivi

Le barre di avanzamento utilizzano alcuni degli stessi pulsanti e classi di avviso per stili coerenti.

Barre rigate

Simile ai colori solidi, abbiamo varie barre di avanzamento a strisce.

Comportamento

Le barre di avanzamento utilizzano transizioni CSS3, quindi se regoli dinamicamente la larghezza tramite javascript, verrà ridimensionata senza problemi.

Se usi la .activeclasse, le .progress-stripedbarre di avanzamento animeranno le strisce da sinistra a destra.

Supporto browser

Le barre di avanzamento utilizzano gradienti, transizioni e animazioni CSS3 per ottenere tutti i loro effetti. Queste funzionalità non sono supportate in IE7-9 o versioni precedenti di Firefox.

Opera e IE non supportano le animazioni in questo momento.

pozzi

Usa il pozzo come effetto semplice su un elemento per dargli un effetto di inserto.

< classe div = "bene" > 
  ...
</div>

Icona Chiudi

Usa l'icona di chiusura generica per ignorare contenuti come modali e avvisi.

×

< classe pulsante = "chiudi" > × </pulsante> 

I dispositivi iOS richiedono un href="#" per gli eventi di clic se preferisci utilizzare un'ancora.

<a class = "chiudi" href = "#" > × </a>