Ir para o conteúdo principal Pular para a navegação de documentos
in English

Introdução

Comece a usar o Bootstrap, a estrutura mais popular do mundo para criar sites responsivos e voltados para dispositivos móveis, com jsDelivr e uma página inicial de modelo.

Nesta página

Começo rápido

Procurando adicionar rapidamente o Bootstrap ao seu projeto? Use jsDelivr, um CDN de código aberto gratuito. Usando um gerenciador de pacotes ou precisa baixar os arquivos de origem? Vá para a página de downloads .

CSS

Copie e cole a folha de estilo <link>na sua <head>antes de todas as outras folhas de estilo para carregar nosso CSS.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Muitos de nossos componentes requerem o uso de JavaScript para funcionar. Especificamente, eles exigem nossos próprios plugins JavaScript e Popper . Coloque um dos seguintes <script>s</body> perto do final de suas páginas, logo antes da tag de fechamento , para habilitá-los.

Pacote

Inclua todos os plug-ins e dependências do Bootstrap JavaScript com um de nossos dois pacotes. Ambos bootstrap.bundle.jse bootstrap.bundle.min.jsincluem Popper para nossas dicas de ferramentas e popovers. Para obter mais informações sobre o que está incluído no Bootstrap, consulte nossa seção de conteúdo .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Separado

Se você decidir usar a solução de scripts separados, o Popper deve vir primeiro (se você estiver usando dicas de ferramentas ou popovers) e depois nossos plugins JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Módulos

Se você usar <script type="module">, consulte nossa seção usando o Bootstrap como um módulo .

Componentes

Curioso quais componentes requerem explicitamente nosso JavaScript e Popper? Clique no link mostrar componentes abaixo. Se você não tiver certeza sobre a estrutura geral da página, continue lendo para obter um modelo de página de exemplo.

Mostrar componentes que requerem JavaScript
  • Alertas para dispensa
  • Botões para alternar estados e funcionalidade de caixa de seleção/rádio
  • Carrossel para todos os comportamentos de slides, controles e indicadores
  • Recolher para alternar a visibilidade do conteúdo
  • Dropdowns para exibição e posicionamento (também requer Popper )
  • Modais para exibição, posicionamento e comportamento de rolagem
  • Navbar para estender nosso plug-in Collapse para implementar o comportamento responsivo
  • Offcanvases para exibição, posicionamento e comportamento de rolagem
  • Brindes para exibir e dispensar
  • Dicas de ferramentas e popovers para exibição e posicionamento (também requer Popper )
  • Scrollspy para comportamento de rolagem e atualizações de navegação

Modelo inicial

Certifique-se de ter suas páginas configuradas com os mais recentes padrões de design e desenvolvimento. Isso significa usar um doctype HTML5 e incluir uma meta tag viewport para comportamentos responsivos adequados. Junte tudo e suas páginas devem ficar assim:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Para as próximas etapas, visite os documentos do Layout ou nossos exemplos oficiais para começar a organizar o conteúdo e os componentes do seu site.

Globais importantes

O Bootstrap emprega um punhado de estilos e configurações globais importantes que você precisa estar ciente ao usá-lo, todos voltados quase exclusivamente para a normalização de estilos entre navegadores. Vamos mergulhar.

Tipo de documento HTML5

Bootstrap requer o uso do doctype HTML5. Sem ele, você verá um estilo incompleto e descolado, mas incluí-lo não deve causar soluços consideráveis.

<!doctype html>
<html lang="en">
  ...
</html>

Metatag responsiva

O Bootstrap é desenvolvido primeiro para dispositivos móveis , uma estratégia na qual otimizamos o código para dispositivos móveis primeiro e, em seguida, aumentamos os componentes conforme necessário usando consultas de mídia CSS. Para garantir a renderização adequada e o zoom de toque para todos os dispositivos, adicione a metatag da janela de visualização responsiva ao seu arquivo <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Você pode ver um exemplo disso em ação no modelo inicial .

Tamanho da caixa

Para um dimensionamento mais direto em CSS, mudamos o box-sizingvalor global de content-boxpara border-box. Isso garante paddingque não afete a largura final calculada de um elemento, mas pode causar problemas com alguns softwares de terceiros, como o Google Maps e o Google Custom Search Engine.

Nas raras ocasiões em que você precisar substituí-lo, use algo como o seguinte:

.selector-for-some-widget {
  box-sizing: content-box;
}

Com o snippet acima, os elementos aninhados, incluindo o conteúdo gerado por ::beforee, ::afterherdarão o especificado box-sizingpara esse .selector-for-some-widget.

Saiba mais sobre modelo de caixa e dimensionamento em CSS Tricks .

Reinício

Para melhor renderização entre navegadores, usamos Reboot para corrigir inconsistências entre navegadores e dispositivos, ao mesmo tempo em que fornecemos redefinições um pouco mais opinativas para elementos HTML comuns.

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 no IRC. No irc.libera.chatservidor, no #bootstrapcanal.
  • A ajuda para implementação pode ser encontrada em Stack Overflow (com a tag bootstrap-5).
  • 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.

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