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:

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

Esempiu di Toolbar

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

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

Panoramica è esempii

Aduprate qualsiasi buttone per attivà un menu a tendina mettendulu in un .btn-groupè furnisce u marcatu di menu propiu.

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.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Azzione
    <span class = "caret" ></span> 
  </a>
  <ul class = "menu a discesa" > 
    <!-- links menu a tendina -->
  </ul>
</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.

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

<div class = "btn-group" > 
  ...
  <ul class = "menu a tendina tira a destra" > 
    <!-- links menu a tendina -->
  </ul>
</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.

<div class = "btn-group" > 
  <button class = "btn" > Azzione </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menu a discesa" > 
    <!-- links menu a tendina -->
  </ul>
</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.

<div class = " dropup di btn-group" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menu a discesa" > 
    <!-- links menu a tendina -->
  </ul>
</div>

Classe di basa putente

Tutti i cumpunenti di navigazione quì-tabulazioni, pillole è listi- sparte u listessu marcatu di basa è stili attraversu a .navclasse.

Quandu aduprà

Tabs è pills sò fantastichi per seccione di cuntenutu o navigà trà e pagine di cuntenutu rilativi.

Allineamentu di cumpunenti

Per allineà i ligami di navigazione, aduprate .pull-lefto .pull-rightclassi di utilità. E duie classi aghjunghjenu un float CSS in a direzzione specifica.

Tabs basi

Pigliate un regulare <ul>di ligami è aghjunghje .nav-tabs:

• A casa
• Prufilu
• Missaghji

<ul class = "nav nav-tabs" > 
  <li class = "attivu" > 
    <a href = "#" > Casa </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pills basi

Pigliate u listessu HTML, ma utilizate .nav-pillsinvece:

• A casa
• Prufilu
• Missaghji

<ul class = "nav nav-pills" > 
  <li class = "attivu" > 
    <a href = "#" > Casa </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Cumu impiccà li

Siccomu i tabulazioni è i pills sò orizontali per difettu, aghjunghje solu una seconda classa, .nav-stacked, per fà apparisce verticalmente stacked.

Tabulature impilate

• A casa
• Prufilu
• Missaghji

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

Pilule impilate

• A casa
• Prufilu
• Missaghji

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

Menu ricchi resi facili

I menu dropdown in tabulazioni Bootstrap è pillole sò super faciuli è necessitanu solu un pocu HTML extra è un plugin jQuery ligeru.

Andate à a pagina Javascript per leghje i documenti nantu à l' inizializazione di dropdowns in Bootstrap.

Tabulazioni cù menu a tendina

• A casa
• Aiutu
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "menu a discesa" > 
      <!-- ligami -->
    </ul>
  </li>
</ul>

Pills cù dropdowns

• A casa
• Aiutu
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "menu a discesa" > 
      <!-- ligami -->
    </ul>
  </li>
</ul>

Navigazione in stile di l'applicazione

Listi di navigazione furnisce un modu simplice è faciule per custruisce gruppi di ligami di navigazione cù intestazioni opzionali. Sò megliu utilizati in sidebars cum'è u Finder in OS X.

Strutturalmente, sò custruiti nantu à i stessi stili di navigazione core cum'è tabulazioni è pillole, cusì l'usu è a persunalizazione sò simplici.

Cù icone

I listi di navigazione sò ancu facili da equipà cù icone. Aghjunghjite l'etichetta propria <i>cù a classa è avete stabilitu.

Divisori orizontali

Aghjunghjite un divisore horizontale creendu un articulu di lista viotu cù a classa .divider, cum'è cusì:

<ul class = "nav nav-list" > 
  ...
  <li class = "divider" ></li> 
  ...
</ul>

Esempiu di lista di navigazione

Pigliate una lista di ligami è aghjunghje class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    L'intestazione di a lista
  </li>
  <li class = "attivu" > 
    <a href = "#" > Casa </a> 
  </li>
  <li>
    <a href = "#" > Biblioteca </a> 
  </li>
  ...
</ul>

Esempiu cù icone

U stessu esempiu, ma cù <i>tag per l'icone.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Biblioteca
    </a>
  </li>
  ...
</ul>

Ciò chì hè inclusu

Fate vita à e vostre tabulazioni cù un plugin simplice per bascà trà u cuntenutu via tabulazioni. Bootstrap integra tabulazioni tabulabili in quattru stili: cima (predeterminata), right, bottom, and left.

Cambià trà elli hè faciule è solu bisognu di cambià assai pocu marcatu.

Fade in tabulazioni

Per fà chì e tabulazioni svaniscenu, aghjunghje .fadeà ognunu .tab-pane.

Richiede un plugin jQuery

Tutte e tabulazioni di tabulazione sò alimentate da u nostru plugin jQuery ligeru. Leghjite più nantu à cumu dà vita à e tabulazioni di tabulazione nantu à a pagina di documenti di javascript .

Get u javascript →

Esempiu di tabulazione

Per fà e tabulazioni tabulabili, creanu un .tab-paneID unicu per ogni tabulazione è imbulighjate in .tab-content.

Per tabulazioni allineate à destra o à manca, avvolge u .nav-tabse .tab-contentin .tabbable.

Marcatura diretta

L'usu di tabulazioni di tabulazione richiede un div wrapping, un settore di tabulazioni è un settore di pannelli tabulabili di cuntenutu.

<div class = "tabbable" > <!-- Necessaria solu per e tabulazioni di sinistra/destra -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Sezione 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Sezione 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane attivu" id = "tab1" >  
      <p> Sò in a Sezione 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Salute, sò in a Sezione 2. </p>
    </div>
  </div>
</div>

Tabs nantu à u fondu

Flip l'ordine di l'HTML è aghjunghje una classa per mette tabulazioni in u fondu.

<div class = "tabulazioni tabulabili-sotto" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Tabs à a manca

Scambià a classe per mette tabulazioni à a manca.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Tabs à a diritta

Scambià a classe per mette tabulazioni à a diritta.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Navbar scaffolding

A navbar richiede solu uni pochi divs per strutturallu bè per a visualizazione statica o fissa.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

Navbar fissu

Fix a navbar à a cima o in fondu di u viewport cù una classa supplementu nantu à u div più esterno, .navbar.

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

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

Quandu appiccicate a barra di navigazione, ricordate di cuntà l'area nascosta sottu. Aghjunghjite 40px o più di padding à u <body>. Assicuratevi di aghjunghje questu dopu à u core Bootstrap CSS è prima di u CSS responsive optional.

Nome di marca

Un ligame simplice per mostrà a vostra marca o u nome di u prugettu richiede solu un tag d'ancora.

<a class = "marca" href = "#" >  
  Nome di u prugettu
</a>

Forme in navbar

Per stilà bè è pusà una forma in a barra di navigazione, aghjunghje e classi appropritate cum'è mostra quì sottu. Per una forma predeterminata, include .navbar-formè o .pull-lefto .pull-rightper allineà bè.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</form>

Per una forma di ricerca più persunalizata, aghjunghje .navbar-searchà l' forme .search-queryà l'input per stili specializati in a barra di navigazione.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Ricerca" >   
</form>

Variazione reattiva opzionale

Sicondu a quantità di cuntenutu in u vostru topbar, pudete vulete implementà l'opzioni rispunsevuli. Per fà cusì, imbulighjate u vostru cuntenutu nav in un div chì cuntene .nav-collapse.collapse, è aghjunghje u buttone di toggle navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar hè utilizatu cum'è basculante per u cuntenutu di navbar colapsatu -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Assicuratevi di lascià a marca fora, se vulete vede -->
      <a class = "brand" href = "#" > Nome di u prughjettu </a>  
 
      <!-- Tuttu ciò chì vulete ammucciatu à 940px o menu, postu quì -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, ecc -->
      </div>
 
    </div>
  </div>
</div>

Ligami di navigazione

L'articuli di navigazione sò simplici per aghjunghje via listi senza ordine.

<ul class = "nav" > 
  <li class = "attivu" > 
    <a href = "#" > Casa </a> 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

Pudete facilmente aghjunghje divisori à i vostri ligami di navigazione cun un articulu di lista viotu è una classa simplice. Basta aghjunghje questu trà i ligami:

<ul class = "nav" > 
  ...
  <li class = "divisore-verticale" ></li> 
  ...
</ul>

Allineamentu di cumpunenti

Per allineà un navigatore, una forma di ricerca o un testu, aduprate e classi .pull-leftdi .pull-rightutilità. E duie classi aghjunghjenu un float CSS in a direzzione specifica.

Aggiunta di menu a tendina

L'aghjunghje dropdowns è dropups à u navigatore hè super simplice, ma richiede l'usu di u nostru plugin javascript .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          class = "dropdown-toggle"
          data-toggle = "dropdown" >
          contu
          <b class = "caret" ></b> 
    </a>
    <ul class = "menu a discesa" > 
      ...
    </ul>
  </li>
</ul>

Get u javascript →

Testu in a barra di navigazione

Imbulighjate e stringhe di testu in un <.navbar-text>, di solitu nantu à un <p>tag per u culore è u culore propiu.

Perchè aduprà

A navigazione di breadcrumb hè aduprata cum'è un modu per vede l'utilizatori induve si trovanu in una app o un situ, ma micca per a navigazione primaria. Mantene u so usu sparse è succinct per esse più efficace.

Esempii

Un unicu esempiu mostratu cumu pò esse affissatu in parechje pagine.

• A casa

• Home /
• Biblioteca

• Home /
• biblioteca /
• Dati

Marcatura

HTML hè a vostra lista standard senza ordine cù ligami.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Home </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Biblioteca </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Dati </li> 
</ul>

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

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

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

• Previous
• Dopu

<ul class = "pager" > 
  <li>
    <a href = "#" > Precedente </a> 
  </li>
  <li>
    <a href = "#" > Avanti </a> 
  </li>
</ul>

Ligami allineati

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

• ← Anzianu
• Novu →

<ul class = "pager" > 
  <li class = "previous" > 
    <a href = "#" > ← Anzianu </a> 
  </li>
  <li class = "next" > 
    <a href = "#" > Più recente → </a> 
  </li>
</ul>

À 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

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

<div class = "unità di eroe" > 
  <h1> Intestazione </h1>
  <p> Slogan </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Sapè ne di più
    </a>
  </p>
</div>

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

<div class = "pagina-header" > 
  <h1> Esempiu di l'intestazione di a pagina </h1>
</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 :

<ul class = "miniature" > 
  <li class = "span3" > 
    <a href = "#" class = "miniatura" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</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ì:

<ul class = "miniature" > 
  <li class = "span3" > 
    <div class = "miniatura" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Etichetta miniatura </h5>
      <p> Didascalia in miniatura quì... </p>
    </div>
  </li>
  ...
</ul>

Più esempii

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

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.

<div class = "alerta" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> Attenzione ! </strong> U megliu verificate voi stessu, ùn site micca troppu bellu.
</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.

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

Errore o periculu

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

Successu

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

infurmazione

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

Basic

Barra di prugressu predeterminata cù un gradiente verticale.

<div class = "progressu" > 
  <div class = "bar" 
       stile = " larghezza : 60 %; " ></div> 
</div>

Striped

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

<div class = "progressu à strisce di prugressu" > 
  <div class = "bar" 
       stile = " larghezza : 20 %; " ></div> 
</div>

Animatu

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

<div class = "progressu à strisce di prugressu 
     attivu " >
  <div class = "bar" 
       stile = " larghezza : 40 %; " ></div> 
</div>

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.

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

Chiudi icona

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

×

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

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

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