Alterar a cor do cabeçalho da tabela usando bootstrap
As tabelas são os componentes do HTML que são utilizados para exibir informações em um formato estruturado. Bootstrap nos oferece para alterar as cores dos componentes da tabela muito rapidamente. Isso pode ser feito apenas usando as classes de cores dentro do elemento da tabela, como o “Table Danger”Classe que aplica uma cor vermelha ao componente da tabela.
Este post explicou o método para alterar a cor do cabeçalho da tabela usando o bootstrap.
Pré -requisito: Crie uma tabela
Primeiro, crie uma tabela seguindo as etapas:
- Utilize o “
”Elemento para criar uma tabela.
- Dentro deste elemento, adicione o “”Tag para especificar o título. Crie uma linha usando o “
”Tag e adicione o“ ”Tag para adicionar um título. - Então vem a parte do corpo, o “”O elemento é utilizado para especificar o corpo da tabela.
- Dentro do corpo, crie linhas para os dados. Por exemplo, o primeiro “
”Adiciona uma imagem e a segunda“ ”O elemento adiciona a descrição relevante. Aqui está o código HTML:
Imagem Nome do dispositivo Computador portátil Fone de ouvido Microfone de língua pública Saída
Pode -se observar que a tabela foi criada com sucesso. Agora, vamos ver como ajustar a cor do cabeçalho da tabela na próxima seção.
Como alterar a cor do cabeçalho da tabela usando o bootstrap?
A cor do cabeçalho da tabela pode ser alterada usando o “mesa-*”Classe, onde o asterisco“*”Simboliza a cor. Por exemplo, "Tabela-escura"Para a cor cinza escura,"Tabela-sucesso”Para a cor verde, e muito mais.
Vamos conferir alguns exemplos de troca de cor do cabeçalho da tabela.
Exemplo 1: aplique a cor azul no cabeçalho da mesa usando o bootstrap
Adicione o "Tabela-primária”Classe para aplicar a cor azul ao cabeçalho da mesa:
Saída
Exemplo 2: aplique a cor verde no cabeçalho da mesa usando o bootstrap
Especifique o "Tabela-sucesso”Classe para aplicar a cor verde ao cabeçalho da mesa:
Saída
É assim que você pode alterar a cor do fone de ouvido da tabela usando bootstrap.
Conclusão
No bootstrap, a cor do cabeçalho da tabela pode ser alterada usando o “mesa-*" aula. Primeiro, crie a tabela usando o html “
" elemento. Então, especifique o “”Tag para o cabeçalho e o“”Tag para o corpo da tabela. Adicione a classe "Table-*" à tag "" para definir a cor do cabeçalho, como o "Tabela-primária”Define a cor azul, e muito mais. Este post explicou como criar uma tabela e como podemos alterar a cor do cabeçalho usando o bootstrap.
- « Build Docker de imagem limpa usando -no-cache
- Bootstrap Text Aviso de cor com exemplos de código »
- Dentro deste elemento, adicione o “”Tag para especificar o título. Crie uma linha usando o “