Como usar o Bootstrap 5 Cards
Este artigo ilustrará o uso de cartões de bootstrap cobrindo os seguintes aspectos:
- Como criar um cartão simples?
- Como criar um cabeçalho de cartão e rodapé?
- Como criar um cartão com conteúdo?
- Como criar um cartão com uma imagem?
- Como criar um botão em um cartão?
- Como estilizar o cartão?
- Como criar um cartão com sobreposições de imagem?
- Como criar grupos de lista no cartão?
- Como criar uma barra de navegação no cartão?
Como criar um cartão simples?
O "cartão”Classe com a“Cartão-corpo”É utilizado para fazer um cartão simples.
Vamos analisar o exemplo para obter uma melhor compreensão.
Exemplo
No arquivo HTML, siga as etapas para criar um cartão simples:
- Adicione um “” elemento e atribua uma classe “recipiente”. Este é um bloco básico de construção que contém preenchimento e alinhamento ao conteúdo dentro de um dispositivo específico.
- Então, atribua uma classe “cartão”Utilizado para criar um cartão básico.
- Para especificar o conteúdo dentro do cartão, crie uma div com a classe “Cartão-corpo”Que contém os dados necessários do cartão:
Cartão Linuxhint
Um cartão no bootstrap 5 é uma caixa com estofamento em torno de seu texto e uma borda.
Saída
Como criar um cabeçalho de cartão e rodapé?
O "Cardeiro" e a "Footer de cartão”As aulas são utilizadas para definir o cabeçalho do cartão e o rodapé. Fazer isso:
- Defina o elemento com a classe “recipiente" e "M-4”.
- Ajuste a div com a classe “cartão”.
- Defina o cabeçalho do cartão utilizando a classe “Cardeiro”.
- As informações do cartão são colocadas usando o “Footer de cartão”Classe no rodapé do cartão:
Bootstrap 5 cartão
Escola Linuxhint
Um cartão no bootstrap 5 é uma caixa com uma borda e preenchimento ao redor do texto.
Contato: xxx-xxx-xxxx
Saída
Como criar um cartão com conteúdo?
Você pode adicionar conteúdo ao cartão, utilizando o “Cartão-corpoContêiner de conteúdo extensível. Abaixo as aulas mencionadas devem ser incluídas nesta classe:
- ““título de cartão”Ajusta o título no cartão.
- ““texto-texto”Descreve o texto com as propriedades de estilo na página.
- ““Link para cartão”Associa um link de outra fonte na página:
Cartão Linuxhint
Linuxhint é um excelente site de tutorial.
Lição introdutória
Visite o nosso site
Saída
Como criar um cartão com uma imagem?
A maneira mais popular de projetar um cartão é adicionar uma imagem ao cartão. Para fazer isso, o bootstrap “Cartão-IMG-top”A classe é utilizada da seguinte maneira:
Escola Linuxhint
Para obter mais informações, visite nosso site oficial.
Clique aqui
Contato: xxx-xxx-xxxx
Saída
Como criar um botão em um cartão?
O elemento do botão pode ser adicionado ao cartão. Para esse fim, implemente o “btn”Classe dentro do elemento. O "Btn-Primary”Indica a ação principal em um grupo de botões e adiciona peso visual adicional a ele:
Escola Linuxhint
Para obter mais informações, visite nosso site oficial.
Clique aqui
Contato: xxx-xxx-xxxx
Saída
Como estilizar o cartão?
Para estilizar o contêiner de cartões de bootstrap, muitas aulas podem ser utilizadas assim:
Linuxhint
Título do cartão primário
Fornecemos artigos e palestras em vídeo ao mundo.
Linuxhint
Título do cartão primário
Fornecemos artigos e palestras em vídeo ao mundo.
Saída
Como criar um cartão com sobreposições de imagem?
O "Cartão-IMG-overlay”A classe ajusta a imagem como um fundo. Para utilizá -lo, em primeiro lugar, defina a imagem do cartão, utilizando o “" marcação. Além disso, a largura da imagem é definida como “100%”:
Departamento de Vídeo
Fornecemos vídeos de alta qualidade sobre tópicos de ciência da computação.
Mais informações
Saída
Como criar grupos de lista no cartão?
Para identificar os itens do grupo em um cartão, implemente o div “recipiente" aula. Em seguida, adicione um recipiente "div" junto com a classe "cartão”.
Para criar uma lista, aplique o “" e "”Tags com classes apropriadas:
- Html
- Bootstrap
- JavaScript
A seguir, a descrição das classes de bootstrap acima usadas:
- Para criar grupos de lista, o bootstrap “Grupo de lista”A classe pode ser aplicada. Ajuda a especificar uma lista de conteúdo para o cartão.
- Adicionando o “List-Group-Flush”, Você pode exibir os itens de grupo de listas de borda a ponta em um contêiner pai, i i.e., cartões. Para fazer isso, ele remove os cantos e fronteiras arredondadas.
- O "Items-group-group”Define os itens da lista.
Saída
Como criar uma barra de navegação no cartão?
Você também pode adicionar uma barra de navegação aos cartões também. Mais especificamente, uma barra de navegação adequada e bem alinhada é criada usando várias classes:
Cartão de saúde
Siga o guia para o seu registro
Cadastro
Aqui:
- ““NAV NAV-TABS”A classe é utilizada para criar guias de navegação.
- ““CARTÃO CABELHOR”A classe ajuda a estilizar as guias no cabeçalho do cartão.
- ““NAV-ITEM”Fornece estilo para os itens de navegação.
- ““Nav-link”É usado para estabelecer o vínculo de outros blocos de navegação.
Saída
Isso se tratava de usar as classes de bootstrap para criar cartões bem formatados.
Conclusão
O Bootstrap 5 utiliza inúmeras classes para estilizar e criar os cartões. Essas classes ajudam a ajustar as informações em um formato estruturado. Algumas das aulas são “título de cartão","texto-texto","Cardeiro","Footer de cartão", e muitos mais. Essas classes oferecem funcionalidades, como especificar o título, texto, cabeçalho e rodapé do cartão. Este artigo demonstrou como usar o Bootstrap 5 cartões com diferentes funcionalidades.