Source

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, fornecido gratuitamente pelo pessoal da jsDelivr. 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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

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

Usamos a versão slim do jQuery , mas a versão completa também é suportada.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Curioso quais componentes requerem explicitamente jQuery, nosso JS e Popper.js? 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
  • Listas suspensas para exibição e posicionamento (também requer Popper.js )
  • Modais para exibição, posicionamento e comportamento de rolagem
  • Navbar para estender nosso plug-in Collapse para implementar o comportamento responsivo
  • Dicas de ferramentas e popovers para exibição e posicionamento (também requer Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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.

  • Siga @getbootstrap no Twitter .
  • Leia e assine o Blog Oficial do Bootstrap .
  • Converse com outros Bootstrappers no IRC. No irc.freenode.netservidor, no ##bootstrapcanal.
  • A ajuda para implementação pode ser encontrada em Stack Overflow (com a tag bootstrap-4).
  • 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.