Grups de botons

Utilitzeu grups de botons per unir diversos botons com un component compost. Construeix-los amb una sèrie de <a>o <button>elements.

Millors pràctiques

Us recomanem les directrius següents per utilitzar grups de botons i barres d'eines:

• Feu servir sempre el mateix element en un sol grup de botons, <a>o <button>.
• No barregeu botons de diferents colors al mateix grup de botons.
• Utilitzeu icones a més o en comptes del text, però assegureu-vos d'incloure el text alternatiu i del títol si escau.

Els grups de botons relacionats amb menús desplegables (vegeu més avall) s'han de cridar per separat i sempre inclouen un signe de cursor desplegable per indicar el comportament previst.

Exemple per defecte

A continuació es mostra com es veu l'HTML per a un grup de botons estàndard creat amb botons d'etiquetes d'ancoratge:

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

Exemple de barra d'eines

Combina conjunts de <div class="btn-group">en un <div class="btn-toolbar">per a components més complexos.

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Cases de selecció i sabors de ràdio

Els grups de botons també poden funcionar com a ràdios, on només un botó pot estar actiu, o caselles de selecció, on qualsevol nombre de botons poden estar actius. Consulteu els documents de Javascript per a això.

Obteniu el javascript »

Menú desplegable en grups de botons

Caps amunt! Els botons amb menús desplegables s'han d'embolicar individualment .btn-groupdins d'un .btn-toolbarper a una representació adequada.

Visió general i exemples

Utilitzeu qualsevol botó per activar un menú desplegable col·locant-lo dins d'un .btn-groupi proporcionant el marcatge de menú adequat.

Exemple de marcatge

De manera semblant a un grup de botons, el nostre marcatge utilitza el marcatge de botons normal, però amb un grapat d'addicions per refinar l'estil i donar suport al complement jQuery desplegable de Bootstrap.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Acció
    <span class = "caret" ></span> 
  </a>
  <ul class = "menú desplegable" > 
    <!-- enllaços del menú desplegable -->
  </ul>
</div>

Funciona amb totes les mides de botons

Els menús desplegables de botons funcionen a qualsevol mida. les mides dels botons .btn-largesón , .btn-small, o .btn-mini.

Requereix javascript

Els menús desplegables de botons requereixen que funcioni el connector desplegable Bootstrap .

En alguns casos, com ara el mòbil, els menús desplegables s'estenen fora de la finestra gràfica. Heu de resoldre l'alineació manualment o amb javascript personalitzat.

Visió general i exemples

Basant-nos en els estils i el marcatge del grup de botons, podem crear fàcilment un botó dividit. Els botons de divisió inclouen una acció estàndard a l'esquerra i un commutador desplegable a la dreta amb enllaços contextuals.

Mides

Utilitzeu les classes .btn-minide botons addicionals .btn-small, o .btn-largeper a la mida.

<div class = "btn-group" > 
  ...
  <ul class = "menú desplegable a la dreta" > 
    <!-- enllaços del menú desplegable -->
  </ul>
</div>

Exemple de marcatge

Ampliem els menús desplegables de botons normals per proporcionar una segona acció de botó que funciona com a activador de menú desplegable independent.

<div class = "btn-group" > 
  <button class = "btn" > Acció </button> 
  <button class = "btn dropdown-toggle" data-toggle = "menjador desplegable" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menú desplegable" > 
    <!-- enllaços del menú desplegable -->
  </ul>
</div>

Menús desplegables

Els menús desplegables també es poden canviar de baix a dalt afegint una sola classe al pare immediat de .dropdown-menu. Girarà la direcció del .caretmenú i reposicionarà el propi menú per moure's de baix a dalt en lloc de de dalt a baix.

<div class = "abandonament del grup btn" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "menjador desplegable" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menú desplegable" > 
    <!-- enllaços del menú desplegable -->
  </ul>
</div>

Classe base potent

Tots els components de navegació aquí (pestanyes, píndoles i llistes) comparteixen el mateix marcatge i estils bàsics a través de la .navclasse.

Quan s'ha d'utilitzar

Les pestanyes i les píndoles són ideals per a seccions de contingut o per navegar entre pàgines de contingut relacionat.

Alineació de components

Per alinear els enllaços de navegació, utilitzeu les classes d'utilitat .pull-lefto . .pull-rightAmbdues classes afegiran un CSS flotant en la direcció especificada.

Pestanyes bàsiques

Preneu un regular <ul>d'enllaços i afegiu .nav-tabs:

• Casa
• Perfil
• Missatges

<ul class = "nav nav-tabs" > 
  <li class = "actiu" > 
    <a href = "#" > Inici </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pastilles bàsiques

Agafeu el mateix HTML, però feu servir .nav-pills:

• Casa
• Perfil
• Missatges

<ul class = "nav nav-pills" > 
  <li class = "actiu" > 
    <a href = "#" > Inici </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Com apilar-los

Com que les pestanyes i les píndoles són horitzontals per defecte, només cal que afegiu una segona classe, .nav-stacked, perquè apareguin apilades verticalment.

Pestanyes apilades

• Casa
• Perfil
• Missatges

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

Píndoles apilades

• Casa
• Perfil
• Missatges

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

Menús rics fàcils

Els menús desplegables de les pestanyes i píndoles d'Bootstrap són molt fàcils i només requereixen una mica d'HTML addicional i un connector jQuery lleuger.

Dirigiu-vos a la pàgina de Javascript per llegir els documents sobre la inicialització de menús desplegables a Bootstrap.

Pestanyes amb desplegables

• Casa
• Ajuda
• Menú desplegable
  • Acció
  • Una altra acció
  • Alguna cosa més aquí
  • Enllaç separat

<ul class = "nav nav-tabs" > 
  <li class = "menú desplegable" > 
    <a class = "canvi desplegable" 
       data-toggle = "menú desplegable"
       href = "#" >
        Menú desplegable
        <b class = "caret" ></b> 
      </a>
    <ul class = "menú desplegable" > 
      <!-- enllaços -->
    </ul>
  </li>
</ul>

Píndoles amb desplegables

• Casa
• Ajuda
• Menú desplegable
  • Acció
  • Una altra acció
  • Alguna cosa més aquí
  • Enllaç separat

<ul class = "nav nav-pills" > 
  <li class = "menú desplegable" > 
    <a class = "canvi desplegable" 
       data-toggle = "menú desplegable"
       href = "#" >
        Menú desplegable
        <b class = "caret" ></b> 
      </a>
    <ul class = "menú desplegable" > 
      <!-- enllaços -->
    </ul>
  </li>
</ul>

Navegació a l'estil d'aplicació

Les llistes de navegació ofereixen una manera senzilla i senzilla de crear grups d'enllaços de navegació amb capçaleres opcionals. S'utilitzen millor en barres laterals com el Finder a OS X.

Estructuralment, es basen en els mateixos estils de navegació bàsics que les pestanyes i les píndoles, de manera que l'ús i la personalització són senzills.

Amb icones

Les llistes de navegació també són fàcils d'equipar amb icones. Afegeix l'etiqueta adequada <i>amb la classe i ja està.

Divisors horitzontals

Afegiu un divisor horitzontal creant un element de llista buit amb la classe .divider, així:

<ul class = "llista de navegació de navegació" > 
  ...
  <li class = "divisor" ></li> 
  ...
</ul>

Exemple de llista de navegació

Agafeu una llista d'enllaços i afegiu-hi class="nav nav-list":

<ul class = "llista de navegació de navegació" > 
  <li class = "nav-header" > 
    Capçalera de la llista
  </li>
  <li class = "actiu" > 
    <a href = "#" > Inici </a> 
  </li>
  <li>
    <a href = "#" > Biblioteca </a> 
  </li>
  ...
</ul>

Exemple amb icones

El mateix exemple, però amb <i>etiquetes per a les icones.

<ul class = "llista de navegació de navegació" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "llibre d'icones" ></i> 
      Biblioteca
    </a>
  </li>
  ...
</ul>

Què inclou

Doneu vida a les vostres pestanyes amb un connector senzill per canviar entre contingut mitjançant pestanyes. Bootstrap integra pestanyes amb pestanyes en quatre estils: superior (predeterminat), dreta, inferior i esquerra.

Canviar entre ells és fàcil i només requereix canviar molt poc l'etiquetatge.

Esvaeix a les pestanyes

Per fer que les pestanyes s'esvaeixin, afegiu .fade-les a cadascuna .tab-pane.

Requereix el connector jQuery

Totes les pestanyes amb pestanyes funcionen amb el nostre complement lleuger jQuery. Llegiu més sobre com donar vida a les pestanyes amb pestanyes a la pàgina de documents de javascript .

Obteniu el javascript →

Exemple de tabulació

Per fer que les pestanyes siguin tabulables, creeu un .tab-paneidentificador únic per a cada pestanya i emboliqueu-les en .tab-content.

Per a les pestanyes alineades a la dreta o a l'esquerra, embolcalla .nav-tabsi .tab-contenten .tabbable.

Marcatge senzill

L'ús de pestanyes amb pestanyes requereix un div d'embolcall, un conjunt de pestanyes i un conjunt de panells de contingut amb pestanyes.

<div class = "tabbable" > <!-- Només cal per a pestanyes esquerra/dreta -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Secció 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Secció 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pae active" id = "tab1" >  
      <p> Estic a la Secció 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Bon dia, estic a la secció 2. </p>
    </div>
  </div>
</div>

Pestanyes a la part inferior

Inverteix l'ordre de l'HTML i afegeix una classe per posar pestanyes a la part inferior.

<div class = "pestanyes de tabulació a sota" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Pestanyes a l'esquerra

Canvia la classe per posar pestanyes a l'esquerra.

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

Pestanyes a la dreta

Canvia la classe per posar pestanyes a la dreta.

<div class = "pestanyes de tabulació a la dreta" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Bastida Navbar

La barra de navegació només requereix uns quants divs per estructurar-la bé per a una visualització estàtica o fixa.

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

Barra de navegació fixa

Fixeu la barra de navegació a la part superior o inferior de la finestra gràfica amb una classe addicional al div més extern, .navbar.

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

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

Quan col·loqueu la barra de navegació, recordeu tenir en compte l'àrea oculta que hi ha a sota. Afegiu 40 píxels o més de farciment al fitxer <body>. Assegureu-vos d'afegir-ho després del CSS Bootstrap bàsic i abans del CSS responsiu opcional.

Nom de la marca

Un enllaç senzill per mostrar el nom de la vostra marca o projecte només requereix una etiqueta d'ancoratge.

<a class = "marca" href = "#" >  
  Nom del projecte
</a>

Formularis a la barra de navegació

Per dissenyar i col·locar correctament un formulari dins de la barra de navegació, afegiu les classes adequades com es mostra a continuació. Per a un formulari predeterminat, incloeu .navbar-formi o .pull-leftbé .pull-rightper alinear-lo correctament.

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

Per obtenir un formulari de cerca més personalitzat, afegiu .navbar-search- hi formi .search-querya l'entrada d'estils especialitzats a la barra de navegació.

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

Variació de resposta opcional

Depenent de la quantitat de contingut de la barra superior, és possible que vulgueu implementar les opcions de resposta. Per fer-ho, emboliqueu el vostre contingut de navegació en un div que conté .nav-collapse.collapse, i afegiu el botó de commutació de la barra de navegació, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "contenidor" > 
 
      <!-- .btn-navbar s'utilitza com a commutació per al contingut de la barra de navegació replegada -->
      <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>
 
      <!-- Assegureu-vos de deixar la marca allà fora si voleu que es mostri -->
      <a class = "brand" href = "#" > Nom del projecte </a>  
 
      <!-- Tot el que vulgueu amagar a 940 píxels o menys, col·loqueu-lo aquí -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc. -->
      </div>
 
    </div>
  </div>
</div>

Enllaços de navegació

Els elements de navegació són senzills d'afegir mitjançant llistes no ordenades.

<ul class = "nav" > 
  <li class = "actiu" > 
    <a href = "#" > Inici </a> 
  </li>
  <li><a href = "#" > Enllaç </a></li> 
  <li><a href = "#" > Enllaç </a></li> 
</ul>

Podeu afegir fàcilment divisors als vostres enllaços de navegació amb un element de llista buit i una classe senzilla. Només cal afegir això entre enllaços:

<ul class = "nav" > 
  ...
  <li class = "divisor-vertical" ></li> 
  ...
</ul>

Alineació de components

Per alinear un navegador, un formulari de cerca o un text, utilitzeu les classes d'utilitat .pull-lefto . .pull-rightAmbdues classes afegiran un CSS flotant en la direcció especificada.

Afegint menús desplegables

Afegir menús desplegables i desplegables al navegador és molt senzill, però requereix l'ús del nostre connector de javascript .

<ul class = "nav" > 
  <li class = "menú desplegable" > 
    <a href = "#" 
          class = "canvi desplegable"
          data-toggle = "menú desplegable" >
          Compte
          <b class = "caret" ></b> 
    </a>
    <ul class = "menú desplegable" > 
      ...
    </ul>
  </li>
</ul>

Obteniu el javascript →

Text a la barra de navegació

Emboliqui les cadenes de text amb un <.navbar-text>, normalment en una <p>etiqueta per a l'interlineat i el color adequats.

Per què utilitzar-los

La navegació amb ruta de navegació s'utilitza com una manera de mostrar als usuaris on es troben dins d'una aplicació o d'un lloc, però no per a la navegació principal. Mantingueu el seu ús escàs i concis perquè sigui més efectiu.

Exemples

Es mostra un únic exemple, ja que es pot mostrar en diverses pàgines.

• Casa

• Inici /
• Biblioteca

• Inici /
• Biblioteca /
• Dades

Marcatge

HTML és la vostra llista estàndard no ordenada amb enllaços.

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

Quan s'ha d'utilitzar

Paginació ultra simplista i d'estil mínim inspirada en Rdio, ideal per a aplicacions i resultats de cerca. El bloc gran és difícil de perdre, fàcilment escalable i ofereix grans àrees de clic.

Enllaços de pàgines amb estat

Els enllaços es poden personalitzar i funcionen en diverses circumstàncies amb la classe adequada. .disabledper als enllaços que no es poden fer clic i .activeper a la pàgina actual.

Alineació flexible

Afegiu qualsevol de les dues classes opcionals per canviar l'alineació dels enllaços de paginació: .pagination-centeredi .pagination-right.

Exemples

El component de paginació predeterminat és flexible i funciona en diverses variacions.

Marcatge

Embolicat en un <div>, la paginació és només un <ul>.

<div class = "paginació" > 
  <ul>
    <li><a href = "#" > Anterior </a></li> 
    <li class = "actiu" > 
      <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 = "#" > Següent </a></li> 
  </ul>
</div>

Sobre el cercapersones

El component paginador és un conjunt d'enllaços per a implementacions de paginació senzilles amb marques lleugeres i estils encara més lleugers. És ideal per a llocs senzills com blocs o revistes.

Estat desactivat opcional

Els enllaços de cercapersones també utilitzen la .disabledclasse general de la paginació.

Exemple per defecte

Per defecte, el cercapersones centra els enllaços.

• Anterior
• Pròxim

<ul class = "paper" > 
  <li>
    <a href = "#" > Anterior </a> 
  </li>
  <li>
    <a href = "#" > Següent </a> 
  </li>
</ul>

Enllaços alineats

Alternativament, podeu alinear cada enllaç als costats:

• ← Més vell
• Més nou →

<ul class = "paper" > 
  <li class = "anterior" > 
    <a href = "#" > ← Més vell </a> 
  </li>
  <li class = "següent" > 
    <a href = "#" > Més recent → </a> 
  </li>
</ul>

Sobre

Les insígnies són components petits i senzills per mostrar un indicador o un recompte d'algun tipus. Es troben habitualment en clients de correu electrònic com Mail.app o en aplicacions mòbils per a notificacions push.

Classes disponibles

Bootstrap proporciona un component lleuger i flexible anomenat unitat d'heroi per mostrar el contingut del vostre lloc. Funciona bé en llocs de màrqueting i amb contingut pesat.

Marcatge

Embolcalleu el vostre contingut en una divmanera com:

<div class = "unitat d'heroi" > 
  <h1> Encapçalament </h1>
  <p> Lema </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Aprèn més
    </a>
  </p>
</div>

Una intèrpret d'ordres senzilla per h1espaiar i segmentar adequadament les seccions de contingut d'una pàgina. Pot utilitzar l' element h1per defecte smallde ', així com la majoria dels altres components (amb estils addicionals).

<div class = "capçalera de pàgina" > 
  <h1> Exemple de capçalera de la pàgina </h1>
</div>

Miniatures predeterminades

De manera predeterminada, les miniatures de Bootstrap estan dissenyades per mostrar imatges enllaçades amb un marcatge mínim necessari.

Altament personalitzable

Amb una mica de marcatge addicional, és possible afegir qualsevol tipus de contingut HTML com encapçalaments, paràgrafs o botons a les miniatures.

• 

  Etiqueta en miniatura

  Cras justo odio, dapibus ac facilitis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Acció Acció

• 

  Etiqueta en miniatura

  Cras justo odio, dapibus ac facilitis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Acció Acció

Per què utilitzar miniatures

Les miniatures (anteriorment .media-gridfins a la v1.4) són ideals per a quadrícules de fotos o vídeos, resultats de cerca d'imatges, productes minoristes, carteres i molt més. Poden ser enllaços o contingut estàtic.

Marcat senzill i flexible

L'etiquetatge de miniatures és senzill: tot el que es requereix ulamb qualsevol nombre d' elements. liTambé és molt flexible, permetent qualsevol tipus de contingut amb només una mica més de marcatge per embolicar el vostre contingut.

Utilitza mides de columna de quadrícula

Finalment, el component de miniatures utilitza classes de sistema de quadrícula existents, com ara .span2o .span3, per controlar les dimensions de les miniatures.

El marcatge

Com s'ha esmentat anteriorment, el marcatge necessari per a les miniatures és lleuger i senzill. Aquí teniu una ullada a la configuració predeterminada per a les imatges enllaçades :

<ul class = "miniatures" > 
  <li class = "span3" > 
    <a href = "#" class = "miniatura" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Per al contingut HTML personalitzat a les miniatures, l'etiquetatge canvia lleugerament. Per permetre el contingut de nivell de bloc a qualsevol lloc, canviem <a>per un <div>com:

<ul class = "miniatures" > 
  <li class = "span3" > 
    <div class = "miniatura" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Etiqueta de miniatura </h5>
      <p> Subtítol de miniatura aquí mateix... </p>
    </div>
  </li>
  ...
</ul>

Més exemples

Exploreu totes les vostres opcions amb les diferents classes de graella disponibles per a vosaltres. També podeu combinar i combinar diferents mides.

Classe base reescrita

Amb Bootstrap 2, hem simplificat la classe base: .alerten lloc de .alert-message. També hem reduït l'etiquetatge mínim obligatori: no <p>és necessari per defecte, només l'exterior <div>.

Missatge d'alerta únic

Per a un component més durador amb menys codi, hem eliminat l'aspecte diferenciador de les alertes de bloqueig, missatges que inclouen més farciment i normalment més text. La classe també ha canviat a .alert-block.

Va molt bé amb javascript

Bootstrap inclou un gran connector de jQuery que admet missatges d'alerta, de manera que descartar-los és ràpid i fàcil.

Obteniu el connector »

Alertes d'exemple

Embolica el teu missatge i una icona de tanca opcional en un div amb classe senzilla.

<div class = "alerta" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> Avís! </strong> Millor comproveu-vos, no teniu massa bona pinta.
</div>

Caps amunt! Els dispositius iOS requereixen un href="#"per a l'eliminació d'alertes. Assegureu-vos d'incloure'l i l'atribut de dades per a les icones de tancament d'àncora. Alternativament, podeu utilitzar un <button>element amb l'atribut de dades, que hem optat per fer per als nostres documents. Quan utilitzeu <button>, heu d'incloure type="button"o els vostres formularis no s'envien.

Amplieu fàcilment el missatge d'alerta estàndard amb dues classes opcionals: .alert-blockper a més controls de farciment i text i .alert-headingper a un encapçalament coincident.

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Avís! </h4> 
  Millor comproveu-vos, no sou...
</div>

Error o perill

<div class = "alerta d'alerta-error" > 
  ...
</div>

Èxit

<div class = "alerta d'alerta-èxit" > 
  ...
</div>

Informació

<div class = "informació d'alerta d'alerta" > 
  ...
</div>

Bàsic

Barra de progrés predeterminada amb un degradat vertical.

<div class = "progrés" > 
  <div class = "bar" 
       estil = " amplada : 60 %; " ></div> 
</div>

A ratlles

Utilitza un degradat per crear un efecte ratllat (sense IE).

<div class = "progress progress-striped" > 
  <div class = "bar" 
       estil = " amplada : 20 %; " ></div> 
</div>

Animat

Pren l'exemple amb ratlles i l'anima (sense IE).

<div class = "progrés amb franges de progrés 
     actiu" >
  <div class = "bar" 
       estil = " amplada : 40 %; " ></div> 
</div>

Colors addicionals

Les barres de progrés utilitzen alguns dels mateixos botons i classes d'alertes per a estils coherents.

Barres de ratlles

De manera similar als colors sòlids, tenim barres de progrés amb ratlles variades.

Comportament

Les barres de progrés utilitzen transicions CSS3, de manera que si ajusteu dinàmicament l'amplada mitjançant javascript, es redimensionarà sense problemes.

Si feu servir la .activeclasse, les vostres .progress-stripedbarres de progrés animaran les ratlles d'esquerra a dreta.

Suport del navegador

Les barres de progrés utilitzen degradats, transicions i animacions CSS3 per aconseguir tots els seus efectes. Aquestes funcions no són compatibles amb IE7-9 o versions anteriors de Firefox.

Opera i IE no admeten animacions en aquest moment.

Pous

Utilitzeu el pou com a simple efecte sobre un element per donar-li un efecte d'inserció.

<div class = "bé" > 
  ...
</div>

Tanca la icona

Utilitzeu la icona genèrica de tancament per descartar contingut com ara modals i alertes.

×

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

Els dispositius iOS requereixen un href="#" per als esdeveniments de clic si prefereixes utilitzar un àncora.

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