Exemple

Menú contextual commutable per mostrar llistes d'enllaços. S'ha fet interactiu amb el connector de JavaScript desplegable .

<ul class = "menú desplegable" rol = "menú" aria-labelledby = "menú desplegable" >   
  <li><a tabindex = "-1" href = "#" > Acció </a></li>  
  <li><a tabindex = "-1" href = "#" > Una altra acció </a></li>  
  <li><a tabindex = "-1" href = "#" > Alguna cosa més aquí </a></li>  
  <li class = "divisor" ></li> 
  <li><a tabindex = "-1" href = "#" > Enllaç separat </a></li>  
</ul>

Marcatge

Mirant només el menú desplegable, aquí teniu l'HTML requerit. Heu d'embolicar l'activador del menú desplegable i el menú desplegable dins de .dropdown, o un altre element que declari position: relative;. A continuació, només cal crear el menú.

<div class = "menú desplegable" > 
  <!-- Enllaç o botó per canviar el menú desplegable -->
  <ul class = "menú desplegable" rol = "menú" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Acció </a></li>  
    <li><a tabindex = "-1" href = "#" > Una altra acció </a></li>  
    <li><a tabindex = "-1" href = "#" > Alguna cosa més aquí </a></li>  
    <li class = "divisor" ></li> 
    <li><a tabindex = "-1" href = "#" > Enllaç separat </a></li>  
  </ul>
</div>

Opcions

Alineeu els menús a la dreta i afegiu incloure nivells addicionals de desplegables.

Alineació dels menús

Afegeix .pull-righta una .dropdown-menualineació a la dreta del menú desplegable.

<ul class = "menú desplegable pull-right" role = "menú" aria-labelledby = "dLabel" >   
  ...
</ul>

Opcions de menú desactivades

Afegiu .disabled- <li>lo al menú desplegable per desactivar l'enllaç.

<ul class = "menú desplegable" rol = "menú" aria-labelledby = "menú desplegable" >   
  <li><a tabindex = "-1" href = "#" > Enllaç normal </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Enllaç desactivat </a></li>   
  <li><a tabindex = "-1" href = "#" > Un altre enllaç </a></li>  
</ul>

Submenús als desplegables

Afegiu un nivell addicional de menús desplegables, que apareixen al passar el cursor com els d'OS X, amb algunes addicions de marques senzilles. Afegeix .dropdown-submenua qualsevol lid'un menú desplegable existent per a un estil automàtic.

Per defecte

Dropup

Submenú esquerre

<ul class = "menú desplegable" rol = "menú" aria-labelledby = "dLabel" >   
  ...
  <li class = "submenú desplegable" > 
    <a tabindex = "-1" href = "#" > Més opcions </a>  
    <ul class = "menú desplegable" > 
      ...
    </ul>
  </li>
</ul>

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.

<div class = "btn-group" > 
  <button class = "btn" > Esquerra </button> 
  <button class = "btn" > Mitjà </button> 
  <button class = "btn" > Dreta </button> 
</div>

Diversos grups de botons

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>

Grups de botons verticals

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

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

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

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

Mides

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Acció </button> 
  <button class = "btn btn-mini 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>

Valors predeterminats lleugers Mateix marcatge, classes diferents

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.

Pestanyes bàsiques

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

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

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

Estat desactivat

Per a qualsevol component de navegació (pestanyes, píndoles o llista), afegiu .disabled- hi els enllaços grisos i sense efectes de desplaçament . Els enllaços es continuaran fent clic, però, tret que elimineu l' hrefatribut. Alternativament, podeu implementar JavaScript personalitzat per evitar aquests clics.

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

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.

Apilable

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

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

Píndoles apilades

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

Desplegables

Afegiu menús desplegables amb una mica d'HTML addicional i el complement de JavaScript dels desplegables .

Pestanyes amb desplegables

<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

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

Llistes de navegació

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.

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 = "active" ><a href = "#" > Inici </a></li>  
  <li><a href = "#" > Biblioteca </a></li> 
  ...
</ul>

NotaPer a la nidificació dins d'una llista de navegació, inclou -hi class="nav nav-list"en qualsevol <ul>.

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>

Navegació amb pestanyes

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.

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.

Estic a la secció 1.

Bon dia, estic a la secció 2.

Què tal noia, aquesta és la secció 3.

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

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. Obteniu més informació sobre com donar vida a les pestanyes amb pestanyes a la pàgina de documents de JavaScript .

Tabulable en qualsevol direcció

Pestanyes a la part inferior

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

Estic a la secció A.

Bon dia, estic a la secció B.

Què tal noia, aquesta és la secció C.

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

Estic a la secció A.

Bon dia, estic a la secció B.

Què tal noia, aquesta és la secció C.

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

Estic a la secció A.

Bon dia, estic a la secció B.

Què tal noia, aquesta és la secció C.

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

Barra de navegació bàsica

Per començar, les barres de navegació són estàtiques (no es fixen a la part superior) i inclouen suport per al nom del projecte i la navegació bàsica. Col·loqueu-ne un a qualsevol lloc dins d'un .container, que estableix l'amplada del vostre lloc i contingut.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Títol </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Inici </a></li>  
      <li><a href = "#" > Enllaç </a></li> 
      <li><a href = "#" > Enllaç </a></li> 
    </ul>
  </div>
</div>

Components de la barra de navegació

Marca

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

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

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>

Formes

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" >  
  <button type = "submit" class = "btn" > Envia </button>  
</form>

Formulari de cerca

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>

Alineació de components

Alineeu els enllaços de navegació, el formulari de cerca o el text, utilitzeu les classes d'utilitat .pull-lefto . .pull-rightAmbdues classes afegiran un CSS flotant en la direcció especificada.

Utilitzant menús desplegables

Afegiu menús desplegables i desplegables al navegador amb una mica d'etiquetatge i el connector de JavaScript dels menús desplegables .

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

Visiteu la documentació dels menús desplegables de JavaScript per obtenir més informació sobre com trucar als menús desplegables.

Text

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

Variacions de visualització opcionals

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.

Fixat a la part superior

Afegiu .navbar-fixed-topi recordeu tenir en compte l'àrea oculta que hi ha a sota afegint almenys 40 píxels paddingal fitxer <body>. Assegureu-vos d'afegir-ho després del CSS Bootstrap bàsic i abans del CSS responsiu opcional.

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

Fixat al fons

Afegeix en el .navbar-fixed-bottomseu lloc.

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

Barra de navegació superior estàtica

Creeu una barra de navegació d'amplada completa que es desplaça amb la pàgina afegint .navbar-static-top. A diferència de la .navbar-fixed-topclasse, no cal que canvieu cap encoixinat al fitxer body.

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

Barra de navegació sensible

Per implementar una barra de navegació responsiva col·lapsable, emboliqui el contingut de la barra 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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc. -->
      </div>
 
    </div>
  </div>
</div>

Caps amunt! La barra de navegació responsiva requereix el connector de col·lapse i el fitxer CSS Bootstrap responsiu .

Variació invertida

Modifiqueu l'aspecte de la barra de navegació afegint .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Exemples

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

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

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.

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

<div class = "paginació" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

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

<div class = "paginació" > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Mides

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

<div class = "paginació paginació-gran" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginació" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginació paginació-petita" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginació paginació-mini" > 
  <ul>
    ...
  </ul>
</div>

Alineació

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

<div class = "paginació centrada en la paginació" > 
  ...
</div>

<div class = "paginació paginació-dreta" > 
  ...
</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.

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

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

Estat desactivat opcional

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

<ul class = "paper" > 
  <li class = "anteriorment desactivat" > 
    <a href = "#" > ← Més vell </a> 
  </li>
  ...
</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

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

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

<div class = "capçalera de pàgina" > 
  <h1> Exemple de capçalera de la pàgina <small> Subtext per a la capçalera </small></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ó
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 :

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

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.

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

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

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

<div class = "alert alert-block" > 
  <button type = "button" class = "tancar" data-dismiss = "alerta" > × </button>   
  <h4> Avís! </h4>
  Millor comproveu-vos, no sou...
</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.

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

Èxit

Ben fet! Heu llegit correctament aquest missatge d'alerta important.

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

Informació

Caps amunt! Aquesta alerta necessita la vostra atenció, però no és molt important.

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

Exemples i etiquetes

Bàsic

Barra de progrés predeterminada amb un degradat vertical.

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

A ratlles

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

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

Animat

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

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

Apilats

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

<div class = "progrés" > 
  <div class = "bar bar-success" style = " amplada : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " amplada : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " amplada : 10 %; " ></div>   
</div>

Opcions

Colors addicionals

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

<div class = "progress progress-info" > 
  <div class = "bar" style = " amplada : 20 % " ></div>   
</div>
<div class = "progrés progress-èxit" > 
  <div class = "bar" style = " amplada : 40 % " ></div>   
</div>
<div class = "avís de progrés de progrés" > 
  <div class = "bar" style = " amplada : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " amplada : 80 % " ></div>   
</div>

Barres de ratlles

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " amplada : 20 % " ></div>   
</div>
<div class = "progrés progress-succes progress-striped" > 
  <div class = "bar" style = " amplada : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " amplada : 60 % " ></div>   
</div>
<div class = "progrés progress-danger progress-striped" > 
  <div class = "bar" style = " amplada : 80 % " ></div>   
</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.

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.

Encapçalament dels mitjans

<div class = "mitjans" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Encapçalament multimèdia </h4> 
    ...
 
    <!-- Objecte multimèdia niu -->
    <div class = "mitjans" > 
      ...
    </div>
  </div>
</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).

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.

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.

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.

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

<ul class = "llista de mitjans" > 
  <li class = "mitjans" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Encapçalament multimèdia </h4> 
      ...
 
      <!-- Objecte multimèdia niu -->
      <div class = "mitjans" > 
        ...
     </div>
    </div>
  </li>
</ul>

Pous

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

Mira, estic en un pou!

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

Classes opcionals

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

Mira, estic en un pou!

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

Mira, estic en un pou!

<div class = "bé bé petit" > 
  ...
</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="#"esdeveniment de clic si preferiu utilitzar un àncora.

<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

class = "tirar a l'esquerra"

. tirar - esquerra {
  flotar : esquerra ;
}

.tirar-dreta

Flota un element cap a la dreta

classe = "tirar a la dreta"

. tirar - dreta {
  flotar : dret ;
}

.silenciat

Canvia el color d'un element a#999

class = "silenciat"

. silenciat {
  color : #999; 
}

.clearfix

Netegeu floatqualsevol element

class = "clearfix"

. clearfix {
  * zoom : 1 ; 
  &: abans ,
  &: després de {
    pantalla : taula ;
    contingut : "" ; 
  }
  &: després de {
    clar : tots dos ;
  }
}

Menús desplegables

Exemple

Marcatge

Opcions

Alineació dels menús

Opcions de menú desactivades

Submenús als desplegables

Grups de botons

Exemples

Grup d'un sol botó

Diversos grups de botons

Grups de botons verticals

Cases de selecció i sabors de ràdio

Menú desplegable en grups de botons

Menús desplegables de botons

Visió general i exemples

Funciona amb totes les mides de botons

Requereix JavaScript

Dividir els menús desplegables de botons

Mides

Menús desplegables

Nav: pestanyes, píndoles i llistes

Valors predeterminats lleugers Mateix marcatge, classes diferents

Pestanyes bàsiques

Pastilles bàsiques

Estat desactivat

Alineació de components

Apilable

Pestanyes apilades

Píndoles apilades

Desplegables

Pestanyes amb desplegables

Píndoles amb desplegables

Llistes de navegació

Exemple de llista de navegació

Divisors horitzontals

Navegació amb pestanyes

Exemple de tabulació

Esvaeix a les pestanyes

Requereix el connector jQuery

Tabulable en qualsevol direcció

Pestanyes a la part inferior

Pestanyes a l'esquerra

Pestanyes a la dreta

Barra de navegació

Barra de navegació bàsica

Components de la barra de navegació

Marca

Enllaços de navegació

Formes

Formulari de cerca

Alineació de components

Utilitzant menús desplegables

Text

Variacions de visualització opcionals

Fixat a la part superior

Fixat al fons

Barra de navegació superior estàtica

Barra de navegació sensible

Variació invertida

Pa ratllat

Exemples

Paginació Dues opcions per navegar pel contingut

Paginació estàndard

Opcions

Estats desactivats i actius

Mides

Alineació

Buscapersones

Exemple per defecte

Enllaços alineats

Estat desactivat opcional

Etiquetes i distintius

Etiquetes

Insígnies

Fàcilment plegable

Components tipogràfics

Unitat heroi

Hola món!

Capçalera de la pàgina