HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Inicialização do Bootstrap

❮ Anterior Próximo ❯

O que é Bootstrap?

  • Bootstrap é um framework front-end gratuito para desenvolvimento web mais rápido e fácil
  • O Bootstrap inclui modelos de design baseados em HTML e CSS para tipografia, formulários, botões, tabelas, navegação, modais, carrosséis de imagens e muitos outros, bem como plugins JavaScript opcionais
  • O Bootstrap também oferece a capacidade de criar facilmente designs responsivos

O que é Web Design Responsivo?

Web design responsivo é sobre a criação de sites que se ajustam automaticamente para ter uma boa aparência em todos os dispositivos, desde pequenos telefones até grandes desktops.

Exemplo de Bootstrap

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>

Histórico de inicialização

O Bootstrap foi desenvolvido por Mark Otto e Jacob Thornton no Twitter e lançado como um produto de código aberto em agosto de 2011 no GitHub.

Em junho de 2014, o Bootstrap era o projeto nº 1 no GitHub!

Por que usar o Bootstrap?

Vantagens do Bootstrap:

  • Fácil de usar: Qualquer pessoa com conhecimento básico de HTML e CSS pode começar a usar o Bootstrap
  • Recursos responsivos: o CSS responsivo do Bootstrap se ajusta a telefones, tablets e desktops
  • Abordagem mobile-first: no Bootstrap 3, os estilos mobile-first fazem parte da estrutura principal
  • Compatibilidade do navegador: Bootstrap é compatível com todos os navegadores modernos (Chrome, Firefox, Internet Explorer, Edge, Safari e Opera)

Versões de inicialização

Este tutorial segue o Bootstrap 3 , lançado em 2013. No entanto, também abordamos as versões mais recentes; Bootstrap 4 (lançado em 2018) e Bootstrap 5 (lançado em 2021) .

Bootstrap 5 é a versão mais recente do Bootstrap ; com novos componentes, folhas de estilo mais rápidas, maior capacidade de resposta, etc. Ele suporta as versões mais recentes e estáveis ​​de todos os principais navegadores e plataformas. No entanto, o Internet Explorer 11 e versões anteriores não são suportados.

As principais diferenças entre o Bootstrap 5 e o Bootstrap 3 e 4 é que o Bootstrap 5 mudou para JavaScript em vez de jQuery .

Nota: Bootstrap 3 e Bootstrap 4 ainda são suportados pela equipe para correções críticas de bugs e mudanças na documentação, e é perfeitamente seguro continuar a usá-los. No entanto, novos recursos NÃO serão adicionados a eles.

Onde obter Bootstrap?

Existem duas maneiras de começar a usar o Bootstrap em seu próprio site.

Você pode:

  • Baixe o Bootstrap em getbootstrap.com
  • Incluir Bootstrap de um CDN

Baixando o Bootstrap

Se você quiser baixar e hospedar o Bootstrap você mesmo, vá para getbootstrap.com e siga as instruções.

CDN de inicialização

Se você não quiser baixar e hospedar o Bootstrap você mesmo, você pode incluí-lo de uma CDN (Content Delivery Network).

MaxCDN fornece suporte a CDN para CSS e JavaScript do Bootstrap. Você também deve incluir jQuery:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Uma vantagem de usar o Bootstrap CDN:
Muitos usuários já baixaram o Bootstrap do MaxCDN ao visitar outro site. Como resultado, ele será carregado do cache quando eles visitarem seu site, o que leva a um tempo de carregamento mais rápido. Além disso, a maioria dos CDNs garante que, uma vez que um usuário solicite um arquivo, ele será servido a partir do servidor mais próximo a eles, o que também leva a um tempo de carregamento mais rápido.

jQuery
Bootstrap usa jQuery para plugins JavaScript (como modais, dicas de ferramentas, etc). No entanto, se você usar apenas a parte CSS do Bootstrap, não precisará do jQuery.

Crie a primeira página da Web com Bootstrap

1. Adicione o tipo de documento HTML5

Bootstrap usa elementos HTML e propriedades CSS que requerem o doctype HTML5.

Sempre inclua o doctype HTML5 no início da página, junto com o atributo lang e o conjunto de caracteres correto:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. O Bootstrap 3 é mobile-first

O Bootstrap 3 foi projetado para ser responsivo a dispositivos móveis. Os estilos mobile-first fazem parte da estrutura principal.

Para garantir a renderização adequada e o zoom de toque, adicione a seguinte <meta>tag dentro do <head>elemento:

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

A width=device-widthparte define a largura da página para seguir a largura da tela do dispositivo (que varia de acordo com o dispositivo).

A initial-scale=1parte define o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador.

3. Contêineres

O Bootstrap também requer um elemento de contenção para encapsular o conteúdo do site.

Há duas classes de contêiner para escolher:

  1. A .containerclasse fornece um contêiner de largura fixa responsivo
  2. A .container-fluidclasse fornece um contêiner de largura total , abrangendo toda a largura da janela de visualização
.recipiente
.container-fluid

Duas páginas básicas de bootstrap

O exemplo a seguir mostra o código para uma página básica do Bootstrap (com um contêiner de largura fixa responsivo):

Exemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

O exemplo a seguir mostra o código para uma página básica do Bootstrap (com um contêiner de largura total):

Exemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

❮ Anterior Próximo ❯