Bem-vindo à segunda parte da minha série de estilo, onde examino algumas bibliotecas/estruturas de estilo populares. Neste blog, veremos o Bootstrap. Bootstrap é uma estrutura de front-end poderosa e de código aberto que torna a construção de sites mais rápida e fácil, fornecendo um sistema de grade intuitivo, componentes de UI e uma ampla gama de utilidades.

Configurar

É claro que antes de entrar em alguns recursos, temos que falar sobre como configurar o Bootstrap em um projeto. No momento em que este artigo foi escrito, a versão atual do Bootstrap é 5.3.3 e é isso que usarei para todos os exemplos.

Inicialização via CDN

O Bootstrap pode ser configurado muito rapidamente usando um CDN ou rede de distribuição de conteúdo. Este método não requer nenhuma instalação, basta adicionar os links CSS e JavaScript do Bootstrap ao seu arquivo HTML e pronto!
Você colocará o seguinte link CSS dentro da tag

Depois disso, você colocará o seguinte script antes da tag

Através do Gerenciador de Pacotes

Se você estiver trabalhando em um projeto maior ou com ferramentas de front-end modernas, convém instalar por meio do gerenciador de projetos. Para nossa sorte, isso também é simples! No seu terminal, basta escrever npm install bootstrap se estiver usando npm, ou yarn add bootstrap se estiver usando wire. Após a instalação, você desejará importar CSS e JavaScript do bootstrap para seus arquivos CSS e JS principais, respeitosamente:

// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Import Bootstrap JavaScript
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

O sistema de grade

Um dos recursos mais poderosos do Bootstrap é seu sistema de grade. Isso permite criar layouts responsivos que se ajustam automaticamente a diferentes tamanhos de tela.

Estrutura

A grade é baseada em uma estrutura de 12 colunas para organizar o conteúdo. Sua estrutura básica pode ser mais ou menos assim:

  

    
Column 1
    
Column 2
    
Column 3
  

• Contêiner: o contêiner contém as colunas e linhas enquanto as alinha
• Linha: as linhas mantêm e agrupam colunas horizontalmente
• Col: As colunas são onde seu conteúdo ficará, cada linha pode ter 12

Tamanhos

As colunas também podem ter seus próprios tamanhos! Isso pode ser usado para fornecer layouts diferentes. Eles são indicados por quantas colunas ocuparão na linha.

  

    
100% Width
  
  

    
50% Width
    
50% Width
  
  

    
33.33% Width
    
33.33% Width
    
33.33% Width
  

Pontos de interrupção

A grade do Bootstraps é móvel primeiro, o que significa que foi criada para dispositivos móveis antes de ser ampliada para dispositivos maiores. Por causa disso, Bootstrap possui classes que definem como as colunas atuam em diferentes tamanhos de tela. Estes são:

• xs: para telas com menos de 576px
• sm: para telas com mais de 576px
• md: Para telas com mais de 768px
• lg: Para telas com mais de 992px
• xl: Para telas com mais de 1200px

Por exemplo:

  

    
Wide on medium and larger screens
    
Narrower on medium and larger screens
  

Neste exemplo, a primeira coluna ocupa toda a largura em telas pequenas, mas apenas oito unidades de grade em telas médias ou maiores. O segundo ocupará metade da largura em telas pequenas e apenas quatro unidades em telas médias ou maiores.

Componentes Comuns

O Bootstrap nos oferece uma variedade de componentes pré-construídos que ajudam na criação de sites atraentes e fáceis de usar com o mínimo de CSS personalizado. Existem muitos componentes, então examinarei alguns dos mais comuns com os quais você provavelmente trabalhará.

Tipografia

Começaremos falando sobre texto, já que seus usuários precisam ler para acreditar. As aulas de tipografia facilitam a definição de estilos de texto consistentes, desde títulos, corpo de texto e listas. Por exemplo, os diferentes títulos são indicados por sua classe de exibição:

Heading 1
Heading 2
Heading 3
This is lead text, which stands out from regular paragraph text.
This is regular paragraph text.
This is small text, which stands out from regular paragraph text.

Você também pode definir o texto do parágrafo com classes utilitárias para modificar o corpo do texto como visto acima.

Botões

Todo site ou aplicativo precisa de botões! Bootstrap oferece uma variedade de estilos de botões prontos para uso. Suas classes são definidas como tal:

Primary Button
Secondary Button
Danger Button


Large Button
Small Button


Success Outline
Warning Outline

Barra de navegação

O componente da barra de navegação do Bootstrap vem com classes integradas para alinhamento, menus suspensos e muito mais!

Neste exemplo, a barra de navegação será recolhida em telas menores.

Aulas utilitárias

O Bootstrap também inclui uma ampla variedade de classes utilitárias para ajudar a acelerar o desenvolvimento e reduzir a necessidade de CSS personalizado. Com apenas alguns nomes de classes, você pode ajustar espaçamento, alinhamento, propriedades de exibição e muito mais!

Espaçamento

O espaçamento é extremamente importante no desenvolvimento para facilitar a leitura do usuário. Felizmente, Bootstrap nos dá aulas para ajustar margens e preenchimento de elementos. Todos eles seguem um formato semelhante de {propriedade}{lados}-{tamanho}.

• Propriedade: m para margem, p para preenchimento
• Lados: t superior, b inferior, l esquerdo, r direito, x esquerdo e direito, y superior e inferior ou espaço em branco para todos os lados
• Tamanho: 0, 1, 2, ... ou automático

Por exemplo:

Margin Top of 3
Padding of 5
Horizontally Centered with Auto Margin

Mostrar

Os utilitários de exibição ajudam a controlar a visibilidade e o layout dos elementos. Eles podem ser usados ​​para mostrar, ocultar ou alterar o comportamento dos elementos. As classes de exibição incluem:

• d-block: Exibir como um elemento de bloco
• d-inline: Exibir como um elemento embutido
• d-none: oculta o elemento
• d-flex: Habilitar Flexbox
• d-inline-block: Exibir como um bloco embutido

O Bootstrap também fornece versões responsivas dessas classes que se aplicam a pontos de interrupção, como d-none d-md-block, que oculta um elemento em telas pequenas.

Visible on medium and larger screens
Centered with Flexbox

Utilitários de texto

Bootstrap oferece uma grande quantidade de personalização de texto com classes como:

Alinhamento de texto

• text-start: Alinha o texto à esquerda
• text-end: Alinha o texto à direita
• text-center: Alinha o texto ao centro

Quebra automática de texto

• text-nowrap: evita que o texto passe para a próxima linha
• text-truncate: Trunca o texto com reticências se for muito longo

Cor do texto

• text-primary: Texto com cor primária (padrão: azul)
• text-success: Texto com cor de sucesso (padrão: verde)
• text-danger: Texto com cor de perigo (padrão: vermelho)

This text is centered and green
This text is right-aligned and blue

Conclusões

Bootstrap é uma estrutura poderosa e flexível que permite aos desenvolvedores construir sites responsivos com eficiência. Ao dominar esses conceitos básicos, você será capaz de agilizar seu fluxo de trabalho e se concentrar mais no design e na funcionalidade do seu site, em vez de CSS personalizado e gerenciamento de layout. Então mergulhe! Experimente alguns dos exemplos e crie um aplicativo incrível!

Fontes

Bootstrap