Glifos

Glifos dispoñibles

Inclúe máis de 250 glifos en formato de fonte do conxunto Glyphicon Halflings. Os Halflings Glyphicons normalmente non están dispoñibles gratuitamente, pero o seu creador púxoos dispoñibles para Bootstrap de xeito gratuíto. Como agradecemento, só pedimos que inclúas unha ligazón a Glyphicons sempre que sexa posible.

  • glyphicon glyphicon-asterisco
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-menos
  • glyphicon glyphicon-nube
  • glyphicon glyphicon-sobre
  • glyphicon glyphicon-lapis
  • glyphicon gliphicon-vidrio
  • glyphicon glyphicon-música
  • glyphicon glyphicon-busca
  • glyphicon gliphicon-corazón
  • glyphicon glyphicon-estrela
  • glyphicon glyphicon-estrela-baleiro
  • glyphicon glyphicon-usuario
  • glyphicon glyphicon-película
  • glyphicon glyphicon-th-grande
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-eliminar
  • glyphicon glyphicon-ampliar
  • glyphicon glyphicon-amenzar
  • glyphicon glyphicon-off
  • glyphicon glyphicon-sinal
  • glifo glifo-cog
  • glyphicon glyphicon-lixo
  • glyphicon glyphicon-home
  • glyphicon glyphicon-ficheiro
  • glificón glifo-tempo
  • glyphicon glyphicon-estrada
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-descarga
  • glyphicon glyphicon-carga
  • glyphicon glyphicon bandexa de entrada
  • glyphicon glyphicon-xogar-circle
  • glyphicon glyphicon-repetir
  • glyphicon glyphicon-refrescar
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-bloqueo
  • glyphicon glyphicon-bandeira
  • glyphicon glyphicon-auriculares
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-baixa o volume
  • glyphicon glyphicon-subir volume
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-código de barras
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-libro
  • glyphicon glyphicon-marcador
  • glyphicon glyphicon-print
  • glyphicon glyphicon-cámara
  • glyphicon glyphicon-font
  • glyphicon glyphicon-negriña
  • glyphicon glyphicon-cursiva
  • glyphicon glyphicon-text-height
  • gliphicon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-dereita
  • glyphicon glyphicon-align-xustificar
  • glyphicon glyphicon-lista
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-dereita
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-foto
  • glyphicon glyphicon-mapa-marcador
  • glyphicon glyphicon-axustar
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-editar
  • glyphicon glyphicon-compartir
  • glyphicon glyphicon-comprobación
  • glyphicon gliphicon-mover
  • glyphicon glyphicon-paso-atrás
  • glyphicon glyphicon-retroceso rápido
  • glyphicon glyphicon-atrás
  • glyphicon glyphicon-xogar
  • glyphicon glyphicon-pausa
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-adelante
  • glyphicon glyphicon-avance rápido
  • glyphicon glyphicon-paso-adelante
  • glyphicon glyphicon-expulsar
  • glyphicon glyphicon-chevron-esquerda
  • glyphicon glyphicon-chevron-dereita
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-signo-menos
  • glyphicon glyphicon-eliminar-sinal
  • glyphicon glyphicon-ok-sign
  • glyphicon gliphicon-sinal-pregunta
  • glyphicon glyphicon-info-sin
  • glyphicon glyphicon captura de pantalla
  • glyphicon glyphicon-eliminar-círculo
  • glyphicon glyphicon-ok-círculo
  • glyphicon glyphicon-ban-círculo
  • glyphicon gliphicon-frecha-esquerda
  • glyphicon glyphicon-frecha-dereita
  • glyphicon gliphicon-frecha-arriba
  • glyphicon glyphicon-frecha-abajo
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-redimensionar-completo
  • glyphicon glyphicon-redimensionar-pequeno
  • glyphicon glyphicon-signo-de-exclamación
  • glyphicon glyphicon-agasallo
  • glifo glifo-folla
  • glyphicon glyphicon-lume
  • glyphicon glyphicon-ollo-aberto
  • glyphicon glyphicon-ollo-pechar
  • glyphicon gliphicon-sinal-de-advertencia
  • glifo glifico-plano
  • glyphicon glyphicon-calendario
  • glyphicon glyphicon-aleatorio
  • glyphicon glyphicon-comentario
  • glyphicon glyphicon-imán
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-carro da compra
  • glyphicon glyphicon-carpeta-pechar
  • glyphicon glyphicon-carpeta-abrir
  • glyphicon glyphicon-redimensionar-vertical
  • glyphicon glyphicon-redimensionar-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon gliphicon-campá
  • glyphicon glyphicon-certificado
  • glyphicon glyphicon-pulgar cara arriba
  • glyphicon glyphicon-polgares abaixo
  • glyphicon glyphicon-man-dereita
  • glyphicon glyphicon-man-esquerda
  • glyphicon glyphicon-man arriba
  • glyphicon glyphicon-man abaixo
  • glyphicon glyphicon-círculo-frecha-dereita
  • glyphicon glyphicon-círculo-frecha-esquerda
  • glyphicon glyphicon-círculo-frecha-arriba
  • glyphicon glyphicon-círculo-frecha-abaixo
  • glyphicon glyphicon-globo
  • glyphicon glyphicon-chave inglesa
  • glyphicon glyphicon-tarefas
  • glyphicon glyphicon-filtro
  • glyphicon glyphicon-maletín
  • glyphicon glyphicon-pantalla completa
  • glyphicon gliphicon-panel de control
  • glyphicon glyphicon-clip de papel
  • glyphicon glyphicon-corazón-baleiro
  • glyphicon glyphicon-link
  • glyphicon glyphicon-teléfono
  • glyphicon glyphicon-chincheira
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-ordenar-por-alfabeto
  • glyphicon glyphicon-ordenar-por-alfabeto-alt
  • glyphicon glyphicon-ordenar-por-orden
  • glyphicon glyphicon-ordenar-por-orden-alt
  • glyphicon glyphicon-ordenar-por-atributos
  • glyphicon glyphicon-ordenar-por-atributos-alt
  • glyphicon glyphicon-desmarcado
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-colapso-abaixo
  • glyphicon glyphicon-colapso
  • glyphicon glyphicon-iniciar sesión
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-pechar sesión
  • glyphicon glyphicon-nova-xanela
  • glyphicon glyphicon-rexistro
  • glyphicon glyphicon-gardar
  • glyphicon glyphicon-aberto
  • glyphicon glyphicon gardado
  • glyphicon glyphicon-import
  • glyphicon glyphicon-exportación
  • glyphicon glyphicon-enviar
  • glyphicon glyphicon-disquete
  • glyphicon glyphicon-disquete gardado
  • glyphicon glyphicon-disquete-eliminar
  • glyphicon glyphicon-disquete-gardar
  • glyphicon glyphicon-disquete-aberto
  • glyphicon glyphicon-tarxeta-de-crédito
  • glyphicon glyphicon-transferencia
  • glyphicon glyphicon-cubertos
  • glyphicon glyphicon-header
  • glyphicon glyphicon-comprimido
  • glyphicon glyphicon-auriculares
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-torre
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-video-hd
  • glyphicon glyphicon-subtítulos
  • glyphicon glyphicon-son-estéreo
  • glyphicon glyphicon-son-dolby
  • glyphicon glyphicon-son-5-1
  • glyphicon glyphicon-son-6-1
  • glyphicon glyphicon-son-7-1
  • glyphicon glyphicon-marca-copyright
  • glyphicon glyphicon marca de rexistro
  • glyphicon glyphicon-cloud-descarga
  • glyphicon glyphicon-nube-carga
  • glyphicon gliphicon-árbore-conífera
  • glyphicon gliphicon-árbore-caducifolio
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-gardar-ficheiro
  • glyphicon glyphicon-abrir-ficheiro
  • glyphicon glyphicon subir de nivel
  • glyphicon glyphicon-copia
  • glyphicon glyphicon-pegar
  • glyphicon glyphicon-alerta
  • glyphicon glyphicon ecualizador
  • glificon glificon-rei
  • glyphicon glyphicon-raíña
  • glyphicon gliphicon-peón
  • glyphicon glyphicon-bispo
  • glyphicon glyphicon-caballero
  • glyphicon glyphicon-fórmula-bebé
  • glyphicon glyphicon-tenda
  • glyphicon glyphicon-pizarra
  • glifo glifo-cama
  • glyphicon glyphicon-mazá
  • glyphicon glyphicon-borrar
  • glyphicon glyphicon-reloxo de area
  • glyphicon glyphicon-lámpada
  • glyphicon glyphicon-duplicar
  • glyphicon glyphicon-hucha
  • glyphicon glyphicon-tesoiras
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glifo glifo-rublo
  • glyphicon glyphicon-fregar
  • glyphicon glyphicon-escala
  • glyphicon glyphicon-xeo-polo
  • glyphicon glyphicon-polo-xeo-saborado
  • glyphicon glyphicon-educación
  • glyphicon glyphicon-opción-horizontal
  • glyphicon glyphicon-opción-vertical
  • glyphicon glyphicon-menú-hamburguesa
  • glyphicon glyphicon-xanela-modal
  • glyphicon gliphicon-aceite
  • glyphicon glyphicon-gran
  • glyphicon glyphicon-gafas de sol
  • gliphicon gliphicon-text-size
  • gliphicon gliphicon-text-color
  • gliphicon gliphicon-texto-fondo
  • glyphicon glyphicon-obxecto-align-top
  • glyphicon glyphicon-obxecto-align-bottom
  • glyphicon glyphicon-obxecto-align-horizontal
  • glyphicon glyphicon-obxecto-align-left
  • glyphicon glyphicon-obxecto-align-vertical
  • glyphicon glyphicon-obxecto-align-dereita
  • glyphicon gliphicon-triángulo-dereita
  • glyphicon glyphicon-triángulo-esquerda
  • glyphicon gliphicon-triángulo-fondo
  • glyphicon glyphicon-triangle-top
  • glyphicon glyphicon-consola
  • glyphicon gliphicon-superíndice
  • glyphicon gliphicon-subíndice
  • glyphicon glyphicon-menú-esquerda
  • glyphicon glyphicon-menú-dereita
  • glyphicon glyphicon-menú-abaixo
  • glyphicon glyphicon-menu-up

Como empregar

Por razóns de rendemento, todas as iconas requiren unha clase base e unha clase de iconas individual. Para usalo, coloca o seguinte código en calquera lugar. Asegúrate de deixar un espazo entre a icona e o texto para o recheo adecuado.

Non mesturar con outros compoñentes

As clases de iconas non se poden combinar directamente con outros compoñentes. Non deben usarse xunto con outras clases no mesmo elemento. En vez diso, engade un aniñado <span>e aplique as clases de iconas ao <span>.

Só para usar en elementos baleiros

As clases de iconas só deben usarse en elementos que non conteñen contido de texto e non teñan elementos fillos.

Cambiando a localización da fonte da icona

Bootstrap asume que os ficheiros de fonte de iconas estarán no ../fonts/directorio, en relación aos ficheiros CSS compilados. Mover ou renomear eses ficheiros de fonte significa actualizar o CSS dunha das tres formas:

  • Cambia as variables @icon-font-pathe/ou @icon-font-namenos ficheiros de Less fonte.
  • Use a opción de URL relativos proporcionada polo compilador Less.
  • Cambia os url()camiños no CSS compilado.

Use a opción que mellor se adapte á súa configuración de desenvolvemento específica.

Iconas accesibles

As versións modernas das tecnoloxías de asistencia anunciarán contido xerado en CSS, así como caracteres Unicode específicos. Para evitar saídas non desexadas e confusas nos lectores de pantalla (especialmente cando as iconas se usan exclusivamente para decoración), ocultámolas co aria-hidden="true"atributo.

Se estás a usar unha icona para transmitir significado (en lugar de só como elemento decorativo), asegúrate de que este significado tamén se transmita ás tecnoloxías de asistencia; por exemplo, inclúe contido adicional, oculto visualmente coa .sr-onlyclase.

Se estás a crear controis sen outro texto (como un <button>que só contén unha icona), sempre debes proporcionar contido alternativo para identificar o propósito do control, para que teña sentido para os usuarios de tecnoloxías de asistencia. Neste caso, pode engadir un aria-labelatributo no propio control.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Exemplos

Utilízaos en botóns, grupos de botóns para unha barra de ferramentas, navegación ou entradas de formularios antepostas.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Unha icona que se usa nunha alerta para indicar que se trata dunha mensaxe de erro, con .sr-onlytexto adicional para transmitir esta suxestión aos usuarios de tecnoloxías de asistencia.

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Despregables

Menú contextual conmutable para mostrar listas de ligazóns. Feito interactivo co complemento de JavaScript desplegable .

Envolve o disparador do menú despregable e o menú despregable dentro .dropdownde , ou noutro elemento que declare position: relative;. A continuación, engade o HTML do menú.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Os menús despregables pódense cambiar para expandirse cara arriba (en lugar de para abaixo) engadindo .dropupao pai.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

De xeito predeterminado, un menú despregable sitúase automaticamente ao 100 % desde a parte superior e ao lado esquerdo do seu pai. Engadir .dropdown-menu-rightao .dropdown-menualiñar á dereita o menú despregable.

Pode requirir un posicionamento adicional

Os menús despregables colócanse automaticamente mediante CSS dentro do fluxo normal do documento. Isto significa que os pais con certas propiedades poden recortar os menús despregables overflowou aparecer fóra dos límites da ventana gráfica. Resolve estes problemas pola túa conta a medida que xurdan.

.pull-rightAliñación obsoleta

.pull-rightA partir da versión 3.1.0, os menús despregables quedaron en desuso . Para aliñar á dereita un menú, use .dropdown-menu-right. Os compoñentes de navegación aliñados á dereita na barra de navegación usan unha versión mixin desta clase para aliñar automaticamente o menú. Para anulalo, use .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Engade unha cabeceira para etiquetar seccións de accións en calquera menú despregable.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Engade un divisor para separar series de ligazóns nun menú despregable.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Engadir .disableda un <li>no menú despregable para desactivar a ligazón.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Grupos de botóns

Agrupe unha serie de botóns nunha única liña co grupo de botóns. Engade a radio de JavaScript opcional e o comportamento do estilo de caixa de verificación co noso complemento de botóns .

As informacións sobre ferramentas e as ventás emerxentes nos grupos de botóns requiren unha configuración especial

Cando utilices información sobre ferramentas ou popovers en elementos dentro dun .btn-group, terás que especificar a opción container: 'body'para evitar efectos secundarios non desexados (como que o elemento se faga máis ancho e/ou perda as súas esquinas redondeadas cando se activa a información emerxente ou popover).

Asegúrese de ser correcto rolee proporcionar unha etiqueta

Para que as tecnoloxías de asistencia, como os lectores de pantalla, transmitan que se agrupan unha serie de botóns, é rolenecesario proporcionar un atributo adecuado. Para os grupos de botóns, isto sería role="group", mentres que as barras de ferramentas deberían ter un role="toolbar".

Unha excepción son os grupos que só conteñen un só control (por exemplo, os grupos de botóns xustificados con <button>elementos) ou un menú despregable.

Ademais, os grupos e as barras de ferramentas deberían ter unha etiqueta explícita, xa que a maioría das tecnoloxías de asistencia non os anunciarán, a pesar da presenza do roleatributo correcto. Nos exemplos proporcionados aquí, usamos , pero tamén se poden usar aria-labelalternativas como .aria-labelledby

Exemplo básico

Envolve unha serie de botóns .btncon .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Barra de ferramentas de botóns

Combina conxuntos de <div class="btn-group">para <div class="btn-toolbar">os compoñentes máis complexos.

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

Talla

En lugar de aplicar clases de tamaño de botón a cada botón dun grupo, só tes que engadir .btn-group-*a cada un .btn-group, incluso cando anidan varios grupos.




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Aniñación

Coloque un .btn-groupdentro doutro .btn-groupcando quere menús despregables mesturados cunha serie de botóns.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Variación vertical

Fai que un conxunto de botóns aparezan apilados verticalmente en lugar de horizontal. Aquí non se admiten os menús despregables dos botóns divididos.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

Grupos de botóns xustificados

Fai un grupo de botóns que se estendan en tamaños iguais para abarcar todo o ancho do seu pai. Tamén funciona con menús despregables de botóns dentro do grupo de botóns.

Manexo de fronteiras

Debido ao HTML e CSS específicos usados ​​para xustificar botóns (é dicir display: table-cell, ), os bordos entre eles duplícanse. Nos grupos de botóns normais, margin-left: -1pxúsase para apilar os bordos en lugar de eliminalos. Non obstante, marginnon funciona con display: table-cell. Como resultado, dependendo das súas personalizacións para Bootstrap, pode querer eliminar ou volver colorear os bordos.

IE8 e bordos

Internet Explorer 8 non representa os bordos dos botóns dun grupo de botóns xustificado, xa se estea activado <a>ou <button>elementos. Para evitar isto, envolve cada botón noutro .btn-group.

Consulte #12476 para obter máis información.

Con <a>elementos

Simplemente envolve unha serie de .btns en .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Ligazóns que actúan como botóns

Se os <a>elementos se usan para actuar como botóns, activando a funcionalidade na páxina, en lugar de navegar a outro documento ou sección da páxina actual, tamén se lles debería dar un role="button".

Con <button>elementos

Para usar grupos de botóns xustificados con <button>elementos, debes envolver cada botón nun grupo de botóns . A maioría dos navegadores non aplican correctamente o noso CSS para xustificar os <button>elementos, pero xa que admitimos menús despregables de botóns, podemos solucionar isto.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

Menú despregable de botóns

Use calquera botón para activar un menú despregable colocándoo dentro dun .btn-groupe proporcionando a marca de menú adecuada.

Dependencia do complemento

Os menús despregables de botóns requiren que se inclúa o complemento do menú despregable na túa versión de Bootstrap.

Menú despregable dun só botón

Converte un botón nun menú despregable con algúns cambios básicos de marcado.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Dividir menú despregable de botóns

Do mesmo xeito, cree menú despregable de botón dividido cos mesmos cambios de marcado, só cun botón separado.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Talla

Os menús despregables de botóns funcionan con botóns de todos os tamaños.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Variación de caída

Activa os menús despregables enriba dos elementos engadindo .dropupao pai.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Grupos de entrada

Amplía os controis do formulario engadindo texto ou botóns antes, despois ou a ambos os dous lados de calquera formato baseado en texto <input>. Utilízase .input-groupcon .input-group-addonou .input-group-btnpara antepoñer ou engadir elementos a un único .form-control.

<input>Só textual

Evite usar <select>elementos aquí, xa que non se poden definir completamente nos navegadores WebKit.

Evite usar <textarea>elementos aquí xa rowsque nalgúns casos non se respectarán os seus atributos.

As informacións sobre ferramentas e as ventás emerxentes nos grupos de entrada requiren unha configuración especial

Cando se usan ferramentas ou popovers en elementos dentro dun.input-group , terás que especificar a opción container: 'body'para evitar efectos secundarios non desexados (como que o elemento se faga máis ancho e/ou perda as súas esquinas redondeadas cando se activa a información emerxente ou popover).

Non mesturar con outros compoñentes

Non mesture grupos de formularios ou clases de columnas de grade directamente con grupos de entrada. En vez diso, aniñe o grupo de entrada dentro do grupo de formularios ou do elemento relacionado coa grade.

Engade sempre etiquetas

Os lectores de pantalla terán problemas cos teus formularios se non inclúes unha etiqueta para cada entrada. Para estes grupos de entrada, asegúrate de que calquera etiqueta ou funcionalidade adicional se transmita ás tecnoloxías de asistencia.

A técnica exacta que se utilizará (elementos visibles <label>, <label>elementos ocultos mediante a .sr-onlyclase ou uso do atributo aria-label, aria-labelledby, aria-describedby, titleou placeholder) e a información adicional que se debe transmitir variará dependendo do tipo exacto de widget de interface que esteas a implementar. Os exemplos desta sección proporcionan algúns enfoques suxeridos e específicos para cada caso.

Exemplo básico

Coloque un complemento ou botón a cada lado dunha entrada. Tamén pode colocar un a ambos os dous lados dunha entrada.

Non admitimos varios complementos ( .input-group-addonou .input-group-btn) nun só lado.

Non admitimos varios controis de formulario nun só grupo de entrada.

@

@example.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Talla

Engade as clases relativas de tamaño do formulario ao .input-grouppropio e os contidos dentro redimensionaranse automaticamente, sen necesidade de repetir as clases de tamaño de control do formulario en cada elemento.

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Caixas de verificación e complementos de radio

Coloque calquera caixa de verificación ou opción de radio dentro do complemento dun grupo de entrada en lugar de texto.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Complementos de botón

Os botóns dos grupos de entrada son un pouco diferentes e requiren un nivel adicional de aniñación. En lugar de .input-group-addon, terás que usar .input-group-btnpara envolver os botóns. Isto é necesario debido aos estilos de navegador predeterminados que non se poden anular.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Botóns con menú despregable

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Botóns segmentados

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Varios botóns

Aínda que só podes ter un complemento por lado, podes ter varios botóns dentro dun só .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Navs

Os navegadores dispoñibles en Bootstrap teñen marcado compartido, comezando pola .navclase base, así como estados compartidos. Cambia as clases modificadoras para cambiar entre cada estilo.

O uso de navs para paneis de pestanas require un complemento de pestanas de JavaScript

Para as pestanas con áreas con pestanas, debes usar o complemento JavaScript de pestanas . O marcado tamén requirirá roleatributos adicionais e ARIA; consulte o exemplo de marcado do complemento para obter máis detalles.

Fai que os navegadores utilizados como navegación sexan accesibles

Se estás a usar navs para proporcionar unha barra de navegación, asegúrate de engadir un role="navigation"ao contenedor principal máis lóxico do <ul>, ou envolve un <nav>elemento en toda a navegación. Non engadas o papel ao <ul>propio, xa que isto evitaría que sexa anunciado como unha lista real polas tecnoloxías de asistencia.

Teña en conta que a .nav-tabsclase require a .navclase base.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Tome o mesmo HTML, pero use no seu .nav-pillslugar:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

As pílulas tamén son apilables verticalmente. Só engade .nav-stacked.

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

Fai facilmente as pestanas ou as pílulas do mesmo ancho do seu pai en pantallas de máis de 768 píxeles con .nav-justified. Nas pantallas máis pequenas, as ligazóns de navegación están apiladas.

Actualmente non se admiten as ligazóns de navegación da barra de navegación xustificadas.

Safari e navegacións xustificadas sensibles

A partir da versión 9.1.2, Safari presenta un erro no que cambiar o tamaño do navegador horizontalmente provoca erros de renderización na navegación xustificada que se borran ao actualizar. Este erro tamén se mostra no exemplo de navegación xustificada .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Para calquera compoñente de navegación (pestañas ou pílulas), engade ligazóns grises e sen efectos.disabled de paso .

A función da ligazón non se viu afectada

Esta clase só cambiará a <a>aparencia de ', non a súa funcionalidade. Usa JavaScript personalizado para desactivar as ligazóns aquí.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Engade menús despregables cun HTML extra e o complemento de JavaScript para menús despregables .

Pestanas con menú despregable

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Pastillas con menú despregable

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Barra de navegación

As barras de navegación son metacomponentes sensibles que serven como cabeceiras de navegación para a súa aplicación ou sitio. Comezan contraídos (e pódense alternar) nas vistas móbiles e vólvense horizontais a medida que aumenta o ancho da xanela dispoñible.

Actualmente non se admiten as ligazóns de navegación da barra de navegación xustificadas.

Contido desbordado

Dado que Bootstrap non sabe canto espazo necesita o contido da túa barra de navegación, podes ter problemas coa inclusión do contido nunha segunda fila. Para resolver isto, podes:

  1. Reduce a cantidade ou o ancho dos elementos da barra de navegación.
  2. Ocultar certos elementos da barra de navegación en determinados tamaños de pantalla usando clases de utilidade receptivas .
  3. Cambia o punto no que a túa barra de navegación cambia entre o modo contraído e o modo horizontal. Personaliza a @grid-float-breakpointvariable ou engade a túa propia consulta multimedia.

Require un complemento de JavaScript

Se JavaScript está desactivado e a ventana gráfica é o suficientemente estreita como para contraer a barra de navegación, será imposible expandir a barra de navegación e ver o contido dentro de .navbar-collapse.

A barra de navegación sensible require que o complemento de contraer estea incluído na súa versión de Bootstrap.

Cambiando o punto de interrupción da barra de navegación móbil contraída

A barra de navegación colapsa na súa vista móbil vertical cando a ventá é máis estreita que @grid-float-breakpoint, e se expande á súa vista horizontal non móbil cando a ventá ten polo menos un @grid-float-breakpointancho. Axusta esta variable na fonte Menos para controlar cando se contrae ou se expande a barra de navegación. O valor predeterminado é 768px(a pantalla máis pequena "pequena" ou "tableta").

Facer accesibles as barras de navegación

Asegúrate de usar un <nav>elemento ou, se utilizas un elemento máis xenérico, como un <div>, engade un role="navigation"a cada barra de navegación para identificalo de forma explícita como unha rexión de referencia para os usuarios de tecnoloxías de asistencia.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Substitúe a marca da barra de navegación pola súa propia imaxe cambiando o texto por un <img>. Dado .navbar-brandque ten o seu propio recheo e altura, é posible que teñas que anular algúns CSS dependendo da túa imaxe.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Coloca o contido do formulario dentro .navbar-formpara un aliñamento vertical adecuado e un comportamento contraído en ventás estreitas. Use as opcións de aliñamento para decidir onde reside dentro do contido da barra de navegación.

Como aviso, .navbar-formcomparte gran parte do seu código .form-inlinemediante mixin. Algúns controis de formulario, como os grupos de entrada, poden requirir que os anchos fixos se mostren correctamente nunha barra de navegación.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Advertencias de dispositivos móbiles

Hai algunhas advertencias sobre o uso de controis de formulario dentro de elementos fixos en dispositivos móbiles. Consulte os nosos documentos de soporte do navegador para obter máis información.

Engade sempre etiquetas

Os lectores de pantalla terán problemas cos teus formularios se non inclúes unha etiqueta para cada entrada. Para estes formularios en liña, pode ocultar as etiquetas usando a .sr-onlyclase. Existen outros métodos alternativos para proporcionar unha etiqueta para tecnoloxías de asistencia, como o atributo aria-label, aria-labelledbyou . titleSe ningún destes está presente, os lectores de pantalla poden recorrer ao uso do placeholderatributo, se está presente, pero teña en conta que placeholdernon se recomenda o uso de como substituto doutros métodos de etiquetaxe.

Engade a .navbar-btnclase aos <button>elementos que non residen nun <form>para centralos verticalmente na barra de navegación.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Uso específico do contexto

Do mesmo xeito que as clases de botóns estándar , .navbar-btnpódense usar en <a>e <input>elementos. Non obstante, .navbar-btnnin as clases de botóns estándar deben usarse en <a>elementos dentro de .navbar-nav.

Envolve as cadeas de texto nun elemento con .navbar-text, xeralmente nunha <p>etiqueta para a interlineado e a cor adecuadas.

<p class="navbar-text">Signed in as Mark Otto</p>

Para as persoas que usan ligazóns estándar que non están dentro do compoñente de navegación da barra de navegación normal, use a .navbar-linkclase para engadir as cores adecuadas para as opcións da barra de navegación predeterminada e inversa.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Aliñar ligazóns de navegación, formularios, botóns ou texto, utilizando as clases de utilidade .navbar-leftou . .navbar-rightAmbas clases engadirán un flotante CSS na dirección especificada. Por exemplo, para aliñar as ligazóns de navegación, colócaas nun separado <ul>coa clase de utilidade respectiva aplicada.

Estas clases son versións mixtas de .pull-lefte .pull-right, pero están destinadas a consultas multimedia para facilitar o manexo dos compoñentes da barra de navegación en todos os tamaños de dispositivos.

Aliñando á dereita varios compoñentes

As barras de navegación teñen actualmente unha limitación con varias .navbar-rightclases. Para espaciar correctamente o contido, usamos a marxe negativa no último .navbar-rightelemento. Cando hai varios elementos que usan esa clase, estas marxes non funcionan como se pretende.

Repasaremos isto cando poidamos reescribir ese compoñente na versión 4.

Engade .navbar-fixed-tope inclúa un .containerou .container-fluidao contido da barra de navegación para centrar e pad.

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

Requírese acolchado corporal

A barra de navegación fixa sobrepoñerase ao teu outro contido, a non ser que o engadas paddingna parte superior do ficheiro <body>. Proba os teus propios valores ou usa o noso fragmento a continuación. Consello: Por defecto, a barra de navegación ten 50 píxeles de alto.

body { padding-top: 70px; }

Asegúrate de incluír isto despois do núcleo Bootstrap CSS.

Engade .navbar-fixed-bottome inclúa un .containerou .container-fluidao contido da barra de navegación para centrar e pad.

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

Requírese acolchado corporal

A barra de navegación fixa sobrepoñerase ao teu outro contido, a non ser que o engadas paddingá parte inferior do ficheiro <body>. Proba os teus propios valores ou usa o noso fragmento a continuación. Consello: Por defecto, a barra de navegación ten 50 píxeles de alto.

body { padding-bottom: 70px; }

Asegúrate de incluír isto despois do núcleo Bootstrap CSS.

Crea unha barra de navegación de ancho completo que se desprace coa páxina engadindo .navbar-static-tope incluíndo un .containerou .container-fluidpara centrar e rellenar o contido da barra de navegación.

A diferenza das .navbar-fixed-*clases, non necesitas cambiar ningún recheo no body.

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

Modifique o aspecto da barra de navegación engadindo .navbar-inverse.

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

Migas de pan

Indique a localización da páxina actual dentro dunha xerarquía de navegación.

Os separadores engádense automaticamente en CSS mediante :beforee content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Paxinación

Proporciona ligazóns de paxinación para o teu sitio ou aplicación co compoñente de paxinación de varias páxinas ou a alternativa de paginación máis sinxela .

Paxinación predeterminada

Paxinación sinxela inspirada en Rdio, ideal para aplicacións e resultados de busca. O bloque grande é difícil de perder, facilmente escalable e ofrece grandes áreas de clic.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Etiquetar o compoñente de paxinación

O compoñente de paxinación debe estar envolto nun <nav>elemento para identificalo como unha sección de navegación para lectores de pantalla e outras tecnoloxías de asistencia. Ademais, como é probable que unha páxina teña xa máis dunha sección de navegación deste tipo (como a navegación principal na cabeceira ou a navegación na barra lateral), é recomendable proporcionar unha descripción que reflicta aria-labelo <nav>seu propósito. Por exemplo, se o compoñente de paxinación se usa para navegar entre un conxunto de resultados de busca, unha etiqueta adecuada podería ser aria-label="Search results pages".

Estados activos e desactivados

As ligazóns son personalizables para diferentes circunstancias. Utilízao .disabledpara ligazóns que non se pode facer clic e .activepara indicar a páxina actual.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Recomendamos que cambie as áncoras activas ou desactivadas por <span>, ou omita a áncora no caso das frechas anteriores ou seguintes, para eliminar a función de clic mantendo os estilos previstos.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Talla

Queres unha paxinación máis grande ou máis pequena? Engadir .pagination-lgou .pagination-smpara tamaños adicionais.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

Buscapersonas

Ligazóns anteriores e seguintes rápidas para implementacións de paxinación sinxelas con marcas e estilos lixeiros. É ideal para sitios sinxelos como blogs ou revistas.

Exemplo predeterminado

Por defecto, o buscapersonas centra as ligazóns.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Alternativamente, pode aliñar cada ligazón aos lados:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Estado opcional desactivado

As ligazóns de paginación tamén usan a .disabledclase de utilidade xeral da paginación.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Etiquetas

Exemplo

Exemplo de título Novo

Exemplo de título Novo

Exemplo de título Novo

Exemplo de título Novo

Exemplo de título Novo
Exemplo de título Novo
<h3>Example heading <span class="label label-default">New</span></h3>

Variacións dispoñibles

Engade calquera das clases modificadoras mencionadas a continuación para cambiar o aspecto dunha etiqueta.

Información de éxito principal predeterminada Aviso Perigo
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Tes toneladas de etiquetas?

Os problemas de renderización poden xurdir cando tes decenas de etiquetas en liña nun recipiente estreito, cada unha contén o seu propio inline-blockelemento (como unha icona). O xeito de evitar isto é a configuración display: inline-block;. Para o contexto e un exemplo, consulte #13219 .

Insignias

Resalte facilmente elementos novos ou non lidos engadindo un <span class="badge">ás ligazóns, navegacións Bootstrap e moito máis.

Caixa de entrada42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Auto colapso

Cando non haxa elementos novos ou sen ler, as insignias simplemente colapsarán (a través do :emptyselector de CSS) sempre que non exista contido.

Compatibilidade entre navegadores

As insignias non se colapsarán automaticamente en Internet Explorer 8 porque carece de compatibilidade co :emptyselector.

Adáptase aos estados de navegación activos

Inclúense estilos integrados para colocar distintivos en estados activos nas navegacións de pílulas.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Jumbotron

Un compoñente lixeiro e flexible que, opcionalmente, pode ampliar toda a ventana gráfica para mostrar o contido clave do teu sitio.

Ola, mundo!

Esta é unha unidade de heroe sinxela, un simple compoñente de estilo jumbotron para chamar máis atención ao contido ou información destacados.

Aprender máis

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Para que o jumbotron teña o ancho total e sen esquinas redondeadas, colócao fóra de todos os .containers e, no seu lugar, engade un .containerdentro.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Cabeceira da páxina

Un shell sinxelo para h1espaciar e segmentar adecuadamente seccións de contido nunha páxina. Pode utilizar o elemento h1predeterminado de ' small, así como a maioría dos outros compoñentes (con estilos adicionais).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Miniaturas

Estende o sistema de grade de Bootstrap co compoñente de miniaturas para mostrar facilmente cuadrículas de imaxes, vídeos, texto e moito máis.

Se estás a buscar unha presentación de miniaturas tipo Pinterest de diferentes alturas e/ou anchos, terás que usar un complemento de terceiros como Masonry , Isotope ou Salvattore .

Exemplo predeterminado

De xeito predeterminado, as miniaturas de Bootstrap están deseñadas para mostrar as imaxes vinculadas cun marcado mínimo necesario.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Contido personalizado

Cun pouco de marcado adicional, é posible engadir calquera tipo de contido HTML como títulos, parágrafos ou botóns nas miniaturas.

100 % x 200

Etiqueta en miniatura

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

Botón Botón

100 % x 200

Etiqueta en miniatura

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

Botón Botón

100 % x 200

Etiqueta en miniatura

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

Botón Botón

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Alertas

Proporcione mensaxes de comentarios contextuais para as accións típicas dos usuarios cun puñado de mensaxes de alerta dispoñibles e flexibles.

Exemplos

Envolve calquera texto e un botón de exclusión opcional .alertnunha das catro clases contextuais (por exemplo, .alert-success) para as mensaxes de alerta básicas.

Sen clase predeterminada

As alertas non teñen clases predeterminadas, só clases base e modificadora. Unha alerta gris predeterminada non ten demasiado sentido, polo que tes que especificar un tipo mediante unha clase contextual. Escolle entre éxito, información, aviso ou perigo.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Alertas descartables

Constrúe calquera alerta engadindo un .alert-dismissiblebotón opcional e pechar.

Require un complemento de alerta de JavaScript

Para que as alertas non sexan totalmente funcionales, debes usar o complemento JavaScript de alertas .

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Garantir un comportamento adecuado en todos os dispositivos

Asegúrate de usar o <button>elemento co data-dismiss="alert"atributo data.

Use a .alert-linkclase de utilidade para proporcionar rapidamente ligazóns de cores coincidentes en calquera alerta.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Barras de progreso

Proporciona comentarios actualizados sobre o progreso dun fluxo de traballo ou acción con barras de progreso sinxelas pero flexibles.

Compatibilidade entre navegadores

As barras de progreso usan transicións e animacións CSS3 para conseguir algúns dos seus efectos. Estas funcións non son compatibles con Internet Explorer 9 e anteriores, nin con versións anteriores de Firefox. Opera 12 non admite animacións.

Compatibilidade con Política de seguranza de contido (CSP).

Se o teu sitio web ten unha Política de seguranza de contido (CSP) que non permite style-src 'unsafe-inline', non poderás utilizar styleatributos en liña para establecer o ancho das barras de progreso como se mostra nos nosos exemplos a continuación. Os métodos alternativos para configurar os anchos que son compatibles con CSP estritos inclúen usar un pouco de JavaScript personalizado (que establece element.style.width) ou usar clases CSS personalizadas.

Exemplo básico

Barra de progreso predeterminada.

60% completo
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Con etiqueta

Elimina a clase <span>with .sr-onlyda barra de progreso para mostrar unha porcentaxe visible.

60 %
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Para asegurarse de que o texto da etiqueta permanece lexible mesmo en porcentaxes baixas, considere engadir un min-widthá barra de progreso.

0 %
2 %
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Alternativas contextuais

As barras de progreso usan algúns dos mesmos botóns e clases de alerta para estilos consistentes.

40% completado (éxito)
20% completo
60 % completo (advertencia)
80 % completo (perigo)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Raias

Usa un degradado para crear un efecto de raias. Non dispoñible en IE9 e abaixo.

40% completado (éxito)
20% completo
60 % completo (advertencia)
80 % completo (perigo)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animado

Engadir .activea .progress-bar-stripedpara animar as raias de dereita a esquerda. Non dispoñible en IE9 e abaixo.

45% completo
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Apilados

Coloca varias barras no mesmo .progresspara apilalas.

35% completado (éxito)
20 % completo (advertencia)
10 % completo (perigo)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Obxecto multimedia

Estilos de obxectos abstractos para construír varios tipos de compoñentes (como comentarios de blog, chíos, etc.) que presentan unha imaxe aliñada á esquerda ou á dereita xunto con contido textual.

Medios predeterminados

O medio predeterminado mostra un obxecto multimedia (imaxes, vídeo, audio) á esquerda ou á dereita dun bloque de contido.

Título multimedia

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.

Título multimedia

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.

Título multimedia anidado

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.

Título multimedia

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.

Título multimedia

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.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

As clases .pull-lefte .pull-righttamén existen e usáronse anteriormente como parte do compoñente multimedia, pero están en desuso para ese uso a partir da versión 3.3.0. Son aproximadamente equivalentes a .media-lefte .media-right, excepto que .media-rightdeberían colocarse despois do .media-bodyno html.

Aliñación de medios

As imaxes ou outros medios pódense aliñar arriba, no medio ou abaixo. O valor predeterminado está aliñado na parte superior.

Medios aliñados na parte superior

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Medios aliñados ao medio

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Medios aliñados na parte inferior

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Lista de medios

Cun pouco de marcado extra, podes usar a lista de medios dentro (útil para os fíos de comentarios ou as listas de artigos).

  • Título multimedia

    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.

    Título multimedia anidado

    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.

    Título multimedia anidado

    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.

    Título multimedia anidado

    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="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Grupo de listas

Os grupos de listas son un compoñente flexible e poderoso para mostrar non só listas simples de elementos, senón tamén complexas con contido personalizado.

Exemplo básico

O grupo de listas máis básico é simplemente unha lista sen ordenar con elementos de lista e as clases adecuadas. Constrúeo coas opcións que seguen ou o teu propio CSS segundo sexa necesario.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestíbulo no eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Insignias

Engade o compoñente de insignias a calquera elemento do grupo da lista e situarase automaticamente á dereita.

  • 14Cras justo odio
  • 2Dapibus ac facilisis in
  • 1Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Elementos vinculados

Vincule os elementos do grupo da lista usando etiquetas de ancoraxe en lugar de elementos da lista (iso tamén significa un pai <div>en lugar de un <ul>). Non hai necesidade de pais individuais arredor de cada elemento.

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Elementos de botón

Os elementos do grupo da lista poden ser botóns en lugar de elementos da lista (iso tamén significa un pai <div>en lugar de un <ul>). Non hai necesidade de pais individuais arredor de cada elemento. Non use as .btnclases estándar aquí.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Elementos desactivados

Engádeo .disableda a .list-group-itempara que apareza desactivado.

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Clases contextuais

Use clases contextuais para dar estilo aos elementos da lista, predeterminados ou vinculados. Tamén inclúe .activeestado.

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestíbulo no eros
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Contido personalizado

Engade case calquera HTML dentro, mesmo para grupos de listas vinculadas como o seguinte.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Paneis

Aínda que non sempre é necesario, ás veces necesitas poñer o teu DOM nunha caixa. Para esas situacións, proba o compoñente do panel.

Exemplo básico

Por defecto, todo o .panelque fai é aplicar un bordo básico e un recheo para conter algún contido.

Exemplo de panel básico
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel con título

Engade facilmente un recipiente de título ao teu panel con .panel-heading. Tamén pode incluír calquera <h1>- <h6>cunha .panel-titleclase para engadir un título predefinido. Non obstante, os tamaños de letra de <h1>- <h6>son substituídos por .panel-heading.

Para colorear correctamente as ligazóns, asegúrate de colocar as ligazóns nos títulos dentro de .panel-title.

Título do panel sen título
Contido do panel

Título do panel

Contido do panel
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Axustar botóns ou texto secundario en .panel-footer. Teña en conta que os pés de páxina dos paneis non herdan cores e bordos cando se usan variacións contextuais xa que non están destinados a estar en primeiro plano.

Contido do panel
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Alternativas contextuais

Do mesmo xeito que outros compoñentes, fai facilmente un panel máis significativo para un contexto particular engadindo calquera das clases de estado contextuais.

Título do panel

Contido do panel

Título do panel

Contido do panel

Título do panel

Contido do panel

Título do panel

Contido do panel

Título do panel

Contido do panel
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Con mesas

Engade calquera que non teña bordes .tabledentro dun panel para un deseño perfecto. Se hai un .panel-body, engadimos un bordo extra na parte superior da táboa para a separación.

Título do panel

Algún contido do panel predeterminado aquí. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# Nome Apelido Nome de usuario
1 Marcos Oto @mdo
2 Xacobe Thornton @graxas
3 Larry o paxaro @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Se non hai corpo do panel, o compoñente móvese da cabeceira do panel á táboa sen interrupción.

Título do panel
# Nome Apelido Nome de usuario
1 Marcos Oto @mdo
2 Xacobe Thornton @graxas
3 Larry o paxaro @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Con grupos de listas

Inclúe facilmente grupos de listas de ancho completo dentro de calquera panel.

Título do panel

Algún contido do panel predeterminado aquí. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestíbulo no eros
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Inserción sensible

Permite aos navegadores determinar as dimensións do vídeo ou da presentación de diapositivas en función da anchura do bloque que o contén creando unha relación intrínseca que se escalará correctamente en calquera dispositivo.

As regras aplícanse directamente aos elementos <iframe>, <embed>, <video>, e <object>; opcionalmente use unha clase descendente explícita .embed-responsive-itemcando quere facer coincidir o estilo doutros atributos.

Pro-Tip! Non é necesario que inclúas frameborder="0"nas túas <iframe>s xa que o anulamos por ti.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Pozos

Ben por defecto

Use o pozo como un efecto sinxelo sobre un elemento para darlle un efecto de inserción.

Mira, estou nun pozo!
<div class="well">...</div>

Clases optativas

Controla o recheo e as esquinas redondeadas con dúas clases de modificadores opcionais.

Mira, estou nun pozo grande!
<div class="well well-lg">...</div>
Mira, estou nun pozo pequeno!
<div class="well well-sm">...</div>