Download

Bootstrap (atualmente v3.4.1) tem algumas maneiras fáceis de começar rapidamente, cada uma apelando para um nível de habilidade diferente e caso de uso. Leia para ver o que se adapta às suas necessidades específicas.

jsDelivrGenericName

O pessoal da jsDelivr gentilmente fornece suporte CDN para CSS e JavaScript do Bootstrap. Basta usar esses links jsDelivr .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Instalar com Bower

Você também pode instalar e gerenciar Less, CSS, JavaScript e fontes do Bootstrap usando Bower :

bower install bootstrap

Instalar com npm

Você também pode instalar o Bootstrap usando npm :

npm install bootstrap@3

require('bootstrap')irá carregar todos os plugins jQuery do Bootstrap no objeto jQuery. O bootstrapmódulo em si não exporta nada. Você pode carregar manualmente os plugins jQuery do Bootstrap individualmente carregando os /js/*.jsarquivos no diretório de nível superior do pacote.

O Bootstrap package.jsoncontém alguns metadados adicionais nas seguintes chaves:

• less- caminho para o arquivo de origem Less principal do Bootstrap
• style- caminho para o CSS não minificado do Bootstrap que foi pré-compilado usando as configurações padrão (sem personalização)

Instalar com o Composer

Você também pode instalar e gerenciar Less, CSS, JavaScript e fontes do Bootstrap usando o Composer :

composer require twbs/bootstrap

Autoprefixador necessário para Less/Sass

Bootstrap usa Autoprefixer para lidar com prefixos de fornecedores CSS . Se você estiver compilando o Bootstrap de sua fonte Less/Sass e não estiver usando nosso Gruntfile, você precisará integrar o Autoprefixer em seu processo de compilação. Se você estiver usando o Bootstrap pré-compilado ou usando nosso Gruntfile, você não precisa se preocupar com isso porque o Autoprefixer já está integrado ao nosso Gruntfile.

O que está incluído

O Bootstrap pode ser baixado em duas formas, nas quais você encontrará os seguintes diretórios e arquivos, agrupando logicamente recursos comuns e fornecendo variações compiladas e minificadas.

Bootstrap pré-compilado

Uma vez baixado, descompacte a pasta compactada para ver a estrutura do Bootstrap (compilado). Você verá algo assim:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Esta é a forma mais básica de Bootstrap: arquivos pré-compilados para uso rápido em praticamente qualquer projeto da web. Fornecemos CSS e JS compilados ( bootstrap.*), bem como CSS e JS compilados e minificados ( bootstrap.min.*). Os mapas de origem CSS ( bootstrap.*.map) estão disponíveis para uso com ferramentas de desenvolvedor de determinados navegadores. Fontes de Glyphicons estão incluídas, assim como o tema Bootstrap opcional.

Código fonte do bootstrap

O download do código-fonte do Bootstrap inclui CSS, JavaScript e recursos de fonte pré-compilados, juntamente com fonte Less, JavaScript e documentação. Mais especificamente, inclui o seguinte e mais:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

Os less/, js/e fonts/são o código-fonte para nossas fontes CSS, JS e ícone (respectivamente). A dist/pasta inclui tudo listado na seção de download pré-compilada acima. A docs/pasta inclui o código-fonte da nossa documentação e examples/do uso do Bootstrap. Além disso, qualquer outro arquivo incluído fornece suporte para pacotes, informações de licença e desenvolvimento.

Compilando CSS e JavaScript

O Bootstrap usa o Grunt para seu sistema de compilação, com métodos convenientes para trabalhar com o framework. É como compilamos nosso código, executamos testes e muito mais.

Instalando o Grunt

Para instalar o Grunt, você deve primeiro baixar e instalar o node.js (que inclui o npm). npm significa módulos empacotados de nó e é uma maneira de gerenciar dependências de desenvolvimento por meio de node.js.

1. Instale grunt-cliglobalmente com npm install -g grunt-cli.
2. Navegue até o diretório raiz /bootstrap/e execute npm install. O npm examinará o package.jsonarquivo e instalará automaticamente as dependências locais necessárias listadas lá.

Quando concluído, você poderá executar os vários comandos do Grunt fornecidos na linha de comando.

Comandos Grunt disponíveis

grunt dist(Basta compilar CSS e JavaScript)

Regenera o /dist/diretório com arquivos CSS e JavaScript compilados e reduzidos. Como usuário do Bootstrap, este é normalmente o comando que você deseja.

grunt watch(Ver)

Observa os arquivos de origem do Less e os recompila automaticamente para CSS sempre que você salva uma alteração.

grunt test(Faça testes)

Executa JSHint e executa os testes QUnit em navegadores reais graças ao Karma .

grunt docs(Crie e teste os recursos de documentos)

Cria e testa CSS, JavaScript e outros ativos que são usados ​​ao executar a documentação localmente via bundle exec jekyll serve.

grunt(Construa absolutamente tudo e execute testes)

Compila e reduz CSS e JavaScript, cria o site de documentação, executa o validador HTML5 nos documentos, regenera os ativos do Customizer e muito mais. Requer Jekyll . Geralmente necessário apenas se você estiver hackeando o próprio Bootstrap.

Solução de problemas

Se você encontrar problemas com a instalação de dependências ou execução de comandos do Grunt, primeiro exclua o /node_modules/diretório gerado pelo npm. Em seguida, execute novamente npm install.

Modelo básico

Comece com este modelo HTML básico ou modifique esses exemplos . Esperamos que você personalize nossos modelos e exemplos, adaptando-os às suas necessidades.

Copie o HTML abaixo para começar a trabalhar com um documento Bootstrap mínimo.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Exemplos

Construa no modelo básico acima com muitos componentes do Bootstrap. Incentivamos você a personalizar e adaptar o Bootstrap para atender às necessidades de seu projeto individual.

Obtenha o código-fonte para cada exemplo abaixo baixando o repositório Bootstrap . Exemplos podem ser encontrados no docs/examples/diretório.

Usando o quadro

Modelo inicial

Nada além do básico: CSS e JavaScript compilados junto com um contêiner.

Tema de inicialização

Carregue o tema Bootstrap opcional para uma experiência visualmente aprimorada.

Grades

Vários exemplos de layouts de grade com todas as quatro camadas, aninhamento e muito mais.

Jumbotron

Construa em torno do jumbotron com uma barra de navegação e algumas colunas de grade básicas.

Jumbotron estreito

Crie uma página mais personalizada restringindo o contêiner e o jumbotron padrão.

Navbars em ação

Barra de navegação

Modelo super básico que inclui a barra de navegação junto com algum conteúdo adicional.

Barra de navegação superior estática

Modelo super básico com uma barra de navegação superior estática junto com algum conteúdo adicional.

Barra de navegação fixa

Modelo super básico com uma barra de navegação superior fixa junto com algum conteúdo adicional.

Componentes personalizados

Cobrir

Um modelo de uma página para criar páginas iniciais simples e bonitas.

Carrossel

Personalize a barra de navegação e o carrossel e adicione alguns novos componentes.

Blogue

Layout de blog simples de duas colunas com navegação, cabeçalho e tipo personalizados.

Painel

Estrutura básica para um painel de administração com barra lateral e barra de navegação fixas.

Página de login

Layout e design de formulário personalizado para um formulário de entrada simples.

Navegação justificada

Crie uma barra de navegação personalizada com links justificados. Atenção! Não muito amigável ao Safari.

Rodapé fixo

Anexe um rodapé à parte inferior da viewport quando o conteúdo for menor que ele.

Rodapé pegajoso com barra de navegação

Anexe um rodapé na parte inferior da viewport com uma barra de navegação fixa na parte superior.

Experimentos

Bootstrap não responsivo

Desative facilmente a capacidade de resposta do Bootstrap de acordo com nossos documentos .

Fora da tela

Crie um menu de navegação off-canvas alternável para uso com o Bootstrap.

Ferramentas

Bootlint

Bootlint é a ferramenta oficial de linter HTML do Bootstrap. Ele verifica automaticamente vários erros comuns de HTML em páginas da Web que estão usando o Bootstrap de uma maneira bastante "baunilha". Os componentes/widgets do Vanilla Bootstrap requerem que suas partes do DOM estejam em conformidade com certas estruturas. O Bootlint verifica se as instâncias dos componentes do Bootstrap têm HTML estruturado corretamente. Considere adicionar o Bootlint à sua cadeia de ferramentas de desenvolvimento web Bootstrap para que nenhum dos erros comuns retarde o desenvolvimento do seu projeto.

Comunidade

Mantenha-se atualizado sobre o desenvolvimento do Bootstrap e entre em contato com a comunidade com esses recursos úteis.

• Leia e assine o Blog Oficial do Bootstrap .
• Converse com outros Bootstrappers usando IRC no irc.freenode.netservidor, no canal ##bootstrap .
• Para obter ajuda com o Bootstrap, pergunte no StackOverflow usando a tagtwitter-bootstrap-3 .
• Os desenvolvedores devem usar a palavra-chave bootstrapem pacotes que modificam ou adicionam à funcionalidade do Bootstrap ao distribuir por meio de npm ou mecanismos de entrega semelhantes para máxima descoberta.
• Encontre exemplos inspiradores de pessoas construindo com Bootstrap na Bootstrap Expo .

Você também pode seguir @getbootstrap no Twitter para as últimas fofocas e vídeos musicais incríveis.

Desativando a capacidade de resposta

O Bootstrap adapta automaticamente suas páginas para vários tamanhos de tela. Veja como desativar esse recurso para que sua página funcione como este exemplo sem resposta .

Etapas para desativar a capacidade de resposta da página

1. Omita a janela de visualização <meta>mencionada nos documentos CSS
2. Substitua o widthpara .containercada camada de grade com uma única largura, por exemplo, width: 970px !important;certifique-se de que isso venha após o CSS do Bootstrap padrão. Opcionalmente, você pode evitar as !importantconsultas de mídia ou algum seletor-fu.
3. Se estiver usando navbars, remova todo o comportamento de recolhimento e expansão da navbar.
4. Para layouts de grade, use .col-xs-*classes além ou no lugar das médias/grandes. Não se preocupe, a grade do dispositivo extra-pequeno é dimensionada para todas as resoluções.

Você ainda precisará do Respond.js para IE8 (já que nossas consultas de mídia ainda estão lá e precisam ser processadas). Isso desativa os aspectos de "site móvel" do Bootstrap.

Modelo de bootstrap com capacidade de resposta desabilitada

Aplicamos essas etapas a um exemplo. Leia seu código-fonte para ver as alterações específicas implementadas.

Ver exemplo não responsivo

Suporte a navegadores e dispositivos

O Bootstrap foi desenvolvido para funcionar melhor nos navegadores móveis e de desktop mais recentes, o que significa que os navegadores mais antigos podem exibir renderizações com estilos diferentes, embora totalmente funcionais, de determinados componentes.

Navegadores compatíveis

Especificamente, oferecemos suporte às versões mais recentes dos seguintes navegadores e plataformas.

Navegadores alternativos que usam a versão mais recente do WebKit, Blink ou Gecko, seja diretamente ou por meio da API de visualização da web da plataforma, não são explicitamente suportados. No entanto, o Bootstrap deve (na maioria dos casos) ser exibido e funcionar corretamente nesses navegadores também. Informações de suporte mais específicas são fornecidas abaixo.

Dispositivos móveis

De um modo geral, o Bootstrap suporta as versões mais recentes dos navegadores padrão de cada plataforma principal. Observe que os navegadores proxy (como Opera Mini, modo Turbo do Opera Mobile, UC Browser Mini, Amazon Silk) não são suportados.

Navegadores de desktop

Da mesma forma, as versões mais recentes da maioria dos navegadores de desktop são suportadas.

No Windows, oferecemos suporte ao Internet Explorer 8-11 .

Para o Firefox, além da versão estável normal mais recente, também oferecemos suporte à versão mais recente do Extended Support Release (ESR) do Firefox.

Não oficialmente, o Bootstrap deve parecer e se comportar bem o suficiente no Chromium e no Chrome para Linux, Firefox para Linux e Internet Explorer 7, bem como no Microsoft Edge, embora não sejam oficialmente suportados.

Para obter uma lista de alguns dos bugs do navegador com os quais o Bootstrap precisa lidar, consulte nosso Mural de bugs do navegador .

Internet Explorer 8 e 9

O Internet Explorer 8 e 9 também são suportados, no entanto, esteja ciente de que algumas propriedades CSS3 e elementos HTML5 não são totalmente suportados por esses navegadores. Além disso, o Internet Explorer 8 requer o uso de Respond.js para habilitar o suporte de consulta de mídia.

Visite Posso usar... para obter detalhes sobre o suporte do navegador aos recursos CSS3 e HTML5.

Internet Explorer 8 e Respond.js

Cuidado com as advertências a seguir ao usar o Respond.js em seus ambientes de desenvolvimento e produção para o Internet Explorer 8.

Respond.js e CSS de vários domínios

O uso de Respond.js com CSS hospedado em um (sub)domínio diferente (por exemplo, em um CDN) requer algumas configurações adicionais. Consulte os documentos do Respond.js para obter detalhes.

Respond.js efile://

Devido às regras de segurança do navegador, o Respond.js não funciona com páginas visualizadas por meio do file://protocolo (como ao abrir um arquivo HTML local). Para testar recursos responsivos no IE8, visualize suas páginas por HTTP(S). Consulte os documentos do Respond.js para obter detalhes.

Respond.js e@import

Respond.js não funciona com CSS referenciado via @import. Em particular, algumas configurações do Drupal são conhecidas por usar @import. Consulte os documentos do Respond.js para obter detalhes.

Internet Explorer 8 e dimensionamento de caixa

O IE8 não oferece suporte total box-sizing: border-box;quando combinado com min-width, max-width, min-heightou max-height. Por esse motivo, a partir da v3.0.1, não usamos mais max-widthem .containers.

Internet Explorer 8 e @font-face

O IE8 tem alguns problemas @font-facequando combinado com o :before. Bootstrap usa essa combinação com seus Glyphicons. Se uma página é armazenada em cache e carregada sem o mouse sobre a janela (ou seja, pressione o botão atualizar ou carregue algo em um iframe), a página será renderizada antes que a fonte seja carregada. Passar o mouse sobre a página (corpo) mostrará alguns dos ícones e passar o mouse sobre os ícones restantes também os mostrará. Consulte a edição nº 13863 para obter detalhes.

Modos de compatibilidade do IE

Bootstrap não tem suporte nos modos de compatibilidade antigos do Internet Explorer. Para ter certeza de que você está usando o modo de renderização mais recente para o IE, considere incluir a <meta>tag apropriada em suas páginas:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Confirme o modo documento abrindo as ferramentas de depuração: pressione F12e marque o "Modo Documento".

Essa tag está incluída em toda a documentação e exemplos do Bootstrap para garantir a melhor renderização possível em cada versão suportada do Internet Explorer.

Consulte esta pergunta do StackOverflow para obter mais informações.

Internet Explorer 10 no Windows 8 e Windows Phone 8

O Internet Explorer 10 não diferencia a largura do dispositivo da largura da janela de visualização e, portanto, não aplica corretamente as consultas de mídia no CSS do Bootstrap. Normalmente, você apenas adicionaria um snippet rápido de CSS para corrigir isso:

@-ms-viewport       { width: device-width; }

No entanto, isso não funciona para dispositivos que executam versões do Windows Phone 8 anteriores à Atualização 3 (também conhecida como GDR3) , pois faz com que esses dispositivos mostrem uma visão principalmente da área de trabalho em vez de uma visão estreita do "telefone". Para resolver isso, você precisará incluir o seguinte CSS e JavaScript para contornar o bug .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Para obter mais informações e diretrizes de uso, leia Windows Phone 8 e Device-Width .

Como um aviso, incluímos isso em toda a documentação e exemplos do Bootstrap como demonstração.

Arredondamento percentual do Safari

O mecanismo de renderização das versões do Safari anteriores à v7.1 para OS X e Safari para iOS v8.0 teve alguns problemas com o número de casas decimais usadas em nossas .col-*-1classes de grade. Portanto, se você tivesse 12 colunas de grade individuais, notaria que elas ficaram aquém em comparação com outras linhas de colunas. Além de atualizar o Safari/iOS, você tem algumas opções de soluções alternativas:

• Adicione .pull-rightà sua última coluna de grade para obter o alinhamento à direita
• Ajuste suas porcentagens manualmente para obter o arredondamento perfeito para o Safari (mais difícil que a primeira opção)

Modais, navbars e teclados virtuais

Estouro e rolagem

O suporte para overflow: hiddeno <body>elemento é bastante limitado no iOS e no Android. Para esse fim, quando você passar pela parte superior ou inferior de um modal nos navegadores desses dispositivos, o <body>conteúdo começará a rolar. Consulte o bug do Chrome nº 175502 (corrigido no Chrome v40) e o bug do WebKit nº 153852 .

Campos de texto e rolagem do iOS

A partir do iOS 9.3, enquanto um modal estiver aberto, se o toque inicial de um gesto de rolagem estiver dentro do limite de um textual <input>ou um <textarea>, o <body>conteúdo abaixo do modal será rolado em vez do próprio modal. Veja o erro #153856 do WebKit .

Teclados virtuais

Além disso, observe que, se você estiver usando uma barra de navegação fixa ou usando entradas em um modal, o iOS tem um bug de renderização que não atualiza a posição dos elementos fixos quando o teclado virtual é acionado. Algumas soluções alternativas para isso incluem transformar seus elementos position: absoluteou invocar um temporizador em foco para tentar corrigir o posicionamento manualmente. Isso não é tratado pelo Bootstrap, portanto, cabe a você decidir qual solução é melhor para seu aplicativo.

Listas suspensas da barra de navegação

O .dropdown-backdropelemento não é usado no iOS na navegação devido à complexidade do z-indexing. Assim, para fechar dropdowns em navbars, você deve clicar diretamente no elemento dropdown (ou qualquer outro elemento que irá disparar um evento click no iOS ).

Zoom do navegador

O zoom de página inevitavelmente apresenta artefatos de renderização em alguns componentes, tanto no Bootstrap quanto no resto da web. Dependendo do problema, podemos corrigi-lo (pesquise primeiro e depois abra um problema, se necessário). No entanto, tendemos a ignorá-los, pois eles geralmente não têm solução direta além de soluções alternativas.

Fixo :hover/ :focusno celular

Mesmo que o pairar real não seja possível na maioria das telas sensíveis ao toque, a maioria dos navegadores móveis emula o suporte ao pairar e torna :hover"pegajoso". Em outras palavras, :hoveros estilos começam a ser aplicados depois de tocar em um elemento e só param de aplicar depois que o usuário toca em algum outro elemento. Isso pode fazer com que os estados do Bootstrap :hoverfiquem indesejavelmente "presos" em tais navegadores. Alguns navegadores móveis também tornam-se :focusigualmente pegajosos. Atualmente, não há solução simples para esses problemas além de remover totalmente esses estilos.

Impressão

Mesmo em alguns navegadores modernos, a impressão pode ser peculiar.

Em particular, a partir do Chrome v32 e independentemente das configurações de margem, o Chrome usa uma largura da janela de visualização significativamente mais estreita do que o tamanho do papel físico ao resolver consultas de mídia ao imprimir uma página da Web. Isso pode fazer com que a grade extra pequena do Bootstrap seja ativada inesperadamente durante a impressão. Consulte o problema nº 12078 e o bug nº 273306 do Chrome para obter alguns detalhes. Soluções alternativas sugeridas:

• Abrace a grade extra-pequena e certifique-se de que sua página pareça aceitável sob ela.
• Personalize os valores das @screen-*variáveis ​​Menos para que o papel da impressora seja considerado maior que o extrapequeno.
• Adicione consultas de mídia personalizadas para alterar os pontos de interrupção do tamanho da grade somente para mídia de impressão.

Além disso, a partir do Safari v8.0, s de largura fixa .containerpodem fazer com que o Safari use um tamanho de fonte incomumente pequeno ao imprimir. Consulte o nº 14868 e o bug do WebKit nº 138192 para obter mais detalhes. Uma possível solução para isso é adicionar o seguinte CSS:

@media print {
  .container {
    width: auto;
  }
}

Navegador de ações do Android

Fora da caixa, o Android 4.1 (e até mesmo alguns lançamentos mais recentes aparentemente) são fornecidos com o aplicativo Browser como o navegador da Web padrão (em oposição ao Chrome). Infelizmente, o aplicativo Browser tem muitos bugs e inconsistências com CSS em geral.

Selecionar menus

Em <select>elementos, o navegador de ações do Android não exibirá os controles laterais se houver um border-radiuse/ou borderaplicado. (Consulte esta pergunta do StackOverflow para obter detalhes.) Use o snippet de código abaixo para remover o CSS incorreto e renderizá- <select>lo como um elemento sem estilo no navegador de ações do Android. O sniffing do agente do usuário evita interferência nos navegadores Chrome, Safari e Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Quer ver um exemplo? Confira esta demonstração do JS Bin.

Validadores

Para fornecer a melhor experiência possível para navegadores antigos e com bugs, o Bootstrap usa hacks de navegador CSS em vários lugares para direcionar CSS especial para determinadas versões do navegador, a fim de contornar bugs nos próprios navegadores. Esses hacks, compreensivelmente, fazem com que os validadores de CSS reclamem que são inválidos. Em alguns lugares, também usamos recursos CSS de ponta que ainda não estão totalmente padronizados, mas são usados ​​apenas para aprimoramento progressivo.

Esses avisos de validação não importam na prática, pois a parte não-hacky do nosso CSS é totalmente validada e as partes hacky não interferem no funcionamento adequado da parte não-hacky, por isso ignoramos deliberadamente esses avisos específicos.

Nossos documentos HTML também têm alguns avisos de validação HTML triviais e inconseqüentes devido à nossa inclusão de uma solução para um certo bug do Firefox .

Suporte de terceiros

Embora não ofereçamos suporte oficial a nenhum plug-in ou complemento de terceiros, oferecemos alguns conselhos úteis para ajudar a evitar possíveis problemas em seus projetos.

Tamanho da caixa

Alguns softwares de terceiros, incluindo o Google Maps e o Google Custom Search Engine, entram em conflito com o Bootstrap devido a * { box-sizing: border-box; }, uma regra que faz com paddingque não afete a largura final calculada de um elemento. Saiba mais sobre modelo de caixa e dimensionamento em CSS Tricks .

Dependendo do contexto, você pode substituir conforme necessário (Opção 1) ou redefinir o dimensionamento da caixa para regiões inteiras (Opção 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Acessibilidade

O Bootstrap segue padrões comuns da Web e - com o mínimo de esforço extra - pode ser usado para criar sites acessíveis para aqueles que usam AT .

Pular navegação

Se sua navegação contiver muitos links e vier antes do conteúdo principal no DOM, adicione um Skip to main contentlink antes da navegação (para uma explicação simples, consulte este artigo do Projeto A11Y sobre pular links de navegação ). O uso da .sr-onlyclasse ocultará visualmente o link de pular e a .sr-only-focusableclasse garantirá que o link se torne visível uma vez focado (para usuários de teclado com visão).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Títulos aninhados

Ao aninhar cabeçalhos ( <h1>- <h6>), o cabeçalho do documento principal deve ser um <h1>. Os títulos subsequentes devem fazer uso lógico <h2>- de <h6>forma que os leitores de tela possam construir um índice para suas páginas.

Saiba mais em HTML CodeSniffer e Penn State's AccessAbility .

Contraste de cores

Atualmente, algumas das combinações de cores padrão disponíveis no Bootstrap (como as várias classes de botões estilizados , algumas das cores de destaque de código usadas para blocos de código básicos , a classe auxiliar de plano de .bg-primary fundo contextual e a cor de link padrão quando usada em um plano de fundo branco) têm uma taxa de contraste baixa (abaixo da taxa recomendada de 4,5:1 ). Isso pode causar problemas para usuários com baixa visão ou daltônicos. Essas cores padrão podem precisar ser modificadas para aumentar seu contraste e legibilidade.

Recursos adicionais

• Booklet "HTML Codesniffer" para identificar problemas de acessibilidade
• Extensão de Ferramentas de Desenvolvedor de Acessibilidade do Chrome
• Analisador de contraste de cor
• O Projeto A11Y
• Documentação de acessibilidade MDN

Perguntas frequentes sobre licenças

Bootstrap é lançado sob a licença do MIT e é copyright 2019 Twitter. Resumido em pedaços menores, pode ser descrito com as seguintes condições.

Ele exige que você:

• Mantenha a licença e o aviso de direitos autorais incluídos nos arquivos CSS e JavaScript do Bootstrap ao usá-los em seus trabalhos

Ele permite que você:

• Baixe e use o Bootstrap gratuitamente, no todo ou em parte, para fins pessoais, privados, internos da empresa ou comerciais
• Use Bootstrap em pacotes ou distribuições que você cria
• Modificar o código-fonte
• Conceda uma sublicença para modificar e distribuir o Bootstrap a terceiros não incluídos na licença

Ele proíbe você de:

• Responsabilize os autores e proprietários de licenças por danos, pois o Bootstrap é fornecido sem garantia
• Responsabilize os criadores ou detentores de direitos autorais do Bootstrap
• Redistribua qualquer parte do Bootstrap sem a devida atribuição
• Use quaisquer marcas de propriedade do Twitter de qualquer forma que possa indicar ou sugerir que o Twitter endossa sua distribuição
• Use qualquer marca de propriedade do Twitter de qualquer forma que possa indicar ou sugerir que você criou o software do Twitter em questão

Não exige que você:

• Inclua a fonte do próprio Bootstrap, ou de quaisquer modificações que você possa ter feito nele, em qualquer redistribuição que você possa montar que o inclua
• Envie as alterações feitas no Bootstrap de volta ao projeto Bootstrap (embora esse feedback seja incentivado)

A licença completa do Bootstrap está localizada no repositório do projeto para obter mais informações.

Traduções

Os membros da comunidade traduziram a documentação do Bootstrap em vários idiomas. Nenhum é oficialmente suportado e nem sempre está atualizado.

• Bootstrap 中文文档 (chinês)
• Bootstrap på Dansk (dinamarquês)
• Bootstrap en Français (francês)
• Bootstrap auf Deutsch (alemão)
• Bootstrap em Italiano (italiano)
• Bootstrap 한국어 (coreano)
• Bootstrap em Português do Brasil
• Bootstrap по-русски (russo)
• Bootstrap em espanhol (espanhol)
• Türkçe Bootstrap (Turco)
• Bootstrap українською (ucraniano)
• Bootstrap bằng tiếng Việt (vietnamita)

Não ajudamos a organizar ou hospedar traduções, apenas criamos links para elas.

Terminou uma tradução nova ou melhor? Abra um pull request para adicioná-lo à nossa lista.