Máis dunha ducia de compoñentes reutilizables construídos para proporcionar iconografía, menús despregables, grupos de entrada, navegación, alertas e moito máis.
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 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.
Exemplos
Utilízaos en botóns, grupos de botóns para unha barra de ferramentas, navegación ou entradas de formularios antepostas.
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.
Erro:Introduce un enderezo de correo electrónico válido
Despregables
Menú contextual conmutable para mostrar listas de ligazóns. Feito interactivo co complemento de JavaScript desplegable .
Exemplo
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ú.
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.
Cabeceiras
Engade unha cabeceira para etiquetar seccións de accións en calquera menú despregable.
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.
Barra de ferramentas de botóns
Combina conxuntos de <div class="btn-group">para <div class="btn-toolbar">os compoñentes máis complexos.
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.
Aniñación
Coloque un .btn-groupdentro doutro .btn-groupcando quere menús despregables mesturados cunha serie de botóns.
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.
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.
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.
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.
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.
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.
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.
Botóns con menú despregable
Botóns segmentados
Varios botóns
Aínda que só podes ter un complemento por lado, podes ter varios botóns dentro dun só .input-group-btn.
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.
Fichas
Teña en conta que a .nav-tabsclase require a .navclase base.
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 .
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:
Reduce a cantidade ou o ancho dos elementos da barra de navegación.
Ocultar certos elementos da barra de navegación en determinados tamaños de pantalla usando clases de utilidade receptivas .
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.
Imaxe de marca
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.
Formularios
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.
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.
Botóns
Engade a .navbar-btnclase aos <button>elementos que non residen nun <form>para centralos verticalmente na barra de navegación.
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.
Texto
Envolve as cadeas de texto nun elemento con .navbar-text, xeralmente nunha <p>etiqueta para a interlineado e a cor adecuadas.
Ligazóns que non son de navegación
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.
Aliñación de compoñentes
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.
Fixado na parte superior
Engade .navbar-fixed-tope inclúa un .containerou .container-fluidao contido da barra de navegación para centrar e pad.
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.
Asegúrate de incluír isto despois do núcleo Bootstrap CSS.
Fixo ao fondo
Engade .navbar-fixed-bottome inclúa un .containerou .container-fluidao contido da barra de navegación para centrar e pad.
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.
Asegúrate de incluír isto despois do núcleo Bootstrap CSS.
Top estático
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.
Barra de navegación invertida
Modifique o aspecto da barra de navegación engadindo .navbar-inverse.
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.
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.
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.
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.
Talla
Queres unha paxinación máis grande ou máis pequena? Engadir .pagination-lgou .pagination-smpara tamaños adicionais.
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.
Ligazóns aliñadas
Alternativamente, pode aliñar cada ligazón aos lados:
Estado opcional desactivado
As ligazóns de paginación tamén usan a .disabledclase de utilidade xeral da paginación.
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
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
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.
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.
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).
Exemplo de cabeceira de páxina Subtexto para a cabeceira
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.
Contido personalizado
Cun pouco de marcado adicional, é posible engadir calquera tipo de contido HTML como títulos, parágrafos ou botóns nas miniaturas.
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.
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.
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.
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.
Ben feito! Leu correctamente esta importante mensaxe de alerta.
Aviso! Esta alerta precisa da túa atención, pero non é moi importante.
Aviso! É mellor verifícate a ti mesmo, non tes demasiado bo aspecto.
¡Oh! Cambia algunhas cousas e tenta enviar de novo.
Alertas descartables
Constrúe calquera alerta engadindo un .alert-dismissiblebotón opcional e pechar.
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
Con etiqueta
Elimina a clase <span>with .sr-onlyda barra de progreso para mostrar unha porcentaxe visible.
60 %
Para asegurarse de que o texto da etiqueta permanece lexible mesmo en porcentaxes baixas, considere engadir un min-widthá barra de progreso.
0 %
2 %
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)
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)
Animado
Engadir .activea .progress-bar-stripedpara animar as raias de dereita a esquerda. Non dispoñible en IE9 e abaixo.
45% completo
Apilados
Coloca varias barras no mesmo .progresspara apilalas.
35% completado (éxito)
20 % completo (advertencia)
10 % completo (perigo)
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.
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.
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.
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
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
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.
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í.
Elementos desactivados
Engádeo .disableda a .list-group-itempara que apareza desactivado.
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
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
Panel con pé de páxina
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
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
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
Se non hai corpo do panel, o compoñente móvese da cabeceira do panel á táboa sen interrupción.
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
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.
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!
Clases optativas
Controla o recheo e as esquinas redondeadas con dúas clases de modificadores opcionais.