Como podemos ver, os cartões são do mesmo tamanho com alguma margem entre eles.
Colunas de cartão
Nas versões anteriores do Bootstrap, a classe .card-columns era usada para criar um layout semelhante ao da Maçonaria, onde os cartões eram adicionados de cima para baixo e da esquerda para a direita. No entanto, no Bootstrap 5, esse recurso foi removido.
Para obter um layout semelhante, você pode usar o sistema de grade em combinação com o layout CSS Masonry ou um plugin JavaScript como Masonry.js para comportamentos mais complexos.
Veja como criar um layout simples no estilo alvenaria usando o sistema de grade e CSS:
Veja a caneta
Layout em estilo de alvenaria usando a grade por Poorna Theekshana (@poorna-theekshana) sobre CodePen.
Otimizando o desempenho
O desempenho eficiente é crucial para a criação de cartões Bootstrap que carregam rapidamente e se adaptam perfeitamente. Aqui estão técnicas práticas para melhorar o desempenho ao integrar componentes do cartão Bootstrap, como corpo do cartão de classe div e título do cartão de classe h5.
Imagens de carregamento lento
O carregamento lento atrasa o carregamento das imagens até que fiquem visíveis na janela de visualização, otimizando a velocidade da página. Use o atributo loading=”lazy” com o cartão img top para uma solução eficiente.
<img src="https://picsum.photos/300/200" loading="lazy" class="card-img-top" alt="Lazy Loaded Image">Otimize os tamanhos das imagens
Redimensione as imagens para ajustá-las às dimensões do contêiner, garantindo tempos de carregamento mais rápidos. Use img-fluid com cartão de classe div img para dimensionar imagens automaticamente.
<img src="https://picsum.photos/300/200" class="card-img-top img-fluid" alt="Resized Image">Isso garante que o topo da imagem do cartão se encaixe perfeitamente, independentemente da largura do elemento pai.
Minimize CSS e JavaScript
Minimize estilos e scripts para reduzir o tamanho dos arquivos. Combine vários elementos de cabeçalho de cartão de classe div e minimize CSS personalizado para renderização mais rápida.
Exemplo otimizado
Em vez de aplicar estilos repetitivos ou personalizados como este:
<div class="card" style="border: 1px solid blue; text-align: center; padding: 20px;">
<div class="card-body">
<h5 style="font-size: 1.5rem; font-weight: bold;">Custom CSS Headerh5>
<p style="font-size: 1rem; color: #555;">This card uses inline styles, which are inefficient.p>
div>
div>Use as classes utilitárias do Bootstrap para uma estrutura mais limpa e de fácil manutenção:
<div class="card border-primary text-center p-3">
<div class="card-body">
<h5 class="card-title text-uppercase fw-bold">Utility Classes Headerh5>
<p class="card-text text-secondary">Using Bootstrap's utility classes ensures better performance and maintainability.p>
div>
div>Use SVGs para ícones
Os SVGs são leves e escaláveis, o que os torna ideais para cabeçalhos de cartões e elementos decorativos. Eles carregam mais rápido e mantêm a nitidez em todos os dispositivos.
Exemplo
<div class="card text-center">
<div class="card-header bg-success text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi bi-check-circle" fill="currentColor">
<path d="M16 8.98l.686-.688L7.733.011 6.023 1.72 14.98 10.676z"/>
svg>
<h5 class="card-title">SVG Optimized Headerh5>
div>
<div class="card-body">
<p class="card-text">SVGs provide clear visuals with minimal overhead.p>
div>
div>Recursos de pré-carregamento e pré-busca
Use rel=”preload” para carregar recursos críticos e rel=”prefetch” para antecipar necessidades futuras. Isto é especialmente útil para conteúdo pesado de cartão.
Exemplo
<link rel="preload" href="https://example.com/styles.css" as="style">
<link rel="prefetch" href="https://example.com/next-page.html">Reduza a complexidade do DOM
Evite estruturas de cartão de classe div excessivamente aninhadas que podem retardar a renderização. Simplifique layouts para otimizar o desempenho.
Antes da otimização
<div class="card">
<div class="card-body">
<div>
<div>
<p>Nested Contentp>
div>
div>
div>
div>Após a otimização
<div class="card">
<div class="card-body">
<p class="card-text">Optimized Contentp>
div>
div>Otimizar fontes
Pré-carregue fontes personalizadas ou use fontes do sistema para reduzir a latência. Um corpo de cartão de classe div limpo pode destacar ainda mais o apelo visual de seus cartões.
Exemplo
<div class="card">
<div class="card-body" style="font-family: 'Roboto', sans-serif;">
<h5 class="card-title">Optimized Fonth5>
<p class="card-text">Preloading ensures faster rendering for card content.p>
div>
div>Conclusão
O componente de cartão Bootstrap é uma adição poderosa à estrutura Bootstrap, que permite aos desenvolvedores criar páginas da web em estilo moderno sem se aprofundar no funcionamento do CSS. Você pode adicionar layouts de cartão para representar galerias de imagens, widgets de painel e exibir postagens de blog ou produtos para um site de comércio eletrônico adicionando classes CSS.
Como resultado dos novos recursos e componentes, Bootstrap continua a ser uma poderosa estrutura CSS disponível para todos, especialmente para desenvolvedores que precisam criar seus próprios layouts responsivos e de estilo moderno, mas não têm tempo e orçamento suficientes ou o profundo conhecimento necessário de CSS. para produzir código personalizado.
Se você tem o básico do Bootstrap, mas está se perguntando como levar suas habilidades no Bootstrap para o próximo nível, confira nosso Construindo seu primeiro site com Bootstrap 4 curso para uma introdução rápida e divertida ao poder do Bootstrap.
Perguntas frequentes sobre como dominar os componentes do cartão Bootstrap para design responsivo
O que é um componente da placa Bootstrap?
Um Bootstrap Card Component é um contêiner moderno e flexível para conteúdo, permitindo criar layouts visualmente atraentes para texto, imagens e multimídia. Os cartões fazem parte da estrutura do Bootstrap, projetada para ajudar os desenvolvedores a organizar as informações de maneira responsiva e compatível com dispositivos móveis.
Como faço para criar um componente de cartão Bootstrap?
Criar um componente de placa Bootstrap é simples. Você pode usar um div com o cartão de classe como contêiner e adicionar conteúdo como títulos, texto e imagens dentro dele. Aqui está um exemplo:
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card Titleh5>
<p class="card-text">This is an example of a Bootstrap card body.p>
div>
div>Como definir a altura e a largura do cartão no Bootstrap?
Você pode personalizar a largura e a altura do cartão bootstrap usando estilos embutidos ou classes utilitárias do Bootstrap. Por exemplo:
<div class="card" style="width: 20rem; height: 15rem;">
<div class="card-body">
<h5 class="card-title">Custom Cardh5>
<p class="card-text">This card has a custom height and width.p>
div>
div>Como alternativa, você também pode usar classes utilitárias de bootstrap de altura do cartão, como w-50 ou h-100, para definir as dimensões do cartão de maneira responsiva.
Como redimensionar o cartão no Bootstrap?
Para redimensionar um cartão, você pode usar classes utilitárias de bootstrap de tamanho de cartão, como w-25, w-50 ou w-75 para largura e h-auto ou h-100 para altura. Isso garante que seu cartão se adapte ao layout sem levar a CSS adicional. Aqui está um exemplo:
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Responsive Cardh5>
<p class="card-text">This card resizes based on its parent container.p>
div>
div>Como faço para criar um título de cartão no Bootstrap?
Para adicionar um título ao seu cartão, use um
elemento com a classe=”título do cartão”. Esta classe garante que o título tenha um estilo consistente com os padrões de design do Bootstrap.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Titleh5>
<p class="card-text">This is an example of a Bootstrap card with a title.p>
div>
div>
Como posso usar a classe card-body no Bootstrap?
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Titleh5>
<p class="card-text">This is an example of a Bootstrap card with a title.p>
div>
div>A classe card-body é uma classe utilitária que fornece preenchimento e organiza o conteúdo em um cartão Bootstrap. É o principal contêiner do conteúdo de um cartão.
<div class="card">
<div class="card-body">
<h5 class="card-title">Using card-bodyh5>
<p class="card-text">This is the content inside the card-body section.p>
div>
div>Como corrigir o tamanho do cartão Bootstrap?
Para corrigir o tamanho de um cartão, aplique largura e altura específicas usando estilos embutidos ou classes utilitárias. Por exemplo:
<div class="card" style="width: 250px; height: 300px;">
<img src="https://picsum.photos/250/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Fixed Size Cardh5>
<p class="card-text">This card has a fixed size for consistency.p>
div>
div>Como ajustar o tamanho do cartão no Bootstrap?
O tamanho do cartão pode ser ajustado dinamicamente usando as classes utilitárias do Bootstrap ou CSS Grid. Aqui está um exemplo de dimensionamento de cartão responsivo:
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1h5>
<p class="card-text">Adjustable size based on parent grid.p>
div>
div>
div>
div>Posso personalizar fundos e bordas do cartão Bootstrap?
Sim, o Bootstrap oferece extensas classes de utilitários de personalização. Use bg-primary para cores de fundo e border-sucess para estilo de borda. Exemplo:
<div class="card bg-info border-danger">
<div class="card-body">
<h5 class="card-title">Custom Backgroundh5>
<p class="card-text">This card has a custom background and border.p>
div>
div>Como posso usar imagens com cartões?
Bootstrap suporta imagens em cartões usando card-img-top ou card-img-bottom. Exemplo:
<div class="card">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card with Imageh5>
<p class="card-text">This card includes a top image.p>
div>
div>Como usar o corpo do cartão de classe div no Bootstrap?
O corpo do cartão da classe div no Bootstrap define a área de conteúdo principal dentro de um cartão. Ele fornece preenchimento e garante espaçamento consistente para texto, imagens e outros elementos no cartão.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Titleh5>
<p class="card-text">This is some text within a card body.p>
div>
div>O que é o texto do cartão da classe P no Bootstrap?
O texto do cartão da classe p no Bootstrap é usado para estilizar o conteúdo textual dentro do corpo do cartão. Ele aplica estilos de tipografia padrão para fazer o texto parecer limpo e profissional.
<div class="card">
<div class="card-body">
<p class="card-text">This is an example of styled text inside a Bootstrap card.p>
div>
div>Como aumentar o tamanho do cartão no Bootstrap?
Para aumentar o tamanho do cartão, ajuste sua largura e altura usando w-100 para largura total ou especifique as dimensões usando estilos. Exemplo:
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Large Cardh5>
<p class="card-text">This card has an increased size for visibility.p>
div>
div>Como posso fazer cartões com a mesma altura?
Use .d-flex e .align-items-stretch:
<div class="row g-3">
<div class="col-md-4 d-flex">
<div class="card flex-fill">
<h5 class="card-title">Card 1h5>
<p class="card-text">Aligned with others.p>
div>
div>
div>