Esempio

Menu contestuale attivabile per visualizzare elenchi di collegamenti. Reso interattivo con il plugin JavaScript a discesa .

<ul class = "menu a discesa" role = "menu" aria-labelledby = "menu a discesa" >   
  <li><a tabindex = "-1" href = "#" > Azione </a></li>  
  <li><a tabindex = "-1" href = "#" > Un'altra azione </a></li>  
  <li><a tabindex = "-1" href = "#" > Qualcos'altro qui </a></li>  
  <li classe = "divisore" ></li> 
  <li><a tabindex = "-1" href = "#" > Link separato </a></li>  
</ul>

Marcatura

Guardando solo il menu a discesa, ecco l'HTML richiesto. Devi racchiudere il trigger del menu a discesa e il menu a discesa all'interno .dropdowno un altro elemento che dichiara position: relative;. Quindi crea il menu.

< classe div = "menu a discesa" > 
  <!-- Collegamento o pulsante per attivare il menu a discesa -->
  <ul class = "menu a discesa" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Azione </a></li>  
    <li><a tabindex = "-1" href = "#" > Un'altra azione </a></li>  
    <li><a tabindex = "-1" href = "#" > Qualcos'altro qui </a></li>  
    <li classe = "divisore" ></li> 
    <li><a tabindex = "-1" href = "#" > Link separato </a></li>  
  </ul>
</div>

Opzioni

Allinea i menu a destra e aggiungi livelli aggiuntivi di menu a discesa.

Allineamento dei menu

Aggiungi .pull-righta .dropdown-menuper allineare a destra il menu a discesa.

<ul class = "menu a discesa pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Opzioni di menu disabilitate

Aggiungi .disableda un <li>nel menu a discesa per disabilitare il collegamento.

<ul class = "menu a discesa" role = "menu" aria-labelledby = "menu a discesa" >   
  <li><a tabindex = "-1" href = "#" > Collegamento normale </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Link disabilitato </a></li>   
  <li><a tabindex = "-1" href = "#" > Un altro collegamento </a></li>  
</ul>

Sottomenu sui menu a discesa

Aggiungi un ulteriore livello di menu a discesa, che appaiono al passaggio del mouse come quelli di OS X, con alcune semplici aggiunte di markup. Aggiungi .dropdown-submenua qualsiasi liin un menu a discesa esistente per lo stile automatico.

<ul class = "menu a discesa" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li classe = "sottomenu a discesa" > 
    <a tabindex = "-1" href = "#" > Altre opzioni </a>  
    <ul class = "menu a discesa" > 
      ...
    </ul>
  </li>
</ul>

Esempi

Due opzioni di base, insieme a due varianti più specifiche.

Gruppo pulsante singolo

Avvolgi una serie di pulsanti con .btnin .btn-group.

< classe div = "gruppo btn" > 
  <button class = "btn" > Sinistra </button> 
  <button class = "btn" > Medio </button> 
  <button class = "btn" > Destra </button> 
</div>

Gruppi di pulsanti multipli

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>

Gruppi di pulsanti verticali

Fai in modo che una serie di pulsanti appaia impilati verticalmente anziché orizzontalmente.

<div class = "btn-group btn-group-vertical" > 
  ...
</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.

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 un .btn-groupe fornendo il markup del menu corretto.

< 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 con qualsiasi dimensione: .btn-large, .btn-small, o .btn-mini.

Richiede JavaScript

I pulsanti a discesa 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. Devi risolvere l'allineamento manualmente o con JavaScript personalizzato.

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.

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

Taglie

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

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

Menu a tendina

I menu a discesa possono anche essere spostati 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>

Default leggeri Stesso markup, classi diverse

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

Schede di base

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

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

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

Stato disabile

Per qualsiasi componente di navigazione (schede, pillole o elenco), aggiungi .disabledcollegamenti grigi e nessun effetto al passaggio del mouse . I collegamenti rimarranno selezionabili, tuttavia, a meno che non si rimuova l' hrefattributo. In alternativa, puoi implementare JavaScript personalizzato per impedire quei clic.

<ul class = "nav nav-pillole" > 
  ...
  <li class = "disabilitato" ><a href = "#" > Home </a></li>  
  ...
</ul>

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.

Impilabile

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

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

Pillole impilate

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

Dropdown

Aggiungi menu a discesa con un po' di HTML in più e il plug-in JavaScript a discesa .

Schede con menu a discesa

<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

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

Liste di navigazione

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.

Esempio di elenco di navigazione

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

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Intestazione elenco </li> 
  <li class = "attivo" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Libreria </a></li> 
  ...
</ul>

NotaPer l'annidamento all'interno di un elenco di navigazione, includi class="nav nav-list"in qualsiasi file nidificato <ul>.

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>

nav a tab

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.

Esempio tabbable

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

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

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 leggero plug-in jQuery. Ulteriori informazioni su come dare vita alle schede tabbable nella pagina dei documenti JavaScript .

Tabable in qualsiasi direzione

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>

Barra di navigazione di base

Per iniziare, le barre di navigazione sono statiche (non fissate in alto) e includono il supporto per il nome di un progetto e la navigazione di base. Posizionane uno ovunque all'interno di un .container, che imposta la larghezza del tuo sito e dei tuoi contenuti.

< classe div = "barra di navigazione" > 
  < classe div = "navbar-inner" > 
    <a class = "brand" href = "#" > Titolo </a>  
    <ul class = "nav" > 
      <li class = "attivo" ><a href = "#" > Home </a></li>  
      <li><a href = "#" > Collegamento </a></li> 
      <li><a href = "#" > Collegamento </a></li> 
    </ul>
  </div>
</div>

Componenti della barra di navigazione

Marca

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

<a class = "brand" href = "#" > Nome progetto </a>  

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>

Le forme

Per definire e posizionare correttamente un modulo all'interno della barra di navigazione, aggiungi 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" >  
  < tipo di pulsante = "invia" class = "btn" > Invia </button>  
</modulo>

Modulo di ricerca

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>

Allineamento dei componenti

Allinea i collegamenti di navigazione, il modulo di ricerca o il testo, utilizza le classi di utilità .pull-lefto . .pull-rightEntrambe le classi aggiungeranno un float CSS nella direzione specificata.

Utilizzo dei menu a discesa

Aggiungi menu a tendina e menu a tendina al nav con un po' di markup e il plugin JavaScript dei menu a tendina .

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

Visita la documentazione dei menu a discesa JavaScript per ulteriori markup e informazioni sulla chiamata ai menu a discesa.

Testo

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

Variazioni di visualizzazione opzionali

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

Fissato in alto

Aggiungi .navbar-fixed-tope ricorda di tenere conto dell'area nascosta sottostante aggiungendo almeno 40px paddingal file <body>. Assicurati di aggiungerlo dopo il CSS di Bootstrap di base e prima del CSS reattivo opzionale.

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

Fissato al fondo

Aggiungi .navbar-fixed-bottominvece.

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

Barra di navigazione superiore statica

Crea una barra di navigazione a tutta larghezza che scorre via con la pagina aggiungendo .navbar-static-top. A differenza della .navbar-fixed-topclasse, non è necessario modificare il riempimento sul file body.

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

Barra di navigazione reattiva

Per implementare una barra di navigazione reattiva in compressione, avvolgere il contenuto della barra di navigazione in un div contenitore .nav-collapse.collapse, e aggiungere 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 -->
      < classe div = "collasso nav" > 
        <!-- .nav, .navbar-search, .navbar-form, ecc -->
      </div>
 
    </div>
  </div>
</div>

Variazione invertita

Modifica l'aspetto della barra di navigazione aggiungendo .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Esempi

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

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

Impaginazione standard

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

< classe div = "impaginazione" > 
  <ul>
    <li><a href = "#" > Prec . </a></li> 
    <li><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 = "#" > 5 </a></li> 
    <li><a href = "#" > Avanti </a></li> 
  </ul>
</div>

Opzioni

Stati disabili e attivi

I collegamenti sono personalizzabili per diverse circostanze. Utilizzare .disabledper collegamenti non cliccabili e .activeper indicare la pagina corrente.

< classe div = "impaginazione" > 
  <ul>
    <li class = "disabilitato" ><a href = "#" > « </a></li>  
    <li class = "attivo" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Puoi facoltativamente sostituire gli ancoraggi attivi o disabilitati con le estensioni per rimuovere la funzionalità dei clic mantenendo gli stili desiderati.

< classe div = "impaginazione" > 
  <ul>
    <li class = "disabilitato" ><span> « </span></li> 
    <li classe = "attivo" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Taglie

Hai voglia di un'impaginazione più grande o più piccola? Aggiungi .pagination-large, .pagination-small, o .pagination-miniper dimensioni aggiuntive.

<div class = "impaginazione paginazione-grande" > 
  <ul>
    ...
  </ul>
</div>
< classe div = "impaginazione" > 
  <ul>
    ...
  </ul>
</div>
<div class = "impaginazione paginazione-piccolo" > 
  <ul>
    ...
  </ul>
</div>
<div class = "impaginazione impaginazione-mini" > 
  <ul>
    ...
  </ul>
</div>

Allineamento

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

<div class = "impaginazione centrata sull'impaginazione" > 
  ...
</div>

<div class = "impaginazione impaginazione-destra" > 
  ...
</div>

Cercapersone

Collegamenti rapidi precedenti e successivi per semplici implementazioni di impaginazione con markup e stili leggeri. È ottimo per siti semplici come blog o riviste.

Esempio predefinito

Per impostazione predefinita, il cercapersone centra i collegamenti.

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

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

Stato disabilitato opzionale

I collegamenti cercapersone utilizzano anche la .disabledclasse di utilità generale dall'impaginazione.

<ul class = "cercapersone" > 
  <li class = "precedentemente disabilitato" > 
    <a href = "#" > ← Più vecchio </a> 
  </li>
  ...
</ul>

Etichette

Distintivi

Facilmente pieghevole

Per una facile implementazione, etichette e badge collasseranno semplicemente (tramite il :emptyselettore di CSS) quando non esiste alcun contenuto all'interno.

Unità Eroe

Un componente leggero e flessibile per mostrare i contenuti chiave del tuo sito. Funziona bene su siti di marketing e ricchi di contenuti.

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

Intestazione di pagina

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 <small> Sottotesto per l'intestazione </small></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.

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.

Marcatura

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 = "span4" > 
    <a href = "#" class = "miniatura" >  
      <img data-src = "holder.js/300x200" 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 = "span4" > 
    < classe div = "miniatura" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Etichetta miniatura </h3>
      <p> Didascalia miniatura... </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.

Avviso predefinito

Avvolgi qualsiasi testo e un pulsante di eliminazione opzionale .alertper un messaggio di avviso di base.

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

Ignora i pulsanti

I browser Mobile Safari e Mobile Opera, oltre data-dismiss="alert"all'attributo, richiedono una href="#"per l'eliminazione degli avvisi quando si utilizza un <a>tag.

<a href = "#" class = "close" data-dismiss = "alert" > × </a>   

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.

< tipo di pulsante = "pulsante" class = "chiudi" data-dismiss = "avviso" > × </pulsante>   

Ignora gli avvisi tramite JavaScript

Utilizza il plug-in di avvisi jQuery per eliminare gli avvisi in modo rapido e semplice.

Opzioni

Per messaggi più lunghi, aumenta il riempimento nella parte superiore e inferiore del wrapper degli avvisi aggiungendo .alert-block.

<div class = "blocco avvisi di avviso" > 
  < tipo di pulsante = "pulsante" class = "chiudi" data-dismiss = "avviso" > × </pulsante>   
  <h4> Attenzione! </h4>
  Meglio controllarti, non sei...
</div>

Alternative contestuali

Aggiungi classi facoltative per modificare la connotazione di un avviso.

Errore o pericolo

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

Successo

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

Informazione

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

Esempi e markup

Di base

Barra di avanzamento predefinita con gradiente verticale.

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

A strisce

Usa una sfumatura per creare un effetto a strisce. Non disponibile in IE7-8.

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

Animato

Aggiungi .activea .progress-stripedper animare le strisce da destra a sinistra. Non disponibile in tutte le versioni di IE.

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

Impilato

Metti più barre nello stesso .progressper impilarle.

< classe div = "progresso" > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

Opzioni

Colori aggiuntivi

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

<div class = "progress progress-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "avanzamento progresso-successo" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "avanzamento progresso-avviso" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progresso progresso-pericolo" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Barre rigate

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progresso-pericolo progresso-strisciato" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

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.

Le versioni precedenti a Internet Explorer 10 e Opera 12 non supportano le animazioni.

Stili di oggetti astratti per la creazione di vari tipi di componenti (come commenti sul blog, Tweet e così via) che presentano un'immagine allineata a sinistra o a destra insieme al contenuto testuale.

Esempio predefinito

Il supporto predefinito consente di spostare un oggetto multimediale (immagini, video, audio) a sinistra oa destra di un blocco di contenuto.

Intestazione multimediale

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibolo in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Intestazione multimediale

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibolo in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Intestazione multimediale

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibolo in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

< classe div = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "oggetto multimediale" data-src = "holder.js/64x64" >  
  </a>
  < classe div = "corpo multimediale" > 
    <h4 class = "intestazione multimediale" > Intestazione media </h4> 
    ...
 
    <!-- Oggetto multimediale nidificato -->
    < classe div = "media" > 
      ...
    </div>
  </div>
</div>

Elenco dei media

Con un po 'di markup in più, puoi utilizzare i media all'interno dell'elenco (utile per thread di commenti o elenchi di articoli).

<ul class = "lista-media" > 
  <li classe = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "oggetto multimediale" data-src = "holder.js/64x64" >  
    </a>
    < classe div = "corpo multimediale" > 
      <h4 class = "intestazione multimediale" > Intestazione media </h4> 
      ...
 
      <!-- Oggetto multimediale nidificato -->
      < classe div = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

pozzi

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

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

Classi facoltative

Controllare il riempimento e gli angoli arrotondati con due classi di modificatori opzionali.

<div class = "ben ben-grande" > 
  ...
</div>

<div class = "bene bene-piccolo" > 
  ...
</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="#"evento per i clic se preferisci utilizzare un'ancora.

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

Classi di aiuto

Classi semplici e mirate per piccole modifiche al display o al comportamento.

.tira a sinistra

Sposta un elemento a sinistra

classe = "tira a sinistra"

. tirare - sinistra {
  galleggiante : sinistra ;
}

.tira a destra

Fai galleggiare un elemento a destra

classe = "tira a destra"

. tirare - a destra {
  galleggiante : a destra ;
}

.muto

Cambia il colore di un elemento in#999

classe = "disattivato"

. silenziato {
  colore : #999; 
}

.clearfix

Cancella floatsu qualsiasi elemento

classe = "clearfix"

. clearfix {
  * zoom : 1 ; 
  &: prima ,
  &: dopo {
    display : tabella ;
    contenuto : "" ; 
  }
  &: dopo {
    chiaro : entrambi ;
  }
}