Introdução

Descubra o Bootstrap, o framework mais conhecido do mundo para criar sites responsivos e mobile, comece com o BootstrapCDN e nosso template inicial.

Visão rápida

Tentando adicionar rapidamente o Bootstrap ao seu projeto? Use o BootstrapCDN, fornecido gratuitamente pelo pessoal da MaxCDN. Usando um gerenciador de pacotes ou precisa do código fonte? Vá para a página de downloads.

CSS

Copie e cole o arquivo de estilo <link> dentro da sua <head> antes de todos os outros arquivos de estilo para carregar nosso CSS.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

JS

Muitos dos nossos componentes precisam de JavaScript para funcionar. Mais especificamente, eles precisam do jQuery, Popper.js e do nossos próprios plugins JavaScript. Coloque os seguintes <script>s perto do final da sua página, logo antes do fechamento da tag </body>. jQuery tem que vir antes, depois o Popper.js e só depois nossos plugins JavaScript.

Nós usamos a build slim do jQuery, mas a versão completa também é suportada.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

Curiosidade para saber quais componentes precisam de jQuery, nosso JS e Popper.js? Clique em “Mostrar componentes dependentes de JavaScript” logo abaixo. Se ainda tem dúvidas sobre a estrutura da página em geral, continue lendo para um templete de exemplo de página.

Mostrar componentes dependentes de JavaScript
  • Botões de dispensar alertas;
  • Botões para alternar estados e funcionalidades dos botões checkboxes e radios;
  • Comportamento de deslize, controles e indicadores do Carousel;
  • Colapso para alternar visibilidade de conteúdo;
  • Apresentação e posicionamento de dropdowns;
  • Apresentação, posicionamento e rolagem nos Modais;
  • Aprimorar nosso plugin de colapso em navbars, para implementar comportamento responsivo;
  • Posicionamento e apresentação de tooltips e popovers;
  • Comportamento de rolagem e atualizações de navegação no Scrollspy.

Template inicial

Tenha certeza de configurar suas páginas com padrões recentes de desenvolvimento e design. Ou seja, utilizando HTML5 doctype e a meta tag viewport para proporcionar o funcionamento responsivo adequado. Feito isto, suas páginas devem ficar assim:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <!-- Meta tags Obrigatórias -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <title>Olá, mundo!</title>
  </head>
  <body>
    <h1>Olá, mundo!</h1>

    <!-- JavaScript (Opcional) -->
    <!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
  </body>
</html>

No geral, são esses os requisitos para o funcionamento da página. Visite a Documentação de Layout ou nossos exemplos oficiais para começar a incluir conteúdos e componentes em seu site.

Importância geral

O Bootstrap usa um punhado de estilos globais e configurações importantes que você precisará ficar atento, quando tiver usando, os quais são guiados a normalização de estilos cross browsers. Vamos lá!

HTML5 doctype

Bootstrap exige o uso do doctype HTML5. Sem isso, você verá alguns estilos incompletos e esquisitos.

<!DOCTYPE html>
<html lang="pt-br">
  ...
</html>

Meta tag responsiva

Bootstrap tem uma abordagem mobile first, uma estratégia que optimizamos o código para dispositivos móveis primeiro e, então, é que começamos a pensar em media queries para aparelhos maiores. Por isso, para garantir renderização adequada e touch zooming em todos eletrônicos, use a tag responsiva viewport no <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Você pode ver um exemplo disso em ação, neste template iniciante.

Box-sizing

Para um redimensionamento mais intuitivo no CSS, nós trocamos o valor do box-sizing global de content-box para border-box. Dessa maneira, garantimos que o padding não afetará a largura computada final de um elemento, apesar de isto poder causar problemas em alguns softwares de terceiros, como Google Maps e Google Search Engine.

Na rara ocasião de precisar sobrecrever isso, use algo como o seguinte:

.seletor-para-algum-widget {
  box-sizing: content-box;
}

Com o snippet acima, elementos aninhados (incluindo conteúdo gerado via ::before e ::after) vão herdar o box-sizing especificado no seletor-para-algum-widget.

Aprenda mais sobre o box model e dimensionamento, no CSS Tricks.

Reboot

Para uma renderização cross-browser melhorada, nós usamos o Reboot para corrigir inconsistências através dos browsers, enquanto provemos resets um pouquinho customizados para elementos HTML comuns.

Comunidade

Fique atualizado no desenvolvimento do Bootstrap e encontre nossa comunidade através destas fontes úteis:

  • Siga @getbootstrap no Twitter;
  • Leia e se inscreva no Blog Bootstrap Oficial;
  • Participe da nossa sala oficial no Slack;
  • Converse com os Bootstrappers via IRC, através do servidor irc.freenode.net, no canal ##bootstrap;
  • Ajuda com implementação pode ser encontrada no Stack Overflow (tag bootstrap-4);
  • Desenvolvedores devem usar a palavra-chave bootstrap em pacotes que modificarem ou adicionarem funcionalidades do Bootstrap, quando distribuindo via npm ou sistemas de entrega semelhantes, para máxima visibilidade.

Você também pode seguir o @getbootstrap no Twitter, para as melhores fofocas e vídeo clipes. =)