Uma estrutura CSS chamada Bootstrap ajuda a criar sites responsivos. Oferece classes predefinidas para adicionar estilo aos elementos html. Por exemplo, para criar um componente de tabela, o “mesa”A classe é utilizada. Da mesma forma, para criar uma tabela com o efeito pairar, o “Aunchas da mesa”A classe pode ser usada.
Este artigo descreverá:
Como fazer uma tabela de bootstrap com linhas pairáveis?
Como adicionar cores personalizadas às linhas de tabela no mouse no bootstrap?
Como fazer uma tabela de bootstrap com linhas pairáveis?
Bootstrap “Table-Bordered" e "Aunchas da mesaOs classes são usados para criar uma mesa delimitada com um efeito de pairar. O "Aunchas da mesa”:flutuar”Pseudo-classe e o“cor de fundo”Propriedade com o valor“RGBA (0,0,0,.075)”.
Exemplo
Vamos implementá -lo através de um exemplo:
Crie uma tabela usando o HTML “
" marcação. Atribua o “mesa","Table-Bordered", e "Aunchas da mesa" Aulas.
O "”A tag é utilizada para mencionar o cabeçalho da tabela.
No exemplo declarado abaixo, estamos fazendo o corpo da tabela utilizando o “" elemento.
O "
”As tags são utilizadas para criar as linhas de tabela, o“
”As tags são para títulos e os“
”As tags são utilizadas para adicionar dados da tabela.
Html
Nome
Jake
Margarida
Curso
Ciência da Computação
Física
País
Estados Unidos
China
É observado a partir do GIF abaixo, as linhas de tabela com o efeito de pairar foram criadas com sucesso:
Como adicionar cores personalizadas às linhas de tabela no mouse no bootstrap?
Você também pode especificar uma cor de pairar de acordo com sua necessidade. Para fazer isso, implemente o seguinte código na seção CSS:
O "TR: Passe o mouse”É usado para aplicar o efeito do pau ao“
" elemento.
Saída
Dessa forma, a tabela de bootstrap com o efeito do pau é criada.
Conclusão
A tabela de bootstrap com o efeito de pairar é criada usando o “Aunchas da mesa" aula. Esta aula adicionará o efeito do pairar nas linhas da tabela com o “cor de fundo”Propriedade com o valor“RGBA (0,0,0,.075)”. No entanto, você pode personalizar a cor do pairar usando CSS. Esta posta.