Mais de uma dúzia de componentes reutilizáveis criados para fornecer iconografia, listas suspensas, grupos de entrada, navegação, alertas e muito mais.
Glyphicons
Glifos disponíveis
Inclui mais de 250 glifos em formato de fonte do conjunto Glyphicon Halflings. Glyphicons Halflings normalmente não estão disponíveis gratuitamente, mas seu criador os disponibilizou para o Bootstrap gratuitamente. Como agradecimento, pedimos apenas que você inclua um link para Glyphicons sempre que possível.
glyphicon glyphicon-asterisco
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-cloud
glyphicon glyphicon-envelope
glyphicon glyphicon-lápis
glyphicon glyphicon-glass
glyphicon glyphicon-music
glyphicon glyphicon-search
glyphicon glyphicon-coração
glyphicon glyphicon-star
glyphicon glyphicon-estrela-vazio
glyphicon glyphicon-user
glyphicon glyphicon-filme
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-remove
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-lixo
glyphicon glyphicon-home
glyphicon arquivo glyphicon
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon download de glyphicon
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-círculo
glyphicon glyphicon-repeat
glyphicon glyphicon-atualizar
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flag
Glyphicon Glyphicon-fones de ouvido
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-código de barras
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-book
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon lista de glyphicon
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-vídeo
glyphicon glyphicon-picture
glyphicon glyphicon-map-marker
glyphicon glyphicon-ajustar
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-step-backward
glyphicon glyphicon-fast-backward
glyphicon glyphicon-backward
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-avanço rápido
glyphicon glyphicon-step-forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-esquerda
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-sinal de subtração
glyphicon glyphicon-remove-sinal
glyphicon glyphicon-ok-sign
glyphicon glyphicon-quest-sign
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-círculo
glyphicon glyphicon-seta-esquerda
glyphicon glyphicon-seta-direita
glyphicon glyphicon-seta para cima
glyphicon glyphicon-seta para baixo
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-sinal de exclamação
glyphicon glyphicon-presente
glyphicon glyphicon-folha
glyphicon glyphicon-fire
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
glyphicon glyphicon-sinal de aviso
glyphicon glyphicon-plane
glyphicon glyphicon-calendário
glyphicon glyphicon-random
glyphicon glyphicon-comentário
glyphicon glyphicon-ímã
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retuíte
glyphicon glyphicon-carrinho de compras
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-certificado
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-mão-direita
glyphicon glyphicon-mão-esquerda
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-círculo-seta-direita
glyphicon glyphicon-círculo-seta-esquerda
glyphicon glyphicon-círculo-seta para cima
glyphicon glyphicon-círculo-seta para baixo
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-tasks
glyphicon glyphicon-filter
glyphicon glyphicon-pasta
glyphicon glyphicon-tela cheia
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-coração-vazio
glyphicon glyphicon-link
glyphicon glyphicon-telefone
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-classificar-por-alfabeto
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-classificar por ordem
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-desmarcado
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-login
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-nova-janela
glyphicon registro de glyphicon
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon salvo
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-disquete
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-cartão de crédito
glyphicon glyphicon-transfer
glyphicon glyphicon-talheres
Glyphicon Glyphicon-header
glyphicon compactado com glyphicon
Glyphicon Glyphicon-fone de ouvido
glyphicon glyphicon-phone-alt
glyphicon glyphicon-torre
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-vídeo
glyphicon glyphicon-legendas
glyphicon glyphicon-som-estéreo
glyphicon glyphicon-som-dolby
glyphicon glyphicon-som-5-1
glyphicon glyphicon-som-6-1
glyphicon glyphicon-som-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-arquivo aberto
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon-paste
glyphicon glyphicon-alert
glyphicon glyphicon-equalizer
glyphicon glyphicon-rei
glyphicon glyphicon-rainha
glyphicon glyphicon-peão
glyphicon glyphicon-bispo
glyphicon glyphicon-cavaleiro
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-quadro-negro
glyphicon glyphicon-cama
glyphicon glyphicon-maçã
glyphicon glyphicon-erase
glyphicon glyphicon-ampulheta
glyphicon glyphicon-lâmpada
glyphicon glyphicon-duplicate
glyphicon glyphicon-cofrinho
glyphicon glyphicon-tesoura
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-rublo
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-com sabor de picolé
glyphicon glyphicon-educação
glyphicon glyphicon-opção-horizontal
glyphicon glyphicon-opção-vertical
glyphicon glyphicon-menu-hambúrguer
glyphicon glyphicon-modal-window
glyphicon glyphicon-óleo
glyphicon glyphicon-grain
glyphicon glyphicon-óculos de sol
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-texto-fundo
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-right
glyphicon glyphicon-triângulo-esquerda
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
Glyphicon Glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-esquerda
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up
Como usar
Por motivos de desempenho, todos os ícones exigem uma classe base e uma classe de ícone individual. Para usar, coloque o código a seguir em qualquer lugar. Certifique-se de deixar um espaço entre o ícone e o texto para o preenchimento adequado.
Não misture com outros componentes
As classes de ícones não podem ser combinadas diretamente com outros componentes. Eles não devem ser usados junto com outras classes no mesmo elemento. Em vez disso, adicione um aninhado <span>e aplique as classes de ícone ao arquivo <span>.
Apenas para uso em elementos vazios
As classes de ícones só devem ser usadas em elementos que não contenham conteúdo de texto e não tenham elementos filhos.
Alterando a localização da fonte do ícone
O Bootstrap assume que os arquivos de fonte do ícone estarão localizados no ../fonts/diretório, em relação aos arquivos CSS compilados. Mover ou renomear esses arquivos de fonte significa atualizar o CSS de três maneiras:
Altere as variáveis @icon-font-pathe/ou @icon-font-namenos arquivos Less de origem.
Use qualquer opção que melhor se adapte à sua configuração de desenvolvimento específica.
Ícones acessíveis
Versões modernas de tecnologias assistivas anunciarão conteúdo gerado por CSS, bem como caracteres Unicode específicos. Para evitar saídas não intencionais e confusas em leitores de tela (especialmente quando os ícones são usados apenas para decoração), nós os ocultamos com o aria-hidden="true"atributo.
Se você estiver usando um ícone para transmitir significado (em vez de apenas como um elemento decorativo), certifique-se de que esse significado também seja transmitido para tecnologias assistivas – por exemplo, inclua conteúdo adicional, visualmente oculto com a .sr-onlyclasse.
Se estiver criando controles sem outro texto (como um <button>que contém apenas um ícone), você deve sempre fornecer conteúdo alternativo para identificar a finalidade do controle, para que faça sentido para os usuários de tecnologias assistivas. Nesse caso, você pode adicionar um aria-labelatributo no próprio controle.
Exemplos
Use-os em botões, grupos de botões para uma barra de ferramentas, navegação ou entradas de formulário pré-anexadas.
Um ícone usado em um alerta para transmitir que é uma mensagem de erro, com .sr-onlytexto adicional para transmitir essa dica aos usuários de tecnologias assistivas.
Erro:Digite um endereço de e-mail válido
Listas suspensas
Menu contextual alternável para exibir listas de links. Tornado interativo com o plug-in JavaScript suspenso .
Exemplo
Envolva o gatilho do menu suspenso e o menu suspenso dentro de .dropdown, ou outro elemento que declare position: relative;. Em seguida, adicione o HTML do menu.
Por padrão, um menu suspenso é posicionado automaticamente 100% na parte superior e no lado esquerdo de seu pai. Adicionar .dropdown-menu-righta .dropdown-menupara alinhar à direita o menu suspenso.
Pode exigir posicionamento adicional
As listas suspensas são posicionadas automaticamente via CSS dentro do fluxo normal do documento. Isso significa que as listas suspensas podem ser cortadas pelos pais com determinadas overflowpropriedades ou aparecer fora dos limites da janela de visualização. Aborde esses problemas por conta própria à medida que eles surgirem.
.pull-rightAlinhamento obsoleto
A partir da v3.1.0, deixamos de usar os .pull-rightmenus suspensos. Para alinhar um menu à direita, use .dropdown-menu-right. Os componentes de navegação alinhados à direita na barra de navegação usam uma versão mixin dessa classe para alinhar automaticamente o menu. Para substituí-lo, use .dropdown-menu-left.
Cabeçalhos
Adicione um cabeçalho para rotular seções de ações em qualquer menu suspenso.
Agrupe uma série de botões em uma única linha com o grupo de botões. Adicione um rádio JavaScript opcional e comportamento de estilo de caixa de seleção com nosso plugin de botões .
Dicas de ferramentas e popovers em grupos de botões requerem configuração especial
Ao usar dicas de ferramentas ou popovers em elementos dentro de um .btn-group, você terá que especificar a opção container: 'body'para evitar efeitos colaterais indesejados (como o elemento ficando mais largo e/ou perdendo seus cantos arredondados quando a dica de ferramenta ou popover é acionado).
Certifique-se de que está correto rolee forneça uma etiqueta
Para que tecnologias assistivas – como leitores de tela – transmitam que uma série de botões está agrupada, um roleatributo apropriado precisa ser fornecido. Para grupos de botões, isso seria role="group", enquanto as barras de ferramentas deveriam ter um role="toolbar".
Uma exceção são os grupos que contêm apenas um único controle (por exemplo, os grupos de botões justificados com <button>elementos) ou uma lista suspensa.
Além disso, grupos e barras de ferramentas devem receber um rótulo explícito, pois a maioria das tecnologias assistivas não os anunciará, apesar da presença do roleatributo correto. Nos exemplos fornecidos aqui, usamos aria-label, mas alternativas como aria-labelledbytambém podem ser usadas.
Exemplo básico
Enrole uma série de botões .btncom .btn-group.
Barra de ferramentas do botão
Combine conjuntos de <div class="btn-group">em um <div class="btn-toolbar">para componentes mais complexos.
Dimensionamento
Em vez de aplicar classes de dimensionamento de botão a cada botão em um grupo, basta adicionar .btn-group-*a cada .btn-group, inclusive ao aninhar vários grupos.
Aninhamento
Coloque um .btn-groupdentro de outro .btn-groupquando quiser menus suspensos misturados com uma série de botões.
Faça com que um grupo de botões se estique em tamanhos iguais para abranger toda a largura de seu pai. Também funciona com menus suspensos de botões dentro do grupo de botões.
Manipulando bordas
Devido ao HTML e CSS específicos usados para justificar botões (nomeadamente display: table-cell), as bordas entre eles são duplicadas. Em grupos de botões regulares, margin-left: -1pxé usado para empilhar as bordas em vez de removê-las. Porém, marginnão funciona com display: table-cell. Como resultado, dependendo de suas personalizações no Bootstrap, você pode remover ou recolorir as bordas.
IE8 e fronteiras
O Internet Explorer 8 não renderiza bordas em botões em um grupo de botões justificado, seja ligado <a>ou <button>elementos. Para contornar isso, envolva cada botão em outro .btn-group.
Se os <a>elementos forem usados para atuar como botões – acionando a funcionalidade na página, em vez de navegar para outro documento ou seção na página atual – eles também devem receber um arquivo role="button".
Com <button>elementos
Para usar grupos de botões justificados com <button>elementos, você deve agrupar cada botão em um grupo de botões . A maioria dos navegadores não aplica corretamente nosso CSS para justificação de <button>elementos, mas como oferecemos suporte a menus suspensos de botão, podemos contornar isso.
Menus suspensos de botões
Use qualquer botão para acionar um menu suspenso, colocando-o dentro de um .btn-groupe fornecendo a marcação de menu adequada.
Dependência de plug-in
Os botões suspensos exigem que o plug -in suspenso seja incluído em sua versão do Bootstrap.
Menus suspensos de botão único
Transforme um botão em uma alternância suspensa com algumas alterações básicas de marcação.
Estenda os controles de formulário adicionando texto ou botões antes, depois ou em ambos os lados de qualquer arquivo <input>. Use .input-groupcom um .input-group-addonou .input-group-btnpara preceder ou anexar elementos a um único arquivo .form-control.
<input>Apenas textuais
Evite usar <select>elementos aqui, pois eles não podem ser totalmente estilizados em navegadores WebKit.
Evite usar <textarea>elementos aqui, pois seu rowsatributo não será respeitado em alguns casos.
Dicas de ferramentas e popovers em grupos de entrada requerem configuração especial
Ao usar dicas de ferramentas ou popovers em elementos dentro de um .input-group, você terá que especificar a opção container: 'body'para evitar efeitos colaterais indesejados (como o elemento ficando mais largo e/ou perdendo seus cantos arredondados quando a dica de ferramenta ou popover é acionado).
Não misture com outros componentes
Não misture grupos de formulários ou classes de colunas de grade diretamente com grupos de entrada. Em vez disso, aninhe o grupo de entrada dentro do grupo de formulários ou elemento relacionado à grade.
Sempre adicione marcadores
Os leitores de tela terão problemas com seus formulários se você não incluir um rótulo para cada entrada. Para esses grupos de entrada, certifique-se de que qualquer rótulo ou funcionalidade adicional seja transmitido às tecnologias assistivas.
A técnica exata a ser usada (elementos visíveis <label>, <label>elementos ocultos usando a .sr-onlyclasse ou uso do atributo aria-label, aria-labelledby, ou atributo) aria-describedbye quais informações adicionais precisarão ser transmitidas variam dependendo do tipo exato de widget de interface que você está implementando. Os exemplos nesta seção fornecem algumas abordagens sugeridas para casos específicos.titleplaceholder
Exemplo básico
Coloque um complemento ou botão em cada lado de uma entrada. Você também pode colocar um em ambos os lados de uma entrada.
Não oferecemos suporte a vários complementos ( .input-group-addonou .input-group-btn) em um único lado.
Não oferecemos suporte a vários controles de formulário em um único grupo de entrada.
Dimensionamento
Adicione as classes de dimensionamento de formulário relativo ao .input-grouppróprio e o conteúdo dentro será redimensionado automaticamente - não há necessidade de repetir as classes de tamanho de controle de formulário em cada elemento.
Caixas de seleção e complementos de rádio
Coloque qualquer caixa de seleção ou opção de rádio no complemento de um grupo de entrada em vez de texto.
Complementos de botão
Os botões nos grupos de entrada são um pouco diferentes e requerem um nível extra de aninhamento. Em vez de .input-group-addon, você precisará usar .input-group-btnpara envolver os botões. Isso é necessário devido aos estilos de navegador padrão que não podem ser substituídos.
Botões com dropdowns
Botões segmentados
Vários botões
Embora você possa ter apenas um complemento por lado, você pode ter vários botões dentro de um único arquivo .input-group-btn.
Navegadores
Navs disponíveis no Bootstrap têm marcação compartilhada, começando com a .navclasse base, bem como estados compartilhados. Troque as classes modificadoras para alternar entre cada estilo.
O uso de navs para painéis de guias requer o plug-in de guias JavaScript
Para guias com áreas tabuladas, você deve usar o plug-in JavaScript de guias . A marcação também exigirá roleatributos adicionais e ARIA – consulte a marcação de exemplo do plug-in para obter mais detalhes.
Torne os navs usados como navegação acessíveis
Se você estiver usando navs para fornecer uma barra de navegação, certifique-se de adicionar um role="navigation"ao contêiner pai mais lógico do <ul>, ou envolver um <nav>elemento em toda a navegação. Não adicione a função à <ul>própria, pois isso impediria que ela fosse anunciada como uma lista real por tecnologias assistivas.
Abas
Observe que a .nav-tabsclasse requer a .navclasse base.
Crie facilmente guias ou pílulas com larguras iguais aos seus pais em telas maiores que 768px com .nav-justified. Em telas menores, os links de navegação são empilhados.
Atualmente, os links de navegação da barra de navegação justificados não são suportados.
Safari e navegação justificada responsiva
A partir da v9.1.2, o Safari exibe um bug no qual redimensionar seu navegador horizontalmente causa erros de renderização na navegação justificada que são limpos na atualização. Este bug também é mostrado no exemplo de navegação justificada .
Navbars são metacomponentes responsivos que servem como cabeçalhos de navegação para seu aplicativo ou site. Eles começam recolhidos (e podem ser alternados) em visualizações móveis e se tornam horizontais à medida que a largura da janela de visualização disponível aumenta.
Atualmente, os links de navegação da barra de navegação justificados não são suportados.
Conteúdo transbordando
Como o Bootstrap não sabe quanto espaço o conteúdo em sua barra de navegação precisa, você pode ter problemas com o conteúdo agrupado em uma segunda linha. Para resolver isso, você pode:
Reduza a quantidade ou largura dos itens da barra de navegação.
Altere o ponto em que sua barra de navegação alterna entre o modo recolhido e horizontal. Personalize a @grid-float-breakpointvariável ou adicione sua própria consulta de mídia.
Requer plug-in JavaScript
Se o JavaScript estiver desabilitado e a janela de visualização for estreita o suficiente para que a barra de navegação seja recolhida, será impossível expandir a barra de navegação e visualizar o conteúdo dentro do arquivo .navbar-collapse.
A barra de navegação responsiva requer que o plugin de recolhimento seja incluído em sua versão do Bootstrap.
Alterando o ponto de interrupção da barra de navegação móvel recolhido
A barra de navegação é recolhida em sua visualização móvel vertical quando a viewport é mais estreita que @grid-float-breakpoint, e se expande em sua visualização horizontal não móvel quando a viewport tem pelo menos @grid-float-breakpointlargura. Ajuste esta variável na fonte Less para controlar quando a barra de navegação é recolhida/expandida. O valor padrão é 768px(a menor tela "pequena" ou "tablet").
Torne as barras de navegação acessíveis
Certifique-se de usar um <nav>elemento ou, se estiver usando um elemento mais genérico, como um <div>, adicione um role="navigation"a cada barra de navegação para identificá-lo explicitamente como uma região de referência para usuários de tecnologias assistivas.
Imagem de marca
Substitua a marca da barra de navegação pela sua própria imagem, trocando o texto por um <img>. Como o .navbar-brandtem seu próprio preenchimento e altura, pode ser necessário substituir algum CSS dependendo da sua imagem.
Formulários
Coloque o conteúdo do formulário .navbar-formpara alinhamento vertical adequado e comportamento recolhido em viewports estreitas. Use as opções de alinhamento para decidir onde ele reside no conteúdo da barra de navegação.
Como um aviso, .navbar-formcompartilha grande parte de seu código .form-inlinevia mixin. Alguns controles de formulário, como grupos de entrada, podem exigir que larguras fixas sejam exibidas corretamente em uma barra de navegação.
Os leitores de tela terão problemas com seus formulários se você não incluir um rótulo para cada entrada. Para esses formulários embutidos, você pode ocultar os rótulos usando a .sr-onlyclasse. Existem outros métodos alternativos de fornecer um rótulo para tecnologias assistivas, como o atributo aria-label, aria-labelledbyou . titleSe nenhum deles estiver presente, os leitores de tela podem recorrer ao uso do placeholderatributo, se presente, mas observe que o uso de placeholdercomo substituto de outros métodos de rotulagem não é recomendado.
Botões
Adicione a .navbar-btnclasse aos <button>elementos que não residem em a <form>para centralizá-los verticalmente na barra de navegação.
Uso específico do contexto
Como as classes de botão padrão , .navbar-btnpode ser usado em elementos <a>e <input>. No entanto, .navbar-btnnem as classes de botão padrão devem ser usadas em <a>elementos dentro de .navbar-nav.
Texto
Enrole strings de texto em um elemento com .navbar-text, geralmente em uma <p>tag para obter a cor e o início adequados.
Links não-nav
Para pessoas que usam links padrão que não estão no componente de navegação regular da barra de navegação, use a .navbar-linkclasse para adicionar as cores apropriadas para as opções padrão e inversa da barra de navegação.
Alinhamento de componentes
Alinhe links de navegação, formulários, botões ou texto, usando as classes de utilitário .navbar-leftou . .navbar-rightAmbas as classes adicionarão um float CSS na direção especificada. Por exemplo, para alinhar links de navegação, coloque-os em separado <ul>com a respectiva classe de utilitário aplicada.
Essas classes são versões mistas de .pull-lefte .pull-right, mas têm como escopo consultas de mídia para facilitar o manuseio dos componentes da barra de navegação em todos os tamanhos de dispositivo.
Alinhando vários componentes à direita
Atualmente, as barras de navegação têm uma limitação com várias .navbar-rightclasses. Para espaçar o conteúdo adequadamente, usamos margem negativa no último .navbar-rightelemento. Quando há vários elementos usando essa classe, essas margens não funcionam conforme o esperado.
Revisitaremos isso quando pudermos reescrever esse componente na v4.
Fixo para cima
Adicione .navbar-fixed-tope inclua um .containerou .container-fluidpara centralizar e preencher o conteúdo da barra de navegação.
Acolchoamento corporal necessário
A barra de navegação fixa sobreporá seu outro conteúdo, a menos que você adicione paddingao topo do arquivo <body>. Experimente seus próprios valores ou use nosso snippet abaixo. Dica: Por padrão, a barra de navegação tem 50px de altura.
Certifique-se de incluir isso após o CSS principal do Bootstrap.
Fixo para baixo
Adicione .navbar-fixed-bottome inclua um .containerou .container-fluidpara centralizar e preencher o conteúdo da barra de navegação.
Acolchoamento corporal necessário
A barra de navegação fixa sobreporá seu outro conteúdo, a menos que você adicione paddingà parte inferior do arquivo <body>. Experimente seus próprios valores ou use nosso snippet abaixo. Dica: Por padrão, a barra de navegação tem 50px de altura.
Certifique-se de incluir isso após o CSS principal do Bootstrap.
Parte superior estática
Crie uma barra de navegação de largura total que rola com a página adicionando .navbar-static-tope incluindo um .containerou .container-fluidpara centralizar e preencher o conteúdo da barra de navegação.
Ao contrário das .navbar-fixed-*classes, você não precisa alterar nenhum preenchimento no arquivo body.
Barra de navegação invertida
Modifique a aparência da barra de navegação adicionando .navbar-inverse.
Migalhas de pão
Indique a localização da página atual dentro de uma hierarquia de navegação.
Os separadores são adicionados automaticamente no CSS por meio de :beforee content.
Forneça links de paginação para seu site ou aplicativo com o componente de paginação de várias páginas ou a alternativa de pager mais simples .
Paginação padrão
Paginação simples inspirada no Rdio, ótima para aplicativos e resultados de pesquisa. O bloco grande é difícil de perder, facilmente escalável e oferece grandes áreas de clique.
Rotulando o componente de paginação
O componente de paginação deve ser encapsulado em um <nav>elemento para identificá-lo como uma seção de navegação para leitores de tela e outras tecnologias assistivas. Além disso, como é provável que uma página já tenha mais de uma seção de navegação (como a navegação principal no cabeçalho ou uma navegação na barra lateral), é aconselhável fornecer um descritivo aria-labelque <nav>reflita sua finalidade. Por exemplo, se o componente de paginação for usado para navegar entre um conjunto de resultados de pesquisa, um rótulo apropriado poderá ser aria-label="Search results pages".
Estados desativados e ativos
Os links são personalizáveis para diferentes circunstâncias. Use .disabledpara links não clicáveis e .activepara indicar a página atual.
Recomendamos que você troque as âncoras ativas ou desabilitadas por <span>, ou omita a âncora no caso das setas anterior/seguinte, para remover a funcionalidade de clique enquanto retém os estilos pretendidos.
Dimensionamento
Gosta de paginação maior ou menor? Adicione .pagination-lgou .pagination-smpara tamanhos adicionais.
Pager
Links rápidos anteriores e seguintes para implementações simples de paginação com marcação e estilos leves. É ótimo para sites simples como blogs ou revistas.
Exemplo padrão
Por padrão, o pager centraliza os links.
Links alinhados
Alternativamente, você pode alinhar cada link aos lados:
Estado desativado opcional
Os links do pager também usam a .disabledclasse de utilitário geral da paginação.
Rótulos
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
Variações disponíveis
Adicione qualquer uma das classes modificadoras mencionadas abaixo para alterar a aparência de um rótulo.
Aviso de informações de sucesso primárias padrão Perigo
Tem toneladas de rótulos?
Problemas de renderização podem surgir quando você tem dezenas de rótulos embutidos em um contêiner estreito, cada um contendo seu próprio inline-blockelemento (como um ícone). A maneira de contornar isso é definir display: inline-block;. Para contexto e um exemplo, consulte #13219 .
Distintivos
Realce facilmente itens novos ou não lidos adicionando um <span class="badge">a links, navs Bootstrap e muito mais.
Quando não houver itens novos ou não lidos, os emblemas simplesmente serão recolhidos (através do :emptyseletor de CSS), desde que não haja conteúdo dentro deles.
Compatibilidade entre navegadores
Os emblemas não serão recolhidos automaticamente no Internet Explorer 8 porque não há suporte para o :emptyseletor.
Adapta-se aos estados de navegação ativos
Estilos integrados estão incluídos para colocar crachás em estados ativos em navegações de pílulas.
Para tornar o jumbotron de largura total e sem cantos arredondados, coloque-o fora de todos os .containers e, em vez disso, adicione um .containerdentro.
Cabeçalho da página
Um shell simples para h1espaçar e segmentar adequadamente seções de conteúdo em uma página. Ele pode utilizar o elemento h1padrão do 's small, assim como a maioria dos outros componentes (com estilos adicionais).
Exemplo de cabeçalho de página Subtexto para cabeçalho
Miniaturas
Estenda o sistema de grade do Bootstrap com o componente de miniatura para exibir facilmente grades de imagens, vídeos, texto e muito mais.
Se você estiver procurando por uma apresentação semelhante ao Pinterest de miniaturas de alturas e/ou larguras variadas, precisará usar um plug-in de terceiros, como Masonry , Isotope ou Salvattore .
Exemplo padrão
Por padrão, as miniaturas do Bootstrap são projetadas para mostrar imagens vinculadas com marcação mínima necessária.
Conteúdo personalizado
Com um pouco de marcação extra, é possível adicionar qualquer tipo de conteúdo HTML como títulos, parágrafos ou botões em miniaturas.
Rótulo da 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.
Forneça mensagens de feedback contextuais para ações típicas do usuário com um punhado de mensagens de alerta flexíveis e disponíveis.
Exemplos
Envolva qualquer texto e um botão de dispensa opcional em .alertuma das quatro classes contextuais (por exemplo, .alert-success) para mensagens básicas de alerta.
Nenhuma classe padrão
Os alertas não possuem classes padrão, apenas classes base e modificadoras. Um alerta cinza padrão não faz muito sentido, então você precisa especificar um tipo por meio de uma classe contextual. Escolha entre sucesso, informação, aviso ou perigo.
Bem feito! Você leu com sucesso esta importante mensagem de alerta.
Atenção! Este alerta precisa de sua atenção, mas não é super importante.
Aviso! Melhor verificar você mesmo, você não está parecendo muito bem.
Oh sôfrego! Altere algumas coisas e tente enviar novamente.
Alertas descartáveis
Crie em qualquer alerta adicionando um .alert-dismissiblebotão opcional e fechar.
Forneça feedback atualizado sobre o andamento de um fluxo de trabalho ou ação com barras de progresso simples e flexíveis.
Compatibilidade entre navegadores
As barras de progresso usam transições e animações CSS3 para obter alguns de seus efeitos. Esses recursos não são compatíveis com o Internet Explorer 9 e versões anteriores ou anteriores do Firefox. O Opera 12 não suporta animações.
Compatibilidade com a Política de Segurança de Conteúdo (CSP)
Se o seu site tiver uma Política de segurança de conteúdo (CSP) que não permite style-src 'unsafe-inline', você não poderá usar styleatributos embutidos para definir as larguras da barra de progresso, conforme mostrado em nossos exemplos abaixo. Métodos alternativos para definir as larguras que são compatíveis com CSPs estritos incluem o uso de um pouco de JavaScript personalizado (que define element.style.width) ou o uso de classes CSS personalizadas.
Exemplo básico
Barra de progresso padrão.
60% concluído
Com etiqueta
Remova a classe <span>com .sr-onlyda barra de progresso para mostrar uma porcentagem visível.
60%
Para garantir que o texto do rótulo permaneça legível mesmo para porcentagens baixas, considere adicionar um min-widthà barra de progresso.
0%
2%
Alternativas contextuais
As barras de progresso usam algumas das mesmas classes de botão e alerta para estilos consistentes.
40% Concluído (sucesso)
20% concluído
60% concluído (aviso)
80% Completo (perigo)
Listrado
Usa um gradiente para criar um efeito listrado. Não disponível no IE9 e abaixo.
40% Concluído (sucesso)
20% concluído
60% concluído (aviso)
80% Completo (perigo)
Animado
Adicione .activea .progress-bar-stripedpara animar as listras da direita para a esquerda. Não disponível no IE9 e abaixo.
45% concluído
Empilhado
Coloque várias barras no mesmo .progresspara empilhá-las.
35% Concluído (sucesso)
20% Concluído (aviso)
10% Completo (perigo)
Objeto de mídia
Estilos de objetos abstratos para a construção de vários tipos de componentes (como comentários de blog, Tweets, etc.) que apresentam uma imagem alinhada à esquerda ou à direita ao lado do conteúdo textual.
Mídia padrão
A mídia padrão exibe um objeto de mídia (imagens, vídeo, áudio) à esquerda ou à direita de um bloco de conteúdo.
Título de mídia
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis em faucibus.
Título de mídia
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis em faucibus.
Título de mídia aninhado
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis em faucibus.
Título de mídia
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Título de mídia
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
As classes .pull-lefte .pull-righttambém existem e foram usadas anteriormente como parte do componente de mídia, mas estão obsoletas para esse uso a partir da v3.3.0. Eles são aproximadamente equivalentes a .media-lefte .media-right, exceto que .media-rightdevem ser colocados após o .media-bodyno html.
Alinhamento de mídia
As imagens ou outras mídias podem ser alinhadas na parte superior, central ou inferior. O padrão é o alinhamento superior.
Mídia alinhada no topo
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis em 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.
Mídia alinhada ao meio
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis em 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.
Mídia alinhada por baixo
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis em 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 mídia
Com um pouco de marcação extra, você pode usar mídia dentro da lista (útil para tópicos de comentários ou listas de artigos).
Título de mídia
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Título de mídia aninhado
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Título de mídia aninhado
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Título de mídia aninhado
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Listar grupo
Os grupos de listas são um componente flexível e poderoso para exibir não apenas listas simples de elementos, mas também listas complexas com conteúdo personalizado.
Exemplo básico
O grupo de lista mais básico é simplesmente uma lista não ordenada com itens de lista e as classes apropriadas. Construa sobre ele com as opções a seguir, ou seu próprio CSS, conforme necessário.
Cras justo odio
Dapibus ac facilisis em
Morbi Leo Risus
Porta ac consectetur ac
Vestíbulo em eros
Distintivos
Adicione o componente de emblemas a qualquer item do grupo de lista e ele será posicionado automaticamente à direita.
14Cras justo odio
2Dapibus ac facilisis em
1Morbi Leo Risus
Itens vinculados
Vincule itens de grupo de lista usando tags âncora em vez de itens de lista (isso também significa um pai <div>em vez de um <ul>). Não há necessidade de pais individuais em torno de cada elemento.
Os itens do grupo de lista podem ser botões em vez de itens de lista (isso também significa um pai <div>em vez de um <ul>). Não há necessidade de pais individuais em torno de cada elemento. Não use as .btnclasses padrão aqui.
Itens desativados
Adicione .disableda um .list-group-itempara torná-lo cinza para parecer desabilitado.
Embora nem sempre seja necessário, às vezes você precisa colocar seu DOM em uma caixa. Para essas situações, experimente o componente de painel.
Exemplo básico
Por padrão, tudo o .panelque faz é aplicar alguma borda e preenchimento básicos para conter algum conteúdo.
Exemplo de painel básico
Painel com título
Adicione facilmente um contêiner de título ao seu painel com o .panel-heading. Você também pode incluir qualquer <h1>- <h6>com uma .panel-titleclasse para adicionar um título pré-estilizado. No entanto, os tamanhos de fonte de <h1>- <h6>são substituídos por .panel-heading.
Para colorir corretamente os links, certifique-se de colocar os links nos títulos dentro de .panel-title.
Título do painel sem título
Conteúdo do painel
Título do painel
Conteúdo do painel
Painel com rodapé
Enrole botões ou texto secundário em .panel-footer. Observe que os rodapés do painel não herdam cores e bordas ao usar variações contextuais, pois não devem estar em primeiro plano.
Conteúdo do painel
Alternativas contextuais
Assim como outros componentes, torne facilmente um painel mais significativo para um contexto específico adicionando qualquer uma das classes de estado contextual.
Título do painel
Conteúdo do painel
Título do painel
Conteúdo do painel
Título do painel
Conteúdo do painel
Título do painel
Conteúdo do painel
Título do painel
Conteúdo do painel
Com mesas
Adicione qualquer sem borda .tabledentro de um painel para um design perfeito. Se houver um .panel-body, adicionamos uma borda extra ao topo da tabela para separação.
Título do painel
Algum conteúdo do painel padrão aqui. 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.
#
Primeiro nome
Sobrenome
Nome de usuário
1
Marca
Otto
@mdo
2
Jacó
Thornton
@gordo
3
Larry
o pássaro
@Twitter
Se não houver corpo do painel, o componente se move do cabeçalho do painel para a mesa sem interrupção.
Algum conteúdo do painel padrão aqui. 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 em
Morbi Leo Risus
Porta ac consectetur ac
Vestíbulo em eros
Incorporação responsiva
Permita que os navegadores determinem as dimensões do vídeo ou da apresentação de slides com base na largura do bloco que o contém, criando uma proporção intrínseca que será dimensionada adequadamente em qualquer dispositivo.
As regras são aplicadas diretamente aos elementos <iframe>, <embed>, <video>e <object>; opcionalmente, use uma classe descendente explícita .embed-responsive-itemquando quiser combinar o estilo de outros atributos.
Dica profissional! Você não precisa incluir frameborder="0"em seus <iframe>s, pois substituímos isso para você.
Poços
Padrão bem
Use o poço como um efeito simples em um elemento para dar a ele um efeito de inserção.
Olha, eu estou em um poço!
Aulas opcionais
Controle de preenchimento e cantos arredondados com duas classes de modificadores opcionais.