Componenti

Decine di componenti riutilizzabili sono integrati in Bootstrap per fornire navigazione, avvisi, popover e molto altro.

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:

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

Esempio di barra degli strumenti

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>

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.

Menu a discesa dei pulsanti

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.

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


Menu a discesa dei pulsanti di divisione

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.

  1. < classe div = "gruppo btn" >
  2. ...
  3. <ul class = "menu a discesa pull-right" >
  4. <!-- collegamenti al menu a discesa -->
  5. </ul>
  6. </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.

  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>

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 multipagina

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

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

Cercapersone Per collegamenti rapidi precedenti e successivi

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.

  1. <ul class = "cercapersone" >
  2. <li>
  3. <a href = "#" > Precedente </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Avanti </a>
  7. </li>
  8. </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>
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>

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

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>

Unità Eroe

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:

  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>

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ù

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

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

  1. <ul class = "miniature" >
  2. <li classe = "span3" >
  3. <a href = "#" class = "miniatura" >
  4. <img src = "https://placehold.it/260x180" 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 = "span3" >
  3. < classe div = "miniatura" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Etichetta miniatura </h5>
  6. <p> Didascalia della miniatura proprio qui... </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.

Predefiniti leggeri

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.

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

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. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "intestazione di avviso" > 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 = "barra"
  3. style = " larghezza : 60 %; " ></div>
  4. </div>

A strisce

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

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

Animato

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

  1. <div class = "avanzamento a strisce
  2. attivo" >
  3. < classe div = "barra"
  4. style = " larghezza : 40 %; " ></div>
  5. </div>

Opzioni e supporto del browser

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.

Guarda, sono in un pozzo!
  1. < classe div = "bene" >
  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="#" per gli eventi di clic se preferisci utilizzare un'ancora.

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