Tabelas aulas no bootstrap 5 | Explicado
Mesas com um estilo básico
Com o objetivo de dar tabelas, um estilo básico que tem um certo preenchimento e divisores horizontais usam o .mesa aula. Aqui está uma demonstração de uma tabela básica.
Como criar uma tabela simples usando o bootstrap 5
Suponha que você queira gerar uma tabela simples, então é assim que é feito.
Html
| Nome do autor | Categoria | Artigos publicados |
|---|---|---|
| Max William | Ciência da Computação | 267 |
| Ana James | Física | 100 |
| Harry Robertson | Biologia | 150 |
No código acima, estamos colocando a tabela dentro de um recipiente de div e depois para gerar a tabela, estamos usando o
| , | Para criar a tabela. Saída A mesa recebeu um estilo simples. Tabela com uma borda Com o objetivo de adicionar uma borda à sua mesa, você precisa usar o .Table-Bordered aula. Como criar uma tabela com borda Vamos criar uma tabela com uma borda. Html
A tabela gerada aqui é a mesma que a criada acima, com a única diferença que aqui, além de dar um estilo básico, também estamos adicionando fronteiras usando o .classe de mesa. Saída Fronteiras foram adicionadas com sucesso à tabela. Mesa sem fronteiras Outra coisa interessante que você pode fazer usando o bootstrap 5 é fazer mesas completamente sem fronteiras e, para fazer isso, você precisa usar o .Table-borderless aula. Como criar uma tabela sem fronteiras no bootstrap 5 Aqui está como você gera uma tabela sem fronteiras. Html
O código acima gerará uma tabela sem fronteiras com um estilo básico que eu.e. terá um certo preenchimento e divisores horizontais, mas não terá fronteiras. Saída A classe está funcionando corretamente. Mesa com linhas listradas Para embelezar sua tabela, gerando linhas despojadas, use o .Tabela com listras aula. Como criar uma mesa com linhas listradas Para entender o funcionamento desta aula, consulte o exemplo abaixo. Html
O código acima gerará uma tabela com um estilo básico e linhas listradas. Saída Uma mesa com linhas listradas foi gerada com sucesso. Tabela em paurna Se você deseja dar o estado do pau de suas linhas, use -se, use .Aunchas da mesa aula. Quando o usuário traz o mouse nas linhas, um efeito de pairar com uma cor de fundo cinza será gerado. Como criar uma tabela pairável Vamos criar uma tabela pairável. Html
Usando o trecho de código acima, você pode gerar facilmente uma mesa simplesmente com estilo, com linhas tendo um efeito de pairar. Saída Nós geramos uma tabela pairável. Mesa com linhas coloridas Você também pode adicionar várias cores a várias linhas em uma tabela usando as classes de cores fornecidas pela Bootstrap 5. Como criar uma tabela de linhas coloridas no bootstrap 5 Suponha que você queira dar a cada linha uma cor diferente e siga o exemplo abaixo. Html
No código acima, estamos em primeiro lugar, dando um fundo escuro à cabeça da mesa e, em seguida, cada uma das outras linhas recebeu uma cor diferente. Saída Uma mesa com linhas coloridas foi gerada com sucesso. Todas as classes de tabela associadas às cores no bootstrap 5 são dadas abaixo.
Tabelas responsivas Com o objetivo de criar tabelas responsivas que correspondam à largura da tela e alteram seu tamanho de acordo, use o .responsivo à mesa aula. Como criar uma tabela responsiva usando o bootstrap 5 Suponha que você queira construir uma tabela responsiva para sua página da web. Html
No código acima, para demonstrar o conceito de capacidade de resposta, adicionamos mais linhas. Junto com isso, também geramos um contêiner de div e atribuímos o .classe responsiva à mesa. Além disso, a tabela tem um estilo básico. Saída A classe está funcionando corretamente. Várias classes que adicionam capacidade de resposta às tabelas, dependendo da largura da tela, são fornecidas abaixo. 1… Tabela Responsiva-Sm Para largura da tela menor que 576px. 2… MD-responsivo à mesa Para largura da tela menor que 768px. 3… LG-LG, responsivo à mesa Para largura da tela menor que 992px. 4… Tabela-responsiva-xl Para largura da tela menor que 1200px. 5… Tabela-responsiva-xxl Para largura da tela menor que 1400px. Conclusão Aulas de tabela no bootstrap 5 permitem que você estilize mesas de uma maneira muito fácil e rápida. Usando essas classes, você pode dar às mesas um pouco de preenchimento, divisores horizontais, cores, borda, estado de pairar, etc. Além disso, você também pode tornar suas mesas responsivas usando as classes associadas às tabelas no bootstrap 5. Todas as classes de tabela, juntamente com exemplos relevantes, foram discutidas neste relatório.
|
|---|