Components

Desenes de components reutilitzables creats per oferir navegació, alertes, popovers i molt més.

Exemples

Dues opcions bàsiques, juntament amb dues variacions més específiques.

Grup d'un sol botó

Emboliqui una sèrie de botons amb .btnen .btn-group.

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

Diversos grups de botons

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>

Grups de botons verticals

Feu que un conjunt de botons apareguin apilats verticalment en lloc de horitzontal.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </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ò.

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.

  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: .btn-large, .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

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.

  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>

Mides

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

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Acció </button>
  3. <button class = "btn btn-mini 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ó estàndard

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

  1. <div class = "paginació" >
  2. <ul>
  3. <li><a href = "#" > Anterior </a></li>
  4. <li><a href = "#" > 1 </a></li>
  5. <li><a href = "#" > 2 </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > 4 ​​</a></li>
  8. <li><a href = "#" > 5 </a></li>
  9. <li><a href = "#" > Següent </a></li>
  10. </ul>
  11. </div>

Opcions

Estats desactivats i actius

Els enllaços es poden personalitzar per a diferents circumstàncies. Utilitzeu .disabled-los per als enllaços que no es poden fer clic i .activeper indicar la pàgina actual.

  1. <div class = "paginació" >
  2. <ul>
  3. <li class = "disabled" ><a href = "#" > « </a></li>
  4. <li class = "active" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Opcionalment, podeu canviar els ancoratges actius o desactivats per trams per eliminar la funcionalitat de clics mantenint els estils previstos.

  1. <div class = "paginació" >
  2. <ul>
  3. <li class = "disabled" ><span> « </span></li>
  4. <li class = "active" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Mides

Vols una paginació més gran o més petita? Afegiu .pagination-large, .pagination-small, o .pagination-miniper a mides addicionals.

  1. <div class = "paginació paginació-gran" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "paginació" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "paginació paginació-petita" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "paginació paginació-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Alineació

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

  1. <div class = "paginació centrada en la paginació" >
  2. ...
  3. </div>
  1. <div class = "paginació paginació-dreta" >
  2. ...
  3. </div>

Buscapersones

Enllaços ràpids anteriors i següents per a implementacions de paginació senzilles amb marques i estils lleugers. És ideal per a llocs senzills com blocs o revistes.

Exemple per defecte

Per defecte, el cercapersones centra els enllaços.

  1. <ul class = "paper" >
  2. <li><a href = "#" > Anterior </a></li>
  3. <li><a href = "#" > Següent </a></li>
  4. </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>

Estat desactivat opcional

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

  1. <ul class = "paper" >
  2. <li class = "anteriorment desactivat" >
  3. <a href = "#" > Més vell </a>
  4. </li>
  5. ...
  6. </ul>

Etiquetes

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>

Insígnies

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>

Fàcilment plegable

Per facilitar la implementació, les etiquetes i les insígnies simplement col·lapsaran (mitjançant el :emptyselector de CSS) quan no hi hagi contingut.

Unitat heroi

Un component lleuger i flexible per mostrar el contingut clau del vostre lloc. Funciona bé en llocs de màrqueting i amb contingut pesat.

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

  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>

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 <small> Subtext per a la capçalera </small></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.

  • 300 x 200

    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ó

  • 300 x 200

    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ó

  • 300 x 200

    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.

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 = "span4" >
  3. <a href = "#" class = "miniatura" >
  4. <img data-src = "holder.js/300x200" 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 = "span4" >
  3. <div class = "miniatura" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Etiqueta de miniatura </h3>
  6. <p> Subtítol de miniatura... </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.

Alerta per defecte

Emboliqui qualsevol text i un botó d'omissió opcional .alertper a un missatge d'avís bàsic.

Avís! Millor comproveu-vos, no teniu massa bona pinta.
  1. <div class = "alerta" >
  2. <button type = "button" class = "tancar" data-dismiss = "alerta" > × </button>
  3. <strong> Avís! </strong> Millor comproveu-vos, no teniu massa bona pinta.
  4. </div>

Botons d'omissió

Els navegadors Mobile Safari i Mobile Opera, a més de l' data-dismiss="alert"atribut, requereixen un href="#"per a l'eliminació d'alertes quan s'utilitzen una <a>etiqueta.

  1. <a href = "#" class = "close" data-dismiss = "alerta" > × </a>

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.

  1. <button type = "button" class = "tancar" data-dismiss = "alerta" > × </button>

Ignora les alertes mitjançant JavaScript

Utilitzeu el connector d'alertes jQuery per a l'eliminació ràpida i senzilla d'alertes.


Opcions

Per als missatges més llargs, augmenteu el farciment a la part superior i inferior de l'embolcall d'alerta afegint .alert-block.

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. <button type = "button" class = "tancar" data-dismiss = "alerta" > × </button>
  3. <h4> 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" style = " amplada : 60 %; " ></div>
  3. </div>

A ratlles

Utilitza un degradat per crear un efecte ratllat. No disponible a IE7-8.

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

Animat

Afegeix .activea .progress-stripedper animar les ratlles de dreta a esquerra. No disponible en totes les versions d'IE.

  1. <div class = "progrés progress-striped active" >
  2. <div class = "bar" style = " amplada : 40 %; " ></div>
  3. </div>

Apilats

Col·loqueu diverses barres a la mateixa .progressper apilar-les.

  1. <div class = "progrés" >
  2. <div class = "bar bar-success" style = " amplada : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " amplada : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " amplada : 10 %; " ></div>
  5. </div>

Opcions

Colors addicionals

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

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " amplada : 20 % " ></div>
  3. </div>
  4. <div class = "progrés progress-èxit" >
  5. <div class = "bar" style = " amplada : 40 % " ></div>
  6. </div>
  7. <div class = "avís de progrés de progrés" >
  8. <div class = "bar" style = " amplada : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger" >
  11. <div class = "bar" style = " amplada : 80 % " ></div>
  12. </div>

Barres de ratlles

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

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " amplada : 20 % " ></div>
  3. </div>
  4. <div class = "progrés progress-succes progress-striped" >
  5. <div class = "bar" style = " amplada : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div class = "bar" style = " amplada : 60 % " ></div>
  9. </div>
  10. <div class = "progrés progress-danger progress-striped" >
  11. <div class = "bar" style = " amplada : 80 % " ></div>
  12. </div>

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.

Les versions anteriors a Internet Explorer 10 i Opera 12 no admeten animacions.

Estils d'objectes abstractes per crear diversos tipus de components (com ara comentaris de bloc, tuits, etc.) que inclouen una imatge alineada a l'esquerra o a la dreta juntament amb el contingut textual.

Exemple per defecte

Els mitjans predeterminats permeten fer flotar un objecte multimèdia (imatges, vídeo, àudio) a l'esquerra o a la dreta d'un bloc de contingut.

64x64

Encapçalament dels mitjans

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Encapçalament dels mitjans

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Encapçalament dels mitjans

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1. <div class = "mitjans" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Encapçalament multimèdia </h4>
  7. ...
  8.  
  9. <!-- Objecte multimèdia niu -->
  10. <div class = "mitjans" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Llista de mitjans

Amb una mica d'etiquetatge addicional, podeu utilitzar la llista de mitjans dins (útil per a fils de comentaris o llistes d'articles).

  • 64x64

    Encapçalament dels mitjans

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    Encapçalament multimèdia niu

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Encapçalament multimèdia niu

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Encapçalament multimèdia niu

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    Encapçalament dels mitjans

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  1. <ul class = "llista de mitjans" >
  2. <li class = "mitjans" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > Encapçalament multimèdia </h4>
  8. ...
  9.  
  10. <!-- Objecte multimèdia niu -->
  11. <div class = "mitjans" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

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>

Classes opcionals

Control de farciment i cantonades arrodonides amb dues classes de modificadors opcionals.

Mira, estic en un pou!
  1. <div class = "bé bé gran" >
  2. ...
  3. </div>
Mira, estic en un pou!
  1. <div class = "bé bé petit" >
  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="#"esdeveniment de clic si preferiu utilitzar un àncora.

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

Classes d'ajuda

Classes senzilles i focalitzades per a petits retocs de visualització o comportament.

.tirar-esquerra

Flota un element a l'esquerra

  1. class = "tirar a l'esquerra"
  1. . tirar - esquerra {
  2. flotar : esquerra ;
  3. }

.tirar-dreta

Flota un element cap a la dreta

  1. classe = "tirar a la dreta"
  1. . tirar - dreta {
  2. flotar : dret ;
  3. }

.silenciat

Canvia el color d'un element a#999

  1. class = "silenciat"
  1. . silenciat {
  2. color : #999;
  3. }

.clearfix

Netegeu floatqualsevol element

  1. class = "clearfix"
  1. . clearfix {
  2. * zoom : 1 ;
  3. &: abans ,
  4. &: després de {
  5. pantalla : taula ;
  6. contingut : "" ;
  7. }
  8. &: després de {
  9. clar : tots dos ;
  10. }
  11. }