Cumpunenti

Decine di cumpunenti riutilizzabili sò integrati in Bootstrap per furnisce navigazione, alerti, popovers, è assai di più.

Gruppi di buttone

Aduprate i gruppi di buttone per unisce parechji buttoni cum'è un cumpunente cumpostu. Custruite cù una seria di <a>o <button>elementi.

Best practices

Hè ricumandemu e seguenti linee guida per l'usu di gruppi di buttone è barre di strumenti:

  • Aduprate sempre u stessu elementu in un unicu gruppu di buttone, <a>o <button>.
  • Ùn mischjà buttuni di culori diffirenti in u stessu gruppu di buttone.
  • Aduprate l'icone in più o invece di u testu, ma assicuratevi di include u testu alt è titulu induve apprupriatu.

Gruppi di Buttons Related cù dropdowns (vede sottu) deve esse chjamati separatamente è includenu sempre un cursore dropdown per indicà u cumpurtamentu previstu.

Esempiu predeterminatu

Eccu cumu l'HTML cerca un gruppu di buttone standard custruitu cù i buttuni di tag d'ancora:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Esempiu di Toolbar

Unisce seti di <div class="btn-group">in un <div class="btn-toolbar">per cumpunenti più cumplessi.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Casella di spunta è sapori radio

I gruppi di buttone pò ancu funziunà cum'è radiu, induve solu un buttone pò esse attivu, o caselle di spunta, induve ogni numeru di buttoni pò esse attivu. Vede i documenti Javascript per quessa.

Pigliate u javascript »

Dropdowns in gruppi di buttone

A testa alta ! I buttoni cù menu dropdown devenu esse imballati individualmente in u so propiu per .btn-groupun .btn-toolbarrendering propiu.

Button dropdowns

Esempiu di marcatura

Simile à un gruppu di buttone, u nostru marcatu usa un marcatu di buttone regulare, ma cù una mansa di aghjunte per raffinà u stilu è sustene u plugin jQuery dropdown di Bootstrap.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Azzione
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "menu a discesa" >
  7. <!-- links menu a tendina -->
  8. </ul>
  9. </div>

Funziona cù tutte e dimensioni di buttone

I menu dropdown di i buttoni funzionanu in ogni dimensione. e vostre dimensioni di buttone à .btn-large, .btn-small, o .btn-mini.

Richiede javascript

I dropdown di i buttoni necessitanu u plugin Bootstrap dropdown per funziunà.

In certi casi, cum'è u telefuninu, i menu a tendina si estenderanu fora di a vista. Avete bisognu di risolve l'allineamentu manualmente o cù javascript persunalizata.


Dividete i menu a tendina di u buttone

Panoramica è esempii

Basendu nantu à i stili di u gruppu di buttone è u marcatu, pudemu creà facilmente un buttone split. I buttuni divisi presentanu una azione standard à manca è un toggle dropdown à a diritta cù ligami contextuali.

Taglie

Utilizà e classi di buttone extra .btn-mini, .btn-small, o .btn-largeper dimensionà.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "menu a tendina tira a destra" >
  4. <!-- links menu a tendina -->
  5. </ul>
  6. </div>

Esempiu di marcatura

Espandemu nantu à i menu dropdown di u buttone nurmale per furnisce una seconda azione di buttone chì opera cum'è un trigger dropdown separatu.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Azzione </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "menu a discesa" >
  7. <!-- links menu a tendina -->
  8. </ul>
  9. </div>

Menu a tendina

I menu a tendina ponu ancu esse attivati ​​da u fondu in sopra aghjunghjendu una sola classe à u parent immediatu di .dropdown-menu. Invertirà a direzzione di .caretu menu è riposizionarà u menù stessu per passà da u fondu in l'altu invece di l'altu in sopra.

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

paginazione multi-pagina

Quandu aduprà

Paginazione ultra simplista è minimamente stilata ispirata à Rdio, fantastica per app è risultati di ricerca. U grande bloccu hè difficiule di missu, facilmente scalabile, è furnisce grandi spazii di clic.

Ligami di pagine stateful

I ligami sò persunalizabili è funzionanu in parechje circustanze cù a classa ghjusta. .disabledper i ligami incliccabili è .activeper a pagina attuale.

Allineamentu flexible

Aghjunghjite una di duie classi opzionali per cambià l'alineazione di i ligami di paginazione: .pagination-centeredè .pagination-right.

Esempii

U cumpunente di paginazione predeterminatu hè flexible è travaglia in una quantità di variazioni.

Marcatura

Avvoltu in un <div>, a paginazione hè solu un <ul>.

  1. <div class = "paginazione" >
  2. <ul>
  3. <li><a href = "#" > Prec </a></li>
  4. <li class = "attivu" >
  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>

Pager Per ligami rapidi precedenti è prossimi

À propositu di pager

U cumpunente di pager hè un inseme di ligami per implementazioni di paginazione simplici cù marcatura ligera è ancu stili più ligeri. Hè grande per i siti simplici cum'è i blog o riviste.

Statu disattivatu opzionale

I ligami di pager utilizanu ancu a .disabledclassa generale da a paginazione.

Esempiu predeterminatu

Per automaticamente, u pager centra i ligami.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Precedente </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Avanti </a>
  7. </li>
  8. </ul>

Ligami allineati

In alternativa, pudete allineà ogni ligame à i lati:

  1. <ul class = "pager" >
  2. <li class = "previous" >
  3. <a href = "#" > Anzianu </a>
  4. </li>
  5. <li class = "next" >
  6. <a href = "#" > Più recente → </a>
  7. </li>
  8. </ul>
Etichette Marcatura
Default <span class="label">Default</span>
Successu <span class="label label-success">Success</span>
Attenzione <span class="label label-warning">Warning</span>
Impurtante <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inversu <span class="label label-inverse">Inverse</span>

À propositu

I badges sò cumpunenti chjuchi è simplici per affissà un indicatore o un conte di qualchì tipu. Sò cumunimenti truvati in i clienti di e-mail cum'è Mail.app o in l'applicazioni mobili per e notificazioni push.

Classi dispunibuli

Nome Esempiu Marcatura
Default 1 <span class="badge">1</span>
Successu 2 <span class="badge badge-success">2</span>
Attenzione 4 <span class="badge badge-warning">4</span>
Impurtante 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inversu 10 <span class="badge badge-inverse">10</span>

Unità eroe

Bootstrap furnisce un cumpunente ligeru è flessibile chjamatu unità di eroe per mostrà u cuntenutu in u vostru situ. Funziona bè nantu à i siti di marketing è di cuntenutu.

Marcatura

Imbulighjate u vostru cuntenutu divcum'è cusì:

  1. <div class = "unità di eroe" >
  2. <h1> Intestazione </h1>
  3. <p> Slogan </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Sapè ne di più
  7. </a>
  8. </p>
  9. </div>

Salute, mondu !

Questa hè una unità di eroe simplice, un cumpunente simplice in stile jumbotron per chjamà l'attenzione extra à u cuntenutu o l'infurmazioni presentati.

Sapè ne di più

Intestazione di a pagina

Una cunchiglia simplice per un h1spaziu adattatu è segmentà e sezioni di cuntenutu in una pagina. Pò aduprà l' elementu h1predeterminatu small, è ancu a maiò parte di l'altri cumpunenti (cù stili supplementari).

  1. <div class = "pagina-header" >
  2. <h1> Esempiu di l'intestazione di a pagina </h1>
  3. </div>

Miniature predefinite

Per automaticamente, e miniature di Bootstrap sò pensate per mostrà l'imaghjini ligati cù un marcatu minimu necessariu.

Altamente persunalizabile

Cù un pocu di marcatura extra, hè pussibule aghjunghje ogni tipu di cuntenutu HTML cum'è intestazioni, paragrafi, o buttoni in 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.

    Azzione Azzione

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

    Azzione Azzione

Perchè aduprà miniature

Miniature (precedentemente .media-gridfinu à a v1.4) sò grandi per griglie di foto o video, risultati di ricerca d'imaghjini, prudutti di vendita, portafogli, è assai di più. Puderanu esse ligami o cuntenutu staticu.

Marcatura simplice è flessibile

A marcatura in miniatura hè simplice - una ulcù qualsiasi quantità di lielementi hè tuttu ciò chì hè necessariu. Hè ancu super flessibile, chì permette ogni tipu di cuntenutu cù un pocu più marcatu per imballà u vostru cuntenutu.

Utiliza dimensioni di e colonne di griglia

Infine, u cumpunente di miniature utilizza classi di sistema di griglia esistenti - cum'è .span2o .span3- per u cuntrollu di dimensioni di miniatura.

U marcatu

Comu diciatu prima, a marcatura necessaria per e miniature hè ligera è diretta. Eccu un ochju à a cunfigurazione predeterminata per l'imaghjini ligati :

  1. <ul class = "miniature" >
  2. <li class = "span3" >
  3. <a href = "#" class = "miniatura" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Per u cuntenutu HTML persunalizatu in miniature, u marcatu cambia ligeramente. Per permettà u cuntenutu di u nivellu di bloccu in ogni locu, scambiemu <a>per un <div>cum'è cusì:

  1. <ul class = "miniature" >
  2. <li class = "span3" >
  3. <div class = "miniatura" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Etichetta miniatura </h5>
  6. <p> Didascalia in miniatura quì... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Più esempii

Esplora tutte e vostre opzioni cù e diverse classi di griglia dispunibili per voi. Pudete ancu mischjà è cunghjuntà diverse dimensioni.

Predefiniti leggeri

Classe di basa riscritta

Cù Bootstrap 2, avemu simplificatu a classa di basa: .alertinvece di .alert-message. Avemu ancu riduttu u marcatu minimu necessariu - ùn <p>hè micca necessariu per difettu, solu l'esterno <div>.

Un missaghju di alerta unicu

Per un cumpunente più durable cù menu codice, avemu sguassatu l'aspettu differenziatu per alerti di bloccu, missaghji chì venenu cù più padding è tipicamente più testu. A classe hè ancu cambiata in .alert-block.


Va bè cù javascript

Bootstrap vene cun un grande plugin jQuery chì supporta i missaghji d'alerta, facennu caccià elli rapidamente è faciule.

Pigliate u plugin »

Esempi di avvisi

Imbulighjate u vostru missaghju è un icona chjusu opzionale in un div cù classi simplici.

Attenzione ! U megliu verificate voi stessu, ùn site micca troppu bellu.
  1. <div class = "alerta" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Attenzione ! </strong> U megliu verificate voi stessu, ùn site micca troppu bellu.
  4. </div>

A testa alta ! I dispusitivi iOS necessitanu un href="#"licenziamentu di avvisi. Assicuratevi di includellu è l'attributu di dati per l'icone vicinu à l'ancora. In alternativa, pudete aduprà un <button>elementu cù l'attributu di dati, chì avemu sceltu di fà per i nostri documenti. Quandu si usa <button>, duvete include type="button"o i vostri formi ùn ponu micca sottumessi.

Estendete facilmente u messagiu d'alerta standard cù duie classi opzionali: .alert-blockper più padding è cuntrolli di testu è .alert-headingper un intestazione currispondente.

Attenzione !

U megliu verificate voi stessu, ùn site micca troppu bellu. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Attenzione ! </h4>
  4. U megliu verificate voi stessu, ùn site micca ...
  5. </div>

Alternative contestuale Aggiungi classi opzionali per cambià a connotazione di una alerta

Errore o periculu

Oh snap! Cambia uni pochi di cose è pruvate à mandà di novu.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Successu

Bè fatta! Avete lettu bè stu missaghju d'alerta impurtante.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

infurmazione

A testa alta ! Questa alerta hà bisognu di a vostra attenzione, ma ùn hè micca super impurtante.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Esempii è marcatura

Basic

Barra di prugressu predeterminata cù un gradiente verticale.

  1. <div class = "progressu" >
  2. <div class = "bar"
  3. stile = " larghezza : 60 %; " ></div>
  4. </div>

Striped

Utiliza un gradiente per creà un effettu strisciatu (senza IE).

  1. <div class = "progressu à strisce di prugressu" >
  2. <div class = "bar"
  3. stile = " larghezza : 20 %; " ></div>
  4. </div>

Animatu

Piglia l'esempiu di strisce è l'anima (senza IE).

  1. <div class = "progressu à strisce di prugressu
  2. attivu " >
  3. <div class = "bar"
  4. stile = " larghezza : 40 %; " ></div>
  5. </div>

Opzioni è supportu di navigatore

Culori supplementari

E barre di prugressu utilizanu alcuni di u listessu buttone è classi d'alerta per stili coherenti.

Barre à strisce

Simile à i culori solidi, avemu variu barre di prugressu strisce.

Cumportamentu

I bars di prugressu utilizanu transizioni CSS3, cusì se aghjustate dinamicamente a larghezza via javascript, si ridimensionarà facilmente.

Se aduprate a .activeclassa, i vostri .progress-stripedbars di prugressu animaranu e strisce da manca à diritta.

Supportu di u navigatore

E barre di prugressu utilizanu gradienti CSS3, transizioni è animazioni per ottene tutti i so effetti. Queste funzioni ùn sò micca supportate in IE7-9 o versioni più vechje di Firefox.

Opera è IE ùn sustene micca l'animazioni in questu mumentu.

Wells

Aduprate u pozzu cum'è un effettu simplice nantu à un elementu per dà un effettu inseritu.

Fighjate, sò in un pozzu !
  1. <div class = "bene" >
  2. ...
  3. </div>

Chiudi icona

Aduprate l'icona di chiudi generica per rinfriscà u cuntenutu cum'è modali è alerti.

  1. <button class = "close" > × </button>

I dispositi iOS necessitanu un href="#" per l'avvenimenti di clic, se preferite aduprà un ancora.

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