Se você está iniciando, essas coisas importantes do Bootstrap são primordiais para você saber nas etapas iniciais do seu aprendizado.
![Coisas Importantes do Bootstrap para Iniciantes](https://categoriaoutros.com.br/wp-content/uploads/2023/11/bootstrap-logo.png)
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.
![contêiner em Bootstrap 5](https://categoriaoutros.com.br/wp-content/uploads/2023/11/image_2023-11-24_175127082.png)
.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.
![Exemplo com Bootstrap para iniciantes](https://i.pinimg.com/736x/1e/fa/0a/1efa0ac2c15b9740f453a3907e7499d3.jpg)
Essas linhas produzirão o seguinte resultado
![Exemplo com Bootstrap para iniciantes](https://i.pinimg.com/736x/5d/45/6c/5d456c98046e6534337e3bd7785c9dee.jpg)
Comments on “Coisas Importantes do Bootstrap para Iniciantes”