Comece com o Bootstrap

Bootstrap é um poderoso kit de ferramentas de front-end repleto de recursos. Construa qualquer coisa – do protótipo à produção – em minutos.

Nesta página

Começo rápido

Comece incluindo CSS e JavaScript prontos para produção do Bootstrap via CDN sem a necessidade de etapas de compilação. Veja na prática com esta demonstração do Bootstrap CodePen .

Crie um novo index.htmlarquivo na raiz do seu projeto. Inclua a <meta name="viewport">tag também para um comportamento responsivo adequado em dispositivos móveis.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Inclua CSS e JS do Bootstrap. Coloque a <link>tag no <head>para nosso CSS e a <script>tag para nosso pacote JavaScript (incluindo Popper para posicionar dropdowns, poppers e dicas de ferramentas) antes do fechamento </body>. Saiba mais sobre nossos links CDN .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Você também pode incluir Popper e nosso JS separadamente. Se você não planeja usar menus suspensos, popovers ou dicas de ferramentas, economize alguns kilobytes não incluindo Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Olá Mundo! Abra a página em seu navegador de escolha para ver sua página Bootstrapped. Agora você pode começar a construir com Bootstrap criando seu próprio layout , adicionando dezenas de componentes e utilizando nossos exemplos oficiais .

Links de CDN

Como referência, aqui estão nossos principais links de CDN.

Descrição	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Você também pode usar o CDN para buscar qualquer uma de nossas compilações adicionais listadas na página Conteúdo .

Próximos passos

Leia um pouco mais sobre algumas configurações importantes do ambiente global que o Bootstrap utiliza.
Leia sobre o que está incluído no Bootstrap em nossa seção de conteúdo e a lista de componentes que requerem JavaScript abaixo.
Precisa de um pouco mais de potência? Considere construir com Bootstrap incluindo os arquivos de origem via gerenciador de pacotes .
Procurando usar o Bootstrap como um módulo com <script type="module">? Consulte nossa seção usando o Bootstrap como um módulo .

Componentes JS

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 nossos plugins Collapse e Offcanvas para implementar comportamentos responsivos
Navs com o plug-in Tab para alternar os painéis de conteúdo
Offcanvases para exibição, posicionamento e comportamento de rolagem
Scrollspy para comportamento de rolagem e atualizações de navegação
Brindes para exibir e dispensar
Dicas de ferramentas e popovers para exibição e posicionamento (também requer Popper )

Globais importantes

O Bootstrap emprega um punhado de estilos e configurações globais importantes, 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á alguns estilos descolados e incompletos.

<!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 início rápido .

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 .
Pergunte e explore nossas discussões do GitHub .
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.