Começando
Uma visão geral do Bootstrap, como baixar e usar, modelos e exemplos básicos e muito mais.
Uma visão geral do Bootstrap, como baixar e usar, modelos e exemplos básicos e muito mais.
Bootstrap (atualmente v3.3.7) 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.
CSS, JavaScript e fontes compilados e minificados. Nenhum documento ou arquivo de origem original está incluído.
Source Less, JavaScript e arquivos de fonte, juntamente com nossos documentos. Requer um compilador Less e alguma configuração.
Bootstrap portado de Less para Sass para fácil inclusão em projetos Rails, Compass ou Sass-only.
O pessoal da jsDelivr gentilmente fornece suporte CDN para CSS e JavaScript do Bootstrap. Basta usar esses links do Bootstrap CDN .
Você também pode instalar e gerenciar Less, CSS, JavaScript e fontes do Bootstrap usando Bower :
Você também pode instalar o Bootstrap usando npm :
require('bootstrap')
irá carregar todos os plugins jQuery do Bootstrap no objeto jQuery. O bootstrap
próprio módulo não exporta nada. Você pode carregar manualmente os plugins jQuery do Bootstrap individualmente carregando os /js/*.js
arquivos no diretório de nível superior do pacote.
O Bootstrap package.json
contém alguns metadados adicionais nas seguintes chaves:
less
- caminho para o arquivo de origem Less principal do Bootstrapstyle
- caminho para o CSS não minificado do Bootstrap que foi pré-compilado usando as configurações padrão (sem personalização)Você também pode instalar e gerenciar Less, CSS, JavaScript e fontes do Bootstrap usando o Composer :
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 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.
Observe que todos os plug-ins JavaScript exigem que o jQuery seja incluído, conforme mostrado no modelo inicial . Consulte nossobower.json
para ver quais versões do jQuery são suportadas.
Uma vez baixado, descompacte a pasta compactada para ver a estrutura do Bootstrap (compilado). Você verá algo assim:
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.
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:
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.
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.
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.
Então, na linha de comando:grunt-cli
globalmente com npm install -g grunt-cli
./bootstrap/
e execute npm install
. O npm examinará o package.json
arquivo 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.
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 o JSHint e executa os testes QUnit diretamente no PhantomJS .
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.
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
.
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.
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.
Carregue o tema Bootstrap opcional para uma experiência visualmente aprimorada.
Modelo super básico que inclui a barra de navegação junto com algum conteúdo adicional.
Estrutura básica para um painel de administração com barra lateral e barra de navegação fixas.
Crie uma barra de navegação personalizada com links justificados. Atenção! Não muito amigável ao Safari.
Desative facilmente a capacidade de resposta do Bootstrap de acordo com nossos documentos .
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.
Mantenha-se atualizado sobre o desenvolvimento do Bootstrap e entre em contato com a comunidade com esses recursos úteis.
irc.freenode.net
servidor, no canal ##bootstrap .twitter-bootstrap-3
.bootstrap
em pacotes que modificam ou adicionam à funcionalidade do Bootstrap ao distribuir por meio de npm ou mecanismos de entrega semelhantes para máxima descoberta.Você também pode seguir @getbootstrap no Twitter para as últimas fofocas e vídeos musicais incríveis.
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 .
<meta>
mencionada nos documentos CSSwidth
para .container
cada 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 !important
consultas de mídia ou algum seletor-fu..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.
Aplicamos essas etapas a um exemplo. Leia seu código-fonte para ver as alterações específicas implementadas.
Procurando migrar de uma versão mais antiga do Bootstrap para v3.x? Confira nosso guia de migração .
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.
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.
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.
cromada | Raposa de fogo | Safári | |
---|---|---|---|
Android | Compatível | Compatível | N / D |
iOS | Compatível | Compatível | Compatível |
Da mesma forma, as versões mais recentes da maioria dos navegadores de desktop são suportadas.
cromada | Raposa de fogo | Internet Explorer | Ópera | Safári | |
---|---|---|---|---|---|
Mac | Compatível | Compatível | N / D | Compatível | Compatível |
janelas | Compatível | Compatível | Compatível | Compatível | Não suportado |
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 .
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.
Característica | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Não suportado | Compatível |
box-shadow |
Não suportado | Compatível |
transform |
Não suportado | Suportado, com -ms prefixo |
transition |
Não suportado | |
placeholder |
Não suportado |
Visite Posso usar... para obter detalhes sobre o suporte do navegador aos recursos CSS3 e HTML5.
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.
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.
file://
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.
@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.
O IE8 não oferece suporte total box-sizing: border-box;
quando combinado com min-width
, max-width
, min-height
ou max-height
. Por esse motivo, a partir da v3.0.1, não usamos mais max-width
em .container
s.
O IE8 tem alguns problemas @font-face
quando 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.
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:
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.
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:
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 .
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.
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-*-1
classes 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:
.pull-right
à sua última coluna de grade para obter o alinhamento à direitaO suporte para overflow: hidden
o <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 .
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 .
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: absolute
ou 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.
O .dropdown-backdrop
elemento 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 ).
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.
:hover
/ :focus
no celularMesmo 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, :hover
os 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 :hover
fiquem indesejavelmente "presos" em tais navegadores. Alguns navegadores móveis também tornam-se :focus
igualmente pegajosos. Atualmente, não há solução simples para esses problemas além de remover totalmente esses estilos.
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:
@screen-*
variáveis Menos para que o papel da impressora seja considerado maior que o extrapequeno.Além disso, a partir do Safari v8.0, s de largura fixa .container
podem 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:
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.
Em <select>
elementos, o navegador de ações do Android não exibirá os controles laterais se houver um border-radius
e/ou border
aplicado. (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.
Quer ver um exemplo? Confira esta demonstração do JS Bin.
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 alternativa para um determinado bug do Firefox .
Embora não ofereçamos suporte oficial a plug-ins ou complementos de terceiros, oferecemos alguns conselhos úteis para ajudar a evitar possíveis problemas em seus projetos.
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 que ele padding
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).
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 .
Se sua navegação contiver muitos links e vier antes do conteúdo principal no DOM, adicione um Skip to main content
link 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-only
classe ocultará visualmente o link de pular e a .sr-only-focusable
classe garantirá que o link se torne visível uma vez focado (para usuários de teclado com visão).
Devido a falhas/bugs de longa data no Chrome (consulte o problema 262171 no rastreador de bugs do Chromium ) e no Internet Explorer (consulte este artigo sobre links na página e ordem de foco ), você precisará certificar-se de que o destino do seu link para pular é pelo menos programável com foco adicionando tabindex="-1"
.
Além disso, você pode querer suprimir explicitamente uma indicação de foco visível no destino (principalmente porque o Chrome atualmente também define o foco em elementos tabindex="-1"
quando são clicados com o mouse) com #content:focus { outline: none; }
.
Observe que esse bug também afetará quaisquer outros links in-page que seu site possa estar usando, tornando-os inúteis para usuários de teclado. Você pode considerar adicionar uma correção temporária semelhante a todas as outras âncoras/identificadores de fragmentos nomeados que atuam como destinos de link.
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 .
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.
Bootstrap é lançado sob a licença do MIT e é copyright 2016 Twitter. Resumido em pedaços menores, pode ser descrito com as seguintes condições.
A licença completa do Bootstrap está localizada no repositório do projeto para obter mais informações.
Os membros da comunidade traduziram a documentação do Bootstrap em vários idiomas. Nenhum é oficialmente suportado e nem sempre está atualizado.
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.