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.
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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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.js
e bootstrap.bundle.min.js
incluem 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 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
- 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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 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-sizing
valor global de content-box
para border-box
. Isso garante padding
que 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 ::before
e, ::after
herdarão o especificado box-sizing
para 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.chat
servidor, no#bootstrap
canal. - A ajuda para implementação pode ser encontrada em Stack Overflow (com a tag
bootstrap-5
). - Os desenvolvedores devem usar a palavra-chave
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.