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.

Puoi anche combinare set di <div class="btn-group">in <div class="btn-toolbar">per progetti più complessi.

Esempio di markup

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

< classe div = "gruppo btn" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

E con una barra degli strumenti per più gruppi:

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

Dritta

I CSS per i gruppi di pulsanti si trovano in un file separato, button-groups.less.

Menu a discesa dei pulsanti

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>

Menu a discesa dei pulsanti di divisione

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.

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" > 
  <a class = "btn" href = "#" > Azione </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <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.

Perché pastiglie e pillole

Le schede e le pillole in Bootstrap sono costruite su un <ul>HTML con lo stesso nucleo, un elenco di collegamenti. Scambia tra schede o pillole solo con una classe.

Entrambe le opzioni sono ottime per sottosezioni di contenuto o per navigare tra pagine di contenuti correlati.

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
• Profilo
• Cadere in picchiata
  • Azione
  • Un'altra azione
  • Qualcos'altro qui
  • Collegamento separato

<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
• Profilo
• Cadere in picchiata
  • Azione
  • Un'altra azione
  • Qualcos'altro qui
  • Collegamento separato

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

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.

Esempio tabbable

Per rendere le schede tabbable, avvolgi .nav-tabsin un altro div con class .tabbable.

Plugin jQuery personalizzato

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

Ottieni il javascript →

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>

Per fare in modo che la barra di navigazione sia fissata nella parte superiore della finestra, aggiungi .navbar-fixed-topal div più esterno, .navbar. Nel tuo CSS, dovrai anche tenere conto della sovrapposizione che provoca aggiungendo padding-top: 40px;al tuo <body>.

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

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>

Modulo di ricerca

I moduli di ricerca ricevono stili personalizzati nella barra di navigazione con la .navbar-searchclasse. Includi .pull-lefto .pull-rightsul formper allinearlo.

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

Aggiunta di menu a discesa

L'aggiunta di menu a discesa al nav è semplicissima, 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 →

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 classe = "attivo" > 
    <a href = "#" > Dati </a> 
  </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.

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>

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 l'outer <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" > 
  <a classe = "chiudi" > × </a> 
  <strong> Attenzione! </strong> Meglio controllarti, non stai molto bene.
</div>

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 classe = "chiudi" > × </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.

<div class = "progress progresso-info 
     a strisce di avanzamento" >
  < classe div = "barra" 
       style = " larghezza : 20 %; " ></div> 
</div>

Animato

Prende l'esempio a strisce e lo anima.

<div class = "progresso progresso-pericolo 
     stato di avanzamento attivo" >
  < classe div = "barra" 
       style = " larghezza : 40 %; " ></div> 
</div>

Colori aggiuntivi

Le barre di avanzamento utilizzano alcuni degli stessi nomi di classe dei pulsanti e degli avvisi per uno stile simile.

• .progress-info
• .progress-success
• .progress-danger

In alternativa, puoi personalizzare i file LESS e arrotolare i tuoi colori e dimensioni.

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-8 o versioni precedenti di Firefox.

Opera non supporta 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>

Distintivi

Usa un badge su un elemento per un conteggio non letto o come semplice indicatore.

<span class = "badge" > 3 </div> 

Icona Chiudi

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

×

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