Tables Classes en bootstrap 5 | Expliqué
Tables avec un style de base
Dans le but de donner des tables, un style de base qui a un certain rembourrage et des diviseurs horizontaux utilisent le .tableau classe. Voici une démonstration d'un tableau de base.
Comment créer un tableau simple à l'aide de bootstrap 5
Supposons que vous souhaitiez générer une table simple, c'est ainsi que c'est fait.
Html
| Nom de l'auteur | Catégorie | Articles publiés |
|---|---|---|
| Max William | L'informatique | 267 |
| Ana James | La physique | 100 |
| Harry Robertson | La biologie | 150 |
Dans le code ci-dessus, nous plaçons la table à l'intérieur d'un conteneur div, puis pour générer le tableau que nous utilisons
| , | Pour créer la table. Sortir La table a reçu un style simple. Table avec une bordure Dans le but d'ajouter une bordure à votre table, vous devez utiliser le .de table bordée classe. Comment créer une table avec une bordure Créons une table avec une bordure. Html
Le tableau généré ici est le même que celui créé ci-dessus avec la seule différence qui, en plus de lui donner un style de base, nous ajoutons également les frontières en utilisant le .classe de table bordée. Sortir Les bordures ont été ajoutées avec succès à la table. Table sans frontières Une autre chose intéressante que vous pouvez faire en utilisant Bootstrap 5 est de faire des tables complètement sans bordure et pour cela, vous devez utiliser le .Table sans frappe classe. Comment créer une table sans bordure dans Bootstrap 5 Voici comment vous générez une table sans frontières. Html
Le code ci-dessus générera un tableau sans bordure ayant un style de base i.e. Il aura un certain rembourrage et séparateurs horizontaux, mais il n'aura pas de frontières. Sortir La classe fonctionne correctement. Table avec des lignes rayées Afin d'embellir votre table en générant des lignes dépouillées, utilisez le .à rayures classe. Comment créer une table avec des rangées rayées Pour comprendre le fonctionnement de cette classe, consultez l'exemple ci-dessous. Html
Le code ci-dessus générera un tableau ayant un style de base et des lignes rayées. Sortir Une table avec des rangées rayées a été générée avec succès. Table en survol Si vous souhaitez donner à vos lignes un état de survol, utilisez .tireur de table classe. Lorsque l'utilisateur amène la souris sur les lignes, un effet de survol avec une couleur d'arrière-plan gris sera généré. Comment créer une table en vol stationnaire Créons une table survolé. Html
En utilisant l'extrait de code ci-dessus, vous pouvez facilement générer une table de style simplement avec des rangées ayant un effet de survol. Sortir Nous avons généré une table en survol. Table avec des lignes colorées Vous pouvez également ajouter diverses couleurs à plusieurs lignes dans un tableau en utilisant les classes de couleurs fournies par bootstrap 5. Comment créer une table de lignes colorée dans Bootstrap 5 Supposons que vous souhaitiez donner à chaque ligne une couleur différente, puis suivez l'exemple ci-dessous. Html
Dans le code ci-dessus, nous donnons d'abord un fond sombre à la tête de table, puis chacune des autres lignes a été attribuée une couleur différente. Sortir Une table avec des lignes colorées a été générée avec succès. Toutes les classes de table associées aux couleurs de Bootstrap 5 sont données ci-dessous.
Tables réactives Dans le but de créer des tables réactives qui correspondent à la largeur de l'écran et modifier leur taille en conséquence, utilisez le .adapté à la table classe. Comment créer un tableau réactif à l'aide de bootstrap 5 Supposons que vous souhaitiez créer une table réactive pour votre page Web. Html
Dans le code ci-dessus, pour démontrer le concept de réactivité, nous avons ajouté plus de lignes. Parallèlement à cela, nous avons également généré un conteneur div supplémentaire et lui avons attribué le .classe réalisable de table. De plus, la table a un style de base. Sortir La classe fonctionne correctement. Diverses classes qui ajoutent une réactivité aux tables en fonction de la largeur de l'écran sont fournies ci-dessous. 1… la table qui a répondu à la table Pour la largeur d'écran moins de 576px. 2… la table de la table MD Pour la largeur d'écran inférieure à 768px. 3… la table en LG Pour la largeur d'écran moins de 992px. 4… Table-Response-XL Pour la largeur d'écran moins de 1200px. 5… Table-Response-xxl Pour la largeur d'écran moins de 1400px. Conclusion Les classes de table en bootstrap 5 vous permettent de styliser des tables de manière très facile et rapide. En utilisant ces classes, vous pouvez donner des tables un rembourrage, des séparateurs horizontaux, des couleurs, une bordure, un état de survol, etc. De plus, vous pouvez également rendre vos tables réactives en utilisant les classes associées aux tables de bootstrap 5. Toutes les classes de table ainsi que des exemples pertinents ont été discutées dans ce rapport.
|
|---|