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 4

❮ 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?

O web design responsivo consiste na criação de sites que se ajustam automaticamente para ter uma boa aparência em todos os dispositivos, de telefones pequenos a desktops grandes.

Exemplo de Bootstrap 4

<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>

Versões de inicialização

Este tutorial segue o Bootstrap 4 , que foi lançado em 2018, como uma atualização para o Bootstrap 3 , com novos componentes, stylesheetc mais rápido, mais capacidade de resposta, etc.

Bootstrap 5 (lançado em 2021) é a versão mais recente do Bootstrap ; 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.

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, os estilos mobile-first fazem parte da estrutura principal
  • Compatibilidade do navegador: Bootstrap 4 é compatível com todos os navegadores modernos (Chrome, Firefox, Internet Explorer 10+, Edge, Safari e Opera)

Onde obter o Bootstrap 4?

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

Você pode:

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

Bootstrap 4 CDN

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

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

jsDeliver:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Uma vantagem de usar o Bootstrap 4 CDN:
Muitos usuários já baixaram o Bootstrap 4 do jsDelivr 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 e Popper?
Bootstrap 4 usa jQuery e Popper.js para componentes JavaScript (como modais, dicas de ferramentas, popovers etc). No entanto, se você usar apenas a parte CSS do Bootstrap, não precisará deles.

  • Alertas que podem ser fechados
  • Botões e caixas de seleção/botões de opção para alternar estados
  • Carrossel para slides, controles e indicadores
  • Recolher para alternar o conteúdo
  • Dropdowns (also requires Popper.js for perfect positioning)
  • Modals (open and close)
  • Navbar (for collapsible menus)
  • Tooltips and popovers (also requires Popper.js for perfect positioning)
  • Scrollspy for scroll behavior and navigation updates

Baixando o Bootstrap 4

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

Crie a primeira página da Web com o Bootstrap 4

1. Adicione o tipo de documento HTML5

O Bootstrap 4 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 4 é mobile-first

O Bootstrap 4 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 4 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 do Bootstrap 4

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

Exemplo de contêiner

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.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 4 (com um contêiner de largura total):

Exemplo de fluido de contêiner

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.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 ❯