table avec Bootstrap 5

Version imprimable

Bonjour,
je connais Bootstrap ainsi que Wordpress (grosso modo pour les 2), mais c'est la première fois que j'insère Bootstrap dans un site Wordpress. Mon intention est de faire une table avec des largeurs de colonnes différentes.

Tout d'abord, j'ai intégré Bootstrap dans Wordpress. Pour cela, j'ai ajouté
Code:

1 2 3 4 5 6 /* *ajouter bootstrap */ wp_enqueue_script( 'bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js', array( 'jquery' ), null, true ); wp_enqueue_style( 'bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css');
dans functions.php du thème enfant.

Le plugin Wappalyzer de Firefox l'a bien détecté.

Je suis parti ensuite d'un tuto. Il propose plusieurs tableaux Bootstrap. J'en ai retenu un qui permet de régler la largeur de chaque colonne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html> <html> <head> <title>Cours Bootstrap 4</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <div class="container"> <div class="row">  <div class="col-2 bg-info">1er élément</div>  <div class="col-4 bg-warning">2è élément</div>  <div class="col-6 bg-success">3è élément</div> </div> </div> </body> </html>
Pour le contenu de la page Wordpress, je ne retiens que le contenu du body :
Code:

1 2 3 4 5 6 7 8 9 10 <div class="container"> <div class="row">  <div class="col-2 bg-info">1er élément</div>  <div class="col-4 bg-warning">2è élément</div>  <div class="col-6 bg-success">3è élément</div> </div> </div>
Le souci est qu'au lieu que les 3 cellules soient sur une seule ligne, chacune est placée sur une ligne différente (alors que si je teste ce code en dehors de Wordpress, elles sont sur une seule ligne). Peut-on me corriger ?

10/07/2022, 23h49
laurentSc

Ne sachant pas utiliser Bootstrap dans Wordpress, j'ai fait du html + du CSS simples...
11/07/2022, 09h57
grunk

Tu parles de table mais tu fais des div. Quelle est ton but ?
Afficher des données (genre excel)? => <table>
Ou structurer ton interface ? => Grille avec row et col

Ensuite concernant wordpress est tu certains que tu n'as pas un autre CSS qui vient écraser celui que tu insères ?
C'est assez simple à voir avec l'inspecteur d'élément de la console de développeur du navigateur (F12)

Pour bootstrap la valeur sure c'est la doc officielle , le reste , il faut se méfier des différences entre les versions.
11/07/2022, 11h40
laurentSc

Bonjour,
dans mon idée, il était possible de créer un tableau avec des div + du CSS, il est probable en effet que le CSS ait été écrasé mais je ne peux vérifier car j'ai écrasé le code qui utilisait Bootstrap par une version avec <table>
11/07/2022, 14h13
grunk

C'est possible de créer un tableau mais il faut distinguer 2 cas :

- Soit on affiche des données tabulaire , auquel cas on utilise la balise <table>
- Soit on veux faire de la mise en page auquel cas on utilise une grille avec par exemple des des <div>

Il y'a 20 ans la mise en page se faisait avec des <table> et c'est globalement une mauvaise pratique car on détourne un élément de son usage. Aujourdhui tout le monde utilse des grilles (généralement basée sur les flexbox) pour la mise en page mais ca ne veux pas dire qu'il ne faut pas utiliser des tables quand elles sont utiles
11/07/2022, 14h22
laurentSc

Citation:

Envoyé par grunk

Il y'a 20 ans la mise en page se faisait avec des <table>

Même il y a 16 ans, vu que c'était le cas quand j'ai démarré le développement web...et à l'époque, on faisait beaucoup de mise en page à l'aide de balises html, aujourd'hui remplacées par du CSS.
11/07/2022, 22h42
grunk

En 2000 je publiais mon premier site réalisé avec dreamweaver 3 .... plein de tableaux pour la mise en page , hébérgé chez Lycos :mrgreen:
CA nous rajeunis pas :P
11/07/2022, 23h04
laurentSc

Citation:

Envoyé par grunk

CA nous rajeunis pas

Amusant que quelqu'un qui a 20 ans de moins que moi disent ça :zoubi:

Donc, tu as codé à l'âge de 16 ans ! Quelle précocité :ccool: