Components

Desenes de components reutilitzables estan integrats a Bootstrap per proporcionar navegació, alertes, popovers i molt més.

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:

  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>

Exemple de barra d'eines

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </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.

Botons desplegables

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.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Acció
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "menú desplegable" >
  7. <!-- enllaços del menú desplegable -->
  8. </ul>
  9. </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.


Dividir els menús desplegables de botons

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.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "menú desplegable a la dreta" >
  4. <!-- enllaços del menú desplegable -->
  5. </ul>
  6. </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.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Acció </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "menjador desplegable" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "menú desplegable" >
  7. <!-- enllaços del menú desplegable -->
  8. </ul>
  9. </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.

  1. <div class = "abandonament del grup btn" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "menjador desplegable" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "menú desplegable" >
  7. <!-- enllaços del menú desplegable -->
  8. </ul>
  9. </div>

Paginació de pàgines múltiples

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

  1. <div class = "paginació" >
  2. <ul>
  3. <li><a href = "#" > Anterior </a></li>
  4. <li class = "actiu" >
  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 = "#" > Següent </a></li>
  11. </ul>
  12. </div>

Buscapersones Per obtenir enllaços ràpids anteriors i següents

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.

  1. <ul class = "paper" >
  2. <li>
  3. <a href = "#" > Anterior </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Següent </a>
  7. </li>
  8. </ul>

Enllaços alineats

Alternativament, podeu alinear cada enllaç als costats:

  1. <ul class = "paper" >
  2. <li class = "anterior" >
  3. <a href = "#" > Més vell </a>
  4. </li>
  5. <li class = "següent" >
  6. <a href = "#" > Més recent → </a>
  7. </li>
  8. </ul>
Etiquetes Marcatge
Per defecte <span class="label">Default</span>
Èxit <span class="label label-success">Success</span>
Avís <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Informació <span class="label label-info">Info</span>
Invers <span class="label label-inverse">Inverse</span>

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

Nom Exemple Marcatge
Per defecte 1 <span class="badge">1</span>
Èxit 2 <span class="badge badge-success">2</span>
Avís 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Informació 8 <span class="badge badge-info">8</span>
Invers 10 <span class="badge badge-inverse">10</span>

Unitat heroi

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:

  1. <div class = "unitat d'heroi" >
  2. <h1> Encapçalament </h1>
  3. <p> Lema </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Aprèn més
  7. </a>
  8. </p>
  9. </div>

Hola món!

Es tracta d'una unitat d'heroi senzilla, un component senzill d'estil jumbotron per cridar l'atenció addicional sobre el contingut o la informació destacats.

Aprèn més

Capçalera de la pàgina

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

  1. <div class = "capçalera de pàgina" >
  2. <h1> Exemple de capçalera de la pàgina </h1>
  3. </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 :

  1. <ul class = "miniatures" >
  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 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:

  1. <ul class = "miniatures" >
  2. <li class = "span3" >
  3. <div class = "miniatura" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Etiqueta de miniatura </h5>
  6. <p> Subtítol de miniatura aquí mateix... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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.

Valors predeterminats lleugers

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.

Avís! Millor comproveu-vos, no teniu massa bona pinta.
  1. <div class = "alerta" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Avís! </strong> Millor comproveu-vos, no teniu massa bona pinta.
  4. </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.

Avís!

Millor comproveu-vos, no teniu massa bona pinta. 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" > Avís! </h4>
  4. Millor comproveu-vos, no sou...
  5. </div>

Alternatives contextuals Afegiu classes opcionals per canviar la connotació d'una alerta

Error o perill

Oh snap! Canvia algunes coses i prova d'enviar de nou.
  1. <div class = "alerta d'alerta-error" >
  2. ...
  3. </div>

Èxit

Ben fet! Heu llegit correctament aquest missatge d'alerta important.
  1. <div class = "alerta d'alerta-èxit" >
  2. ...
  3. </div>

Informació

Caps amunt! Aquesta alerta necessita la vostra atenció, però no és molt important.
  1. <div class = "informació d'alerta d'alerta" >
  2. ...
  3. </div>

Exemples i etiquetes

Bàsic

Barra de progrés predeterminada amb un degradat vertical.

  1. <div class = "progrés" >
  2. <div class = "bar"
  3. estil = " amplada : 60 %; " ></div>
  4. </div>

A ratlles

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

  1. <div class = "progress progress-striped" >
  2. <div class = "bar"
  3. estil = " amplada : 20 %; " ></div>
  4. </div>

Animat

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

  1. <div class = "progrés amb franges de progrés
  2. actiu" >
  3. <div class = "bar"
  4. estil = " amplada : 40 %; " ></div>
  5. </div>

Opcions i suport del navegador

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

Mira, estic en un pou!
  1. <div class = "bé" >
  2. ...
  3. </div>

Tanca la icona

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

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

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

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