Download

Bootstrap (atualmente v3.3.7) possibilita algumas maneiras para se usar, cada uma diferente dependendo do seu seu nível de conhecimento ou caso de uso. Leia e descubra qual a mais adequada às suas necessidades.

Bootstrap CDN

O pessoal da MaxCDN fornece graciosamente suporte CDN para CSS e JavaScript do Bootstrap. Basta usar Bootstrap CDN atráves desses links.

<!-- Última versão CSS compilada e minificada -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Tema opcional -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Última versão JavaScript compilada e minificada -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Instalação com Bower

Você pode tambem instalar e manusear o Less, CSS, JavaScript e fonts do Bootstrap usando Bower:

$ bower install bootstrap

Instalação com npm

You can also install Bootstrap using npm:

$ npm install bootstrap@3

require('bootstrap') will load all of Bootstrap's jQuery plugins onto the jQuery object. The bootstrap module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the /js/*.js files under the package's top-level directory.

Bootstrap's package.json contains some additional metadata under the following keys:

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

Instalação com Composer

Você pode tambem instalar e manusear o Less, CSS, JavaScript e fonts do Bootstrap usando Composer:

$ composer require twbs/bootstrap

Less/Sass requer Autoprefixer

Bootstrap usa Autoprefixer para trabalhar com CSS vendor prefixes. Se você está compilando o Less/Sass do Bootstrap e não está usando o nosso Gruntfile, então você precisa do Autoprefixer para integrar seu processo de construção. Se você estiver usando Bootstrap pré-compilado ou usando o nosso Gruntfile, você não precisa se preocupar com isso porque o Autoprefixer já está integrado no nosso Gruntfile.

O que está incluso

Bootstrap está disponível para download em duas formas, no qual você encontrará os seguintes diretórios e arquivos, agrupando logicamente recursos comuns e fornecendo ambas as variações: compilados e minificados.

Bootstrap pré-compilado

Feito o download, descompacte a pasta compactada para ver a estrutura do Bootstrap (o compilado). Você verá algo parecido com isto:

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, caí como uma luva para quase qualquer um projeto web. Nós fornecemos CSS e JS compilados (bootstrap.*), assim como CSS e JS compilados e minificados (bootstrap.min.*). CSS source maps (bootstrap.*.map) estão disponíveis para uso com ferramentas de desenvolvimento em determinados navegadores. Fonts Glyphicons estão incluídos, assim como o tema Bootstrap opcional.

Bootstrap código fonte

O download do código fonte Bootstrap inclui o CSS, JavaScript pré-compilados e assets fonts, junto com o fonte do Less, JavaScripts e documentação. Mais precisamente, ele inclui algo assim:

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

Os diretórios less/, js/, e fonts/ incluí códigos fonte para nosso CSS, JS, e fonts ícones (respectivamente). O diretório dist/ incluí tudo referente a sessão de download pré-compilado sozinho. O diretório docs/ incluí o código fonte da documentação, com exemplos de uso em examples/. Além disso, qualquer outro arquivo incluído fornece suporte para pacotes, informações de licença e desenvolvimento.

Compilando CSS e JavaScript

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

Instalando Grunt

Para instalar Grunt, você deve primeiro baixar e instalar o node.js (que inclui npm). npm auxilia com os node packaged modules e é uma maneira de gerar dependências de desenvolvimento através do node.js.

1. Instale globalmente o grunt-cli com npm install -g grunt-cli.
2. Navegue até a raiz do diretório /bootstrap/, depois execute npm install. npm vai identificar o arquivo package.json e automaticamente instar as dependencias necessárias listada lá.

Quando concluído, você será capaz de executar os vários comandos disponibilizados pelo Grunt a partir da linha de comando.

Comandos disponiveis Grunt

grunt dist (Apenas compila o CSS e JavaScript)

Regenera o diretório /dist/ com arquivos CSS e JavaScript compilados e minificados. Como usuário Bootstrap, este é normalmente o comando mais desejado.

grunt watch (Assistir)

Assiste em tempo real os arquivos fonte Less e automaticamente recompila para CSS sempre que você salvar alguma alteração.

grunt test (Executar testes)

Executa testes com JSHint e o QUnit em PhantomJS.

grunt docs (Construir & testar documentação assets)

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

grunt (Construir absolutamente tudo e executar testes)

Compila e minifica o CSS e JavaScript, constrói o site da documentação, executa o validador HTML5 de encontro com o docs, regenera os assets personalizados, e muito mais. Requer Jekyll. Normalmente, só é necessário se você está explorando a fundo Bootstrap.

Solução de Problemas

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

Template básico

Comece com este modelo básico de HTML, ou modifique estes exemplos. Esperamos que você possa personalizar nossos modelos de exemplos, adaptando-os para atender às suas necessidades.

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

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- As 3 meta tags acima *devem* vir em primeiro lugar dentro do `head`; qualquer outro conteúdo deve vir *após* essas tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim e Respond.js para suporte no IE8 de elementos HTML5 e media queries -->
    <!-- ALERTA: Respond.js não funciona se você visualizar uma página file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Olá, mundo!</h1>

    <!-- jQuery (obrigatório para plugins JavaScript do Bootstrap) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Inclui todos os plugins compilados (abaixo), ou inclua arquivos separadados se necessário -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Exemplos

Criados a partir do modelo base acima e com muitos componentes do Bootstrap. Nós encorajamos você a personalizar e adaptar o Bootstrap para atender às necessidades do seu projeto.

Possua todo o código fonte de exemplo abaixo fazendo o download do repositório do Bootstrap. Exemplos podem ser encontrados no diretório docs/examples/.

Usando o framework

Template de partida

Nada, além do básico: CSS e JavaScript compilados junto com o *container*.

Tema Bootstrap

Carrega o tema opcional do Bootstrap, para uma experiência visual aprimorada.

Grids

Vários exemplos de *grids*, quatro tipos de telas, aninhamento e muito mais.

Jumbotron

*Jumbotron*, junto com uma barra de navegação e colunas com *grids*.

Jumbotron espremido

Cria e personaliza mais a página com o *container* e *jumbotron* espremidos.

Barra de navegação em ação

Barra de navegação

Template super básico que incluí a barra de navegação com algum conteúdo adicional.

Barra de navegação estática no topo

Template super básico que incluí a barra de navegação estática no topo com algum conteúdo adicional.

Barra de navegação fixada

Template super básico que incluí a barra de navegação fixada com algum conteúdo adicional.

Componentes personalizados

Capa

Um template de página única para criar maravilhosas páginas iniciais.

Carrossel

Barra de navegação e carroussel personalizados, e novos novos componentes adicionados.

Blog

Blog simples com layout de duas colunas, com navegação, cabeçalho e tipografia personalizadas.

Painel de controle

Estrura básica para um painel de controle administrativo com barra lateral e navegação fixos.

Página de acesso

Layout com formulário de acesso simples, com um design personalizado.

Navegação justificada

Cria uma barra de navegação personalizada com links justificados. Aviso! Não é amigavel no Safari.

Rodapé colado

Anexa o rodapé em baixo, mesmo que o conteúdo da página não seja o suficiente.

Rodapé colado com barra de navegação

Anexa o rodapé em baixo, com uma barra de navegação fixada no topo.

Experimentos

Bootstrap não-responsivo

Desative facilmente a responsividade do Bootstrap com nossa documentação.

Tela a fora (Off-canvas)

Cria tela a fora do layout (para o menu de navegação) alternada.

Ferramentas

Bootlint

Bootlint is the official Bootstrap HTML linter tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.

Comunidade

Mantenha-se atualizado sobre o desenvolvimento do Bootstrap e aproxime mais da comunidade com esses recursos.

• Leia e inscreva-se no Blog oficial do Bootstrap.
• Chat com colegas Bootstrappers usando IRC no servidor irc.freenode.net, no canal ##bootstrap.
• Para pedir suporte Bootstrap, pergunte em StackOverflow usando a tag twitter-bootstrap-3.
• Desenvolvedores podem usar a palavra chave bootstrap em pacotes alterados ou criados com funcionalidade do Bootstrap e distribuir através npm ou mecanismos similares para que possam ser descobertos facilmente.
• Encontre exemplos inspiradores de pessoas que criaram projetos com Bootstrap em Bootstrap Expo.

Você tambem pode seguir @getbootstrap no Twitter e @getbootstrap no Facebook para as últimas fofocas e vídeo-clipes bacanas.

Desativando a responsividade

Páginas com Bootstrap é adaptado automaticamente para várias tamanhos de telas. Veja aqui como desativar essa funcionalidade para ficar como este exemplo não-responsivo.

Etapas para desativar a responsividade

1. Omitir a adição <meta> viewport mencionada na documentação CSS
2. Sobreescreca o width no .container para cada camada do grid com uma única largura, por exemplo width: 970px !important; Certifique-se de que esta regra venha após o CSS padrão do Bootstrap. Opcionalmente, você pode evitar o !important com *media queries* ou alguns seletores.
3. Se usar barras de navegação, remova todo o *collapsing* e *expanding behavior* da barra de navegação.
4. Para colunas com grid, adicione tambem as classes .col-xs-*, ou no lugar de, colunas .col-md-* ou .col-lg-*. Não se preocupe, as colunas .col-xs-* serve para para todas as resoluções.

Você vai ainda precisar do Respond.js para IE8 (pois nossa *media queries* e vão precisar ser processadas).

Template Bootstrap com a responsividade desativada

Nós seguimos essas etapas para o exemplo. Leia o seu código fonte para ver as alterações específicas foram aplicadas.

Visualizar exemplo não-responsivo

Suporte de dispositivos e navegadores

Bootstrap esta criado para funcionar nos melhores e atualizados navegadores desktop e móveis, ou seja, os navegadores mais antigos podem ser exibidos de forma diferente, embora totalmente funcional.

Navegadores suportados

Especificamente, Oferecemos suporte para últimas versões de navegadores e plataformas.

Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform's web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.

Mobile devices

Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.

Desktop browsers

Similarly, the latest versions of most desktop browsers are supported.

On Windows, we support Internet Explorer 8-11.

For Firefox, in addition to the latest normal stable release, we also support the latest Extended Support Release (ESR) version of Firefox.

Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, as well as Microsoft Edge, though they are not officially supported.

For a list of some of the browser bugs that Bootstrap has to grapple with, see our Wall of browser bugs.

Internet Explorer 8 and 9

Internet Explorer 8 and 9 are also Suportado, however, please be aware that some CSS3 properties and HTML5 elements are not fully Suportado by these browsers. In addition, Internet Explorer 8 requires the use of Respond.js to enable media query support.

Visit Can I use... for details on browser support of CSS3 and HTML5 features.

Internet Explorer 8 and Respond.js

Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.

Respond.js and cross-domain CSS

Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.

Respond.js and file://

Due to browser security rules, Respond.js doesn't work with pages viewed via the file:// protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). See the Respond.js docs for details.

Respond.js and @import

Respond.js doesn't work with CSS that's referenced via @import. In particular, some Drupal configurations are known to use @import. See the Respond.js docs for details.

Internet Explorer 8 and box-sizing

IE8 does not fully support box-sizing: border-box; when combined with min-width, max-width, min-height, or max-height. For that reason, as of v3.0.1, we no longer use max-width on .containers.

Internet Explorer 8 and @font-face

IE8 has some issues with @font-face when combined with :before. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. See issue #13863 for details.

IE Compatibility modes

Bootstrap is Não Suportado in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <meta> tag in your pages:

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

Confirm the document mode by opening the debugging tools: press F12 and check the "Document Mode".

This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each Suportado version of Internet Explorer.

See this StackOverflow question for more information.

Internet Explorer 10 in Windows 8 and Windows Phone 8

Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:

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

However, this doesn't work for devices running Windows Phone 8 versions older than Update 3 (a.k.a. GDR3), as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to include the following CSS and JavaScript to work around the bug.

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

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/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)
}

For more information and usage guidelines, read Windows Phone 8 and Device-Width.

As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.

Safari percent rounding

The rendering engine of versions of Safari prior to v7.1 for OS X and Safari for iOS v8.0 had some trouble with the number of decimal places used in our .col-*-1 grid classes. So if you had 12 individual grid columns, you'd notice that they came up short compared to other rows of columns. Besides upgrading Safari/iOS, you have some options for workarounds:

• Add .pull-right to your last grid column to get the hard-right alignment
• Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)

Modals, navbars, and virtual keyboards

Overflow and scrolling

Support for overflow: hidden on the <body> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <body> content will begin to scroll. See Chrome bug #175502 (fixed in Chrome v40) and WebKit bug #153852.

iOS text fields and scrolling

As of iOS 9.3, while a modal is open, if the initial touch of a scroll gesture is within the boundary of a textual <input> or a <textarea>, the <body> content underneath the modal will be scrolled instead of the modal itself. See WebKit bug #153856.

Virtual keyboards

Also, note that if you're using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to position: absolute or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.

Navbar Dropdowns

The .dropdown-backdrop element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or any other element which will fire a click event in iOS).

Browser zooming

Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.

Sticky :hover/:focus on mobile

Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make :hover "sticky". In other words, :hover styles start applying after tapping an element and only stop applying after the user taps some other element. This can cause Bootstrap's :hover states to become undesirably "stuck" on such browsers. Some mobile browsers also make :focus similarly sticky. There is currently no simple workaround for these issues other than removing such styles entirely.

Printing

Even in some modern browsers, printing can be quirky.

In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. See issue #12078 and Chrome bug #273306 for some details. Suggested workarounds:

• Embrace the extra-small grid and make sure your page looks acceptable under it.
• Customize the values of the @screen-* Less variables so that your printer paper is considered larger than extra-small.
• Add custom media queries to change the grid size breakpoints for print media only.

Also, as of Safari v8.0, fixed-width .containers can cause Safari to use an unusually small font size when printing. See #14868 and WebKit bug #138192 for more details. One potential workaround for this is adding the following CSS:

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

Android stock browser

Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.

Select menus

On <select> elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. (See this StackOverflow question for details.) Use the snippet of code below to remove the offending CSS and render the <select> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.

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

Want to see an example? Check out this JS Bin demo.

Validators

In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.

These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.

Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for a certain Firefox bug.

Third party support

While we don't officially support any third party plugins or add-ons, we do offer some useful advice to help avoid potential issues in your projects.

Box-sizing

Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to * { box-sizing: border-box; }, a rule which makes it so padding does not affect the final computed width of an element. Learn more about box model and sizing at CSS Tricks.

Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 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

Bootstrap segue padrões web comuns e —com um pouco de esforço— pode ser criado sites acessíveis para aqueles que utilizam TA.

Pular navegação

Se seu menu de navegação contém muitos links e vem antes do conteúdo principal, adicione um link Pular para conteúdo principal antes do menu (para uma explicação simples, consulte este Artigo Projeto A11y - Como usar link pular navegação (em inglês)). Ao usar a classe .sr-only irá ocultar visualmente o link ancora, e a classe .sr-only-focusable irá garantir que o elemento só se tornará visível uma vez focada (para usuários com visão de teclado).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Pular para conteúdo principal</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- Conteúdo principal da página -->
  </div>
</body>

Hierarquia de cabeçalhos

Quando criamos uma hierarquia de cabeçalho (<h1> - <h6>), em seu documento, o cabeçalho principal de ser <h1>. Em seguida cabeçalhos <h2> - <h6> devem vir de forma lógica, de tal modo que os leitores de telas consigam criar uma tabela de conteúdo para suas páginas.

Leia mais sobre Cabeçalhos nível 1, sections e acessibilidade e Entendendo o Outline do HTML.

Contrastes de Cores

Atualmente, algumas cores padrão disponíveis no Bootstrap (tais como várias usadas em classes de botões, parte da cor do código destacado em blocos de código básico, a classe .bg-primary em background contextual nas classes de ajuda, e a cor do link padrão quando usado em um fundo branco) têm uma relação de baixo contraste (abaixo da proporção recomendada de 4.5:1). Isso pode causar problemas para usuários com baixa visão ou que são daltônicos. Estas cores padrão podem precisar ser modificadas para aumentar seu contraste e legibilidade.

Recursos adicionais

• Boas práticas de Acessibilidade
• Tecnologia assistiva – Wikipédia
• Acessibilidade web - Wikipédia
• Introdução à Acessibilidade na Web
• Cartilha Acessibilidade Na Web - W3c Brasil (pdf)
• Curso eMAG / Desenvolvedor
• e-MAG Checklist de Acessibilidade Manual para o Desenvolvedor
• "HTML Codesniffer" bookmarklet for identifying accessibility issues
• Chrome's Accessibility Developer Tools extension
• Colour Contrast Analyser
• The A11Y Project
• MDN accessibility documentation

Licença (Perguntas Frequentes)

Bootstrap esta lançado sob a licença MIT e com direitos autorais (copyright) 2016 Twitter. Cheio de pedaços menores, pode ser descrito com as seguintes condições.

Ela exige que você:

• Mantenha a nota de licença e direitos de autor incluído nos aquivos CSS e JavaScript do Bootstrap quando você usá-los em seus projetos

Ela permite que você:

• Baixe e use o Bootstrap livremente, no todo ou em parte, para uso pessoal, privado, interno da empresa, ou para fins comerciais
• Use Bootstrap em pacotes ou distribuições que você criar
• Modifique o código fonte
• Disponibilize uma sub-licencça para modificar e distribuir Bootstrap a terceiros não incluídos na licença

Ela proíbe você de:

• Mantenha os autores e proprietários da licença responsável por danos como Bootstrap é fornecido sem garantia
• Mantenha os criadores ou detentores de direitos autorais do Bootstrap responsável
• Redistribuir qualquer pedaço de Bootstrap sem a devida atribuição
• Use quaisquer marcas de propriedade do Twitter de qualquer maneira que possa indicar ou sugerir que o Twitter endossa a sua distribuição
• Use quaisquer marcas de propriedade de Twitter de qualquer maneira que possa indicar ou sugerir que você criou o software em questão Twitter

Ela não requer que você:

• Inclue o fonte do Bootstrap, ou de quaisquer modificações que possa ter feito a ele, em qualquer redistribuição você venha a criar
• Envie as alterações feitas por você de volta para o projeto Bootstrap (embora tal feedback é incentivada)

A licença completa do Bootstrap esta localizada em nosso repositório do projeto para mais informações.

Traduções

Membros da comunidade têm traduzido a documentação do Bootstrap em várias línguas.

• Bootstrap 中文文档 (Chinese)
• Bootstrap 3 中文手冊 (Chinese (Traditional))
• Bootstrap på Dansk (Danish)
• Bootstrap en Français (French)
• Bootstrap auf Deutsch (German)
• Bootstrap in Italiano (Italian)
• Bootstrap 한국어 (Korean)
• Bootstrap em Português do Brasil (Brazilian Portuguese)
• Bootstrap по-русски (Russian)
• Bootstrap en Español (Spanish)
• Türkçe Bootstrap (Turkish)
• Bootstrap українською (Ukrainian)
• Bootstrap bằng tiếng Việt (Vietnamese)

Nós não ajudamos a organizar ou hospedar traduções, nós apenas divulgamos eles.

Terminou uma nova tradução? Solicite uma requisição para adicioná-lo à nossa lista.