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.

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Muitos de nossos componentes requerem o uso de JavaScript para funcionar. Especificamente, eles exigem jQuery , Popper e nossos próprios plugins JavaScript. Usamos a versão slim do jQuery , mas a versão completa também é suportada.

Coloque um dos seguintes <script>s</body> perto do final de suas páginas, logo antes da tag de fechamento , para habilitá-los. O jQuery deve vir primeiro, depois o Popper e depois nossos plugins JavaScript.

Pacote

Inclua todos os plugins Bootstrap JavaScript com um dos nossos dois pacotes. Ambos bootstrap.bundle.jse bootstrap.bundle.min.jsincluem Popper para nossas dicas de ferramentas e popovers, mas não jQuery . Inclua o jQuery primeiro, depois um pacote Bootstrap JavaScript. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Componentes

Curioso sobre quais componentes requerem explicitamente jQuery, nosso JavaScript e Popper? Clique no link mostrar componentes abaixo. Se você não tiver certeza sobre a estrutura 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
  • Scrollspy para comportamento de rolagem e atualizações de navegação
  • Dicas de ferramentas e popovers para exibição e posicionamento (também requer Popper )

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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Isso é tudo que você precisa para os requisitos gerais da página. Visite os documentos do Layout ou nossos exemplos oficiais para começar a apresentar 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, shrink-to-fit=no">

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.
  • Implementation help may be found at Stack Overflow (tagged bootstrap-4).
  • Developers should use the keyword bootstrap on packages which modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.

CSPs and embedded SVGs

Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. For organizations with more strict CSP configurations, we’ve documented all instances of our embedded SVGs (all of which are applied via background-image) so you can more thoroughly review your options.

Com base na conversa da comunidade , algumas opções para resolver isso em sua própria base de código incluem substituir os URLs por ativos hospedados localmente, remover as imagens e usar imagens em linha (não é possível em todos os componentes) e modificar seu CSP. Nossa recomendação é revisar cuidadosamente suas próprias políticas de segurança e decidir o melhor caminho a seguir, se necessário.