Se você está iniciando, essas coisas importantes do Bootstrap são primordiais para você saber nas etapas iniciais do seu aprendizado.
Download do Bootstrap
Podemos adicionar os links CDNs mencionados no post anterior, mas, se desejar, poderá também acessar a página do Bootstrap, baixá-lo e enviar para seu site. Para isso acesse o link: getbootstrap.com
Nessa página teremos o Bootstrap para ser baixado:
- CSS e JS compilados: Baixe o código compilado pronto para uso para Bootstrap para enviarmos facilmente para nosso projeto. Isso não inclui documentação, arquivos de origem ou quaisquer dependências opcionais de JavaScript (jQuery e Popper.js). Inclui:
- Pacotes CSS compilados e minificados (veja comparação de arquivos CSS)
- Plug-ins JavaScript compilados e minificados
- Bootstrap para ser compilado: acesse o site para maior descrição, mas, de antemão, informo que compilação não costuma ser algo fácil.
Veja o post anterior para ter mais informações de como adicionar o Bootstrap em seu site: O que é Bootstrap e como adicioná-lo no HTML
Bootstrap 5 prioriza dispositivos móveis
Bootstrap 5 é um framework de desenvolvimento web que dá prioridade ao design e funcionalidade em dispositivos móveis, tornando os sites responsivos e adaptáveis em diferentes tamanhos de tela.
Para isso, devemos usar a seguinte tag <meta> dentro do elemento <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">Onde,
- width=device-width define a largura da página para seguir a largura da tela do dispositivo
- initial-scale=1 define o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador.
contêiner em Bootstrap 5
Em Bootstrap 5, os containers são elementos que usamos para envolver o conteúdo de um site e controlar sua largura e alinhamento.
Existem dois tipos de containers: container e container-fluid., enquanto o container-fluid Os containers ajudam a organizar e estruturar o conteúdo de forma consistente em diferentes dispositivos.
- .container cria uma caixa centralizada com uma largura máxima definida. Essa classe .container cria um contêiner responsivo de largura fixa.
- .container-fluid ocupa toda a largura disponível na tela. A classe .container-fluid cria um contêiner de largura total(full), abrangendo toda a largura da janela de visualização.
.container
Você pode usar a classe .container para criar um contêiner responsivo e de largura fixa.
Saiba que a largura (max-width) mudará em diferentes tamanhos de tela. Veja,
Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra Large ≥1200px | XXL ≥1400px | |
|---|---|---|---|---|---|---|
| max-width | 100% | 540px | 720px | 960px | 1140px | 1320px |
.container-fluid
.container-fluid sempre pegará toda a largura da tela. A largura é sempre 100%.
Exemplos de contêineres
Veja alguns códigos HTML com Bootstrap e contêineres
<!DOCTYPE html> <html lang="en"> <head> <title>Exemplo com Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container"> <h1>Minha primeira página Bootstrap com .container</h1> <p>esta parte está dentro de uma classe .container</p> <p> A classe .container fornece um contêiner responsivo de largura fixa.</p> </div> <div class="container-fluid"> <h1>Minha primeira página Bootstrap com .container-fluid </h1> <p>Esta parte está dentro de uma classe .container-fluid.</p> <p>A classe .container-fluid fornece um contêiner de largura total, abrangendo toda a largura do viewport.</p> </div> </body> </html>
Detalhes sobre os Contêineres em Bootstrap
Vimos acima que o Bootstrap traz dois tipos de contêineres: .container e .container-fluid
Alguns detalhes à mais que devemos saber sobre contêineres nesse momento é padding, borda e responsividade.
- padding: é um espaçamento interno aplicado ao redor do conteúdo dentro do contêiner, fornecendo um espaço em branco entre o conteúdo e as bordas do contêiner.
- borda: é a borda (extremidade) do contêiner. Podemos colocar cores ou escolher qual a espessura da borda.
- responsividade: é uma das características principais do framework. Os contêineres do Bootstrap são projetados para se adaptarem automaticamente a diferentes tamanhos de tela e dispositivos, como desktops, tablets e smartphones.
Padding nos contêineres do Bootstrap
Por padrão, os contêineres têm preenchimento esquerdo e direito, sem preenchimento superior ou inferior.
Exemplo,
<div class="container pt-5"></div>Acima, adicionamos um grande padding/preenchimento na margem superior
Margem no Bootstrap
Em Bootstrap, os elementos de margem são definidos usando classes com prefixo “m-” ou “my-“, “mx-“, “mt-“, “mb-“, “ml-“, “mr-“.
- m- define a margem em todas as direções.
- my- define a margem verticalmente (margem superior e inferior).
- mx- define a margem horizontalmente (margem esquerda e direita).
- mt- define a margem superior.
- mb- define a margem inferior.
- ml- define a margem esquerda.
- mr- define a margem direita.
Essas classes podem ser combinadas com valores numéricos de 0 a 5 (por exemplo, m-2 para uma margem de tamanho 2) ou com palavras-chave como “auto” para centralizar o elemento horizontalmente.
Exemplo, um valor de 5 colocar margens em todos os lados(direções)
<div class="container m-5"></div>Borda do contêiner no bootstrap
você pode adicionar bordas a elementos usando classes com prefixo “border” ou “border-0” para remover a borda completamente.
<div class="container m-5 border"></div>Em relação à cores, para definir a cor da borda, você pode usar classes com prefixo “border-“, seguido pelo nome da cor. Por exemplo, “border-primary” define a cor da borda como a cor primária definida no tema do Bootstrap. Outras opções de cores incluem “secondary”, “success”, “danger”, “warning”, “info”, “light” e “dark”.
- borde-primary
- borde-secondary
- borde-success
- borde-danger
- borde-warning
- borde-info
- borde-light
- borde-dark
Cor de fundo (background ou bg) do contêiner
No Bootstrap, a cor de fundo de um contêiner pode ser definida usando as classes de cor disponíveis, como “bg-primary”, “bg-secondary”, etc. Além disso, você pode usar classes personalizadas para definir uma cor de fundo específica.
- bg-primary: Cor primária.
- bg-secondary: Cor secundária.
- bg-success: Cor de sucesso.
- bg-danger: Cor de perigo.
- bg-warning: Cor de aviso.
- bg-info: Cor informativa.
- bg-light: Cor clara.
- bg-dark: Cor escura.
- bg-white: Cor branca.
- bg-transparent: Fundo transparente.
Cor de texto em bootstrap
Podemos definir a cor do texto usando classes com prefixo “text-” seguido pelo nome da cor desejada.
<div class="container m-5 border-danger text-green"></div>Por exemplo, “text-primary” define a cor do texto como a cor primária definida no tema do Bootstrap. Outras opções de cores incluem “secondary”, “success”, “danger”, “warning”, “info”, “light” e “dark”. Além disso, você também pode usar classes como “text-muted” para definir o texto como uma cor de texto mais suave ou “text-white” para definir o texto como branco.
- text-primary: Define a cor do texto como a cor primária.
- text-secondary: Define a cor do texto como a cor secundária.
- text-success: Define a cor do texto como verde, indicando sucesso.
- text-danger: Define a cor do texto como vermelho, indicando perigo.
- text-warning: Define a cor do texto como amarelo, indicando aviso.
- text-info: Define a cor do texto como azul claro, para informações adicionais.
- text-light: Define a cor do texto como uma tonalidade clara ou branca.
- text-dark: Define a cor do texto como uma tonalidade escura ou preta.
- text-muted: Define o texto com uma cor suave, geralmente um tom de cinza.
- text-white: Define o texto como branco.
Também podemos adicionar opacidade, por exemplo, para adicionar 50% de opacidade para texto em preto ou branco usamos .text-black-50 ou .text-white-50
Responsividade dos Contêineres
Podemos usar as classes .container-sm|md|lg|xl para configurar como o contêiner deve responder aos variados tamanhos de telas.
O parâmetro max-width do contêiner mudará em diferentes tamanhos de tela. Veja:
| Class | Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | XXL ≥1400px |
|---|---|---|---|---|---|---|
.container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
No código ficaria assim,
<div class="container-sm">Usando .container-sm</div>
<div class="container-md">Usando .container-md</div>
<div class="container-lg">Usando .container-lg</div>
<div class="container-xl">Usando .container-xl</div>
<div class="container-xxl">Usando .container-xxl</div>Exemplos
Abaixo poto exemplos de bootstrap com linhas de tudo que vimos até aqui.
Essas linhas produzirão o seguinte resultado
Comments on “Coisas Importantes do Bootstrap para Iniciantes”