Bootstrap 5, uma das estruturas de front-end mais populares, traz uma variedade de componentes e utilitários úteis que ajudam os desenvolvedores a criar sites responsivos e visualmente atraentes rapidamente.

Cartões

Os cartões são um componente versátil do Bootstrap 5 que permitem exibir o conteúdo de maneira limpa e organizada. Eles são perfeitos para apresentar informações de uma forma esteticamente agradável e funcional.

Estrutura Básica

Um cartão básico consiste em um contêiner com a classe .card, contendo elementos como cabeçalho, corpo e rodapé do cartão.

  

    Featured
  
  

    
Card Title
    
Some quick example text.
    Go somewhere
  
  

    2 days ago
  

Personalizando Cartões

Você pode personalizar cartões extensivamente:

• Imagens: Adicione imagens usando .card-img-top ou .card-img-bottom.
• Layouts: use baralhos de cartas, grupos ou colunas para diferentes layouts.
• Cores: Utilize classes contextuais como .bg-primary, .text-white.

  
Header
  

    
Primary card title
    
Text content goes here.
  

Casos de uso

• Perfis de usuário: exibe informações do usuário com um avatar.
• Listagens de produtos: exiba produtos com imagens e descrições.
• Postagens de blog: resumir artigos com títulos e trechos.

Selecionador de data

Embora o Bootstrap 5 não inclua um selecionador de data nativo, a integração de um é simples usando bibliotecas de terceiros como Tempus Dominus ou Bootstrap Datepicker.

Implementação

Primeiro, inclua os arquivos CSS e JS necessários:

Em seguida, inicialize o selecionador de data:

Opções de personalização

• Formatos: personalize o formato da data.
• Datas de início e término: limite o período selecionável.
• Temas: aplique estilos diferentes.

Barra lateral

As barras laterais são essenciais para a navegação, especialmente em aplicações web complexas.

Criando uma barra lateral responsiva

Você pode criar uma barra lateral responsiva usando o sistema de grade e o componente de recolhimento do Bootstrap.

Barras laterais interativas

Melhore a experiência do usuário adicionando interação:

• Efeitos de foco: use CSS para destacar itens de menu.
• Menus recolhíveis: implemente submenus que se expandem ao clicar.
• Ícones: Incorpore ícones usando Font Awesome ou Bootstrap Icons.

Caixa de seleção

As caixas de seleção permitem que os usuários selecionem várias opções de um conjunto.

Caixas de seleção de estilo

Bootstrap 5 fornece estilos de caixa de seleção personalizados:

  
    Default checkbox
  

Grupos de caixas de seleção

Agrupe caixas de seleção para melhor organização:

  Select Options:
  

    
  

Rodapé

Rodapés são cruciais para fornecer navegação e informações adicionais.

Projetando rodapés

Crie um rodapé simples:

Rodapés pegajosos

Faça com que o rodapé fique na parte inferior:

html, body {
  height: 100%;
}

#page-content {
  flex: 1 0 auto;
}

#sticky-footer {
  flex-shrink: none;
}

Conclusão

Dominar esses componentes do Bootstrap 5 pode melhorar significativamente a funcionalidade e a estética de seus projetos web. Ao entender como personalizar e implementar Cartões, Datepickers, Barras laterais, Caixas de seleção e Rodapés, você pode criar sites fáceis de usar e visualmente atraentes. Continue experimentando diferentes estilos e configurações para descobrir o que funciona melhor para suas necessidades específicas.

Leitura adicional:

• Documentação oficial do Bootstrap
• Personalização do Bootstrap