Componenti

Decine di componenti riutilizzabili creati per fornire navigazione, avvisi, popover e altro ancora.

Esempi

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

Gruppo pulsante singolo

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

  1. < classe div = "gruppo btn" >
  2. <button class = "btn" > Sinistra </button>
  3. <button class = "btn" > Medio </button>
  4. <button class = "btn" > Destra </button>
  5. </div>

Gruppi di pulsanti multipli

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

  1. < classe div = "barra degli strumenti btn" >
  2. < classe div = "gruppo btn" >
  3. ...
  4. </div>
  5. </div>

Gruppi di pulsanti verticali

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

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </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 a .btn-groupe fornendo il markup del menu corretto.

  1. < classe div = "gruppo btn" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Azione
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "menu a discesa" >
  7. <!-- collegamenti al menu a discesa -->
  8. </ul>
  9. </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 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. 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.

  1. < classe div = "gruppo btn" >
  2. < classe pulsante = "btn" > Azione </button>
  3. < classe pulsante = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </pulsante>
  6. <ul class = "menu a discesa" >
  7. <!-- collegamenti al menu a discesa -->
  8. </ul>
  9. </div>

Taglie

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

  1. < classe div = "gruppo btn" >
  2. <button class = "btn btn-mini" > Azione </button>
  3. < classe pulsante = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </pulsante>
  6. <ul class = "menu a discesa" >
  7. <!-- collegamenti al menu a discesa -->
  8. </ul>
  9. </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.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. < classe pulsante = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </pulsante>
  6. <ul class = "menu a discesa" >
  7. <!-- collegamenti al menu a discesa -->
  8. </ul>
  9. </div>

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.

  1. < classe div = "impaginazione" >
  2. <ul>
  3. <li><a href = "#" > Prec . </a></li>
  4. <li><a href = "#" > 1 </a></li>
  5. <li><a href = "#" > 2 </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > 4 ​​</a></li>
  8. <li><a href = "#" > 5 </a></li>
  9. <li><a href = "#" > Avanti </a></li>
  10. </ul>
  11. </div>

Opzioni

Stati disabili e attivi

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

  1. < classe div = "impaginazione" >
  2. <ul>
  3. <li class = "disabilitato" ><a href = "#" > « </a></li>
  4. <li class = "attivo" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

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

  1. < classe div = "impaginazione" >
  2. <ul>
  3. <li class = "disabilitato" ><span> « </span></li>
  4. <li classe = "attivo" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Taglie

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

  1. <div class = "impaginazione di grandi dimensioni" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. < classe div = "impaginazione" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "impaginazione paginazione-piccolo" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "impaginazione paginazione-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Allineamento

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

  1. <div class = "impaginazione centrata sull'impaginazione" >
  2. ...
  3. </div>
  1. <div class = "impaginazione impaginazione-destra" >
  2. ...
  3. </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.

  1. <ul class = "cercapersone" >
  2. <li><a href = "#" > Precedente </a></li>
  3. <li><a href = "#" > Avanti </a></li>
  4. </ul>

Collegamenti allineati

In alternativa, puoi allineare ogni collegamento ai lati:

  1. <ul class = "cercapersone" >
  2. <li classe = "precedente" >
  3. <a href = "#" > Più vecchio </a>
  4. </li>
  5. <li classe = "successivo" >
  6. <a href = "#" > Più recente → </a>
  7. </li>
  8. </ul>

Stato disabilitato opzionale

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

  1. <ul class = "cercapersone" >
  2. <li class = "precedentemente disabilitato" >
  3. <a href = "#" > Più vecchio </a>
  4. </li>
  5. ...
  6. </ul>

Etichette

Etichette Marcatura
Predefinito <span class="label">Default</span>
Successo <span class="label label-success">Success</span>
Avvertimento <span class="label label-warning">Warning</span>
Importante <span class="label label-important">Important</span>
Informazioni <span class="label label-info">Info</span>
Inverso <span class="label label-inverse">Inverse</span>

Distintivi

Nome Esempio Marcatura
Predefinito 1 <span class="badge">1</span>
Successo 2 <span class="badge badge-success">2</span>
Avvertimento 4 <span class="badge badge-warning">4</span>
Importante 6 <span class="badge badge-important">6</span>
Informazioni 8 <span class="badge badge-info">8</span>
Inverso 10 <span class="badge badge-inverse">10</span>

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.

Ciao mondo!

Questa è una semplice unità eroe, un semplice componente in stile jumbotron per richiamare l'attenzione su contenuti o informazioni in primo piano.

Scopri di più

  1. < classe div = "unità eroe" >
  2. <h1> Intestazione </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Scopri di più
  7. </a>
  8. </p>
  9. </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).

  1. < classe div = "intestazione della pagina" >
  2. <h1> Esempio di intestazione di pagina <small> Sottotesto per l'intestazione </small></h1>
  3. </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.

  • 300x200

    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

  • 300x200

    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

  • 300x200

    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.

Marcatura

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

  1. <ul class = "miniature" >
  2. <li classe = "span4" >
  3. <a href = "#" class = "miniatura" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "miniature" >
  2. <li classe = "span4" >
  3. < classe div = "miniatura" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Etichetta miniatura </h3>
  6. <p> Didascalia miniatura... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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.

Avvertimento! Meglio controllarti, non stai molto bene.
  1. < classe div = "avviso" >
  2. < tipo di pulsante = "pulsante" class = "chiudi" data-dismiss = "avviso" > × </pulsante>
  3. <strong> Attenzione! </strong> Meglio controllarti, non stai molto bene.
  4. </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.

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

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

Avvertimento!

Meglio controllarti, non stai molto bene. Nulla vitae elit libero, a pharetra augu. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

Alternative contestuali

Aggiungi classi facoltative per modificare la connotazione di un avviso.

Errore o pericolo

Oh schiocco! Modifica alcune cose e prova a inviare di nuovo.
  1. <div class = "avviso di errore di avviso" >
  2. ...
  3. </div>

Successo

Ben fatto! Hai letto con successo questo importante messaggio di avviso.
  1. <div class = "avviso di esito positivo" >
  2. ...
  3. </div>

Informazione

Dritta! Questo avviso richiede la tua attenzione, ma non è molto importante.
  1. <div class = "avviso-info-avviso" >
  2. ...
  3. </div>

Esempi e markup

Di base

Barra di avanzamento predefinita con gradiente verticale.

  1. < classe div = "progresso" >
  2. < classe div = stile "barra" = " larghezza : 60 %; " ></div>
  3. </div>

A strisce

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

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

Animato

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

  1. <div class = "avanzamento con strisce di avanzamento attivo" >
  2. < classe div = stile "barra" = " larghezza : 40 %; " ></div>
  3. </div>

Impilato

Metti più barre nello stesso .progressper impilarle.

  1. < classe div = "progresso" >
  2. <div class = "bar bar-success" style = " width : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " width : 10 %; " ></div>
  5. </div>

Opzioni

Colori aggiuntivi

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

  1. <div class = "progress progress-info" >
  2. < classe div = stile "barra" = " larghezza : 20 % " ></div>
  3. </div>
  4. <div class = "avanzamento progresso-successo" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "avanzamento progresso-avviso" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progresso progresso-pericolo" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </div>

Barre rigate

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

  1. <div class = "progress progress-info progress-striped" >
  2. < classe div = stile "barra" = " larghezza : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success progress-striped" >
  5. <div class = "bar" style = " width : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div class = "bar" style = " width : 60 % " ></div>
  9. </div>
  10. <div class = "progress progresso-pericolo progresso-strisciato" >
  11. <div class = "bar" style = " width : 80 % " ></div>
  12. </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.

64x64

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

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

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.
  1. < classe div = "media" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "oggetto multimediale" data-src = "holder.js/64x64" >
  4. </a>
  5. < classe div = "corpo multimediale" >
  6. <h4 class = "intestazione multimediale" > Intestazione media </h4>
  7. ...
  8.  
  9. <!-- Oggetto multimediale nidificato -->
  10. < classe div = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Elenco dei media

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

  • 64x64

    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.

    64x64

    Intestazione multimediale nidificata

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

    Intestazione multimediale nidificata

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

    Intestazione multimediale nidificata

    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.
  • 64x64

    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.
  1. <ul class = "lista-media" >
  2. <li classe = "media" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "oggetto multimediale" data-src = "holder.js/64x64" >
  5. </a>
  6. < classe div = "corpo multimediale" >
  7. <h4 class = "intestazione multimediale" > Intestazione media </h4>
  8. ...
  9.  
  10. <!-- Oggetto multimediale nidificato -->
  11. < classe div = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

pozzi

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

Guarda, sono in un pozzo!
  1. < classe div = "bene" >
  2. ...
  3. </div>

Classi facoltative

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

Guarda, sono in un pozzo!
  1. <div class = "ben ben-grande" >
  2. ...
  3. </div>
Guarda, sono in un pozzo!
  1. <div class = "bene bene-piccolo" >
  2. ...
  3. </div>

Icona Chiudi

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

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

I dispositivi iOS richiedono un href="#"evento per i clic se preferisci utilizzare un'ancora.

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

  1. classe = "tira a sinistra"
  1. . tirare - sinistra {
  2. galleggiante : sinistra ;
  3. }

.tira a destra

Fai galleggiare un elemento a destra

  1. classe = "tira a destra"
  1. . tirare - a destra {
  2. galleggiante : a destra ;
  3. }

.muto

Cambia il colore di un elemento in#999

  1. classe = "disattivato"
  1. . silenziato {
  2. colore : #999;
  3. }

.clearfix

Cancella floatsu qualsiasi elemento

  1. classe = "clearfix"
  1. . clearfix {
  2. * zoom : 1 ;
  3. &: prima ,
  4. &: dopo {
  5. display : tabella ;
  6. contenuto : "" ;
  7. }
  8. &: dopo {
  9. chiaro : entrambi ;
  10. }
  11. }