{"id":24981,"date":"2021-05-28T20:05:00","date_gmt":"2021-05-28T17:05:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24981"},"modified":"2021-10-18T02:12:53","modified_gmt":"2021-10-17T23:12:53","slug":"comment-creer-un-accordeon-bootstrap-dynamique","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-creer-un-accordeon-bootstrap-dynamique\/","title":{"rendered":"Comment cr\u00e9er un accord\u00e9on Bootstrap dynamique"},"content":{"rendered":"

L’accord\u00e9on (contenu r\u00e9ductible) est le meilleur moyen de basculer (masquer et afficher) un contenu volumineux. Une FAQ est l’un des exemples couramment utilis\u00e9s de l’accord\u00e9on. L’accord\u00e9on est utilis\u00e9 pour afficher plus de donn\u00e9es dans moins d’espace. Il fonctionne sur un format de r\u00e9duction-d\u00e9veloppement. En utilisant l’accord\u00e9on, on peut masquer et voir le contenu entre les diff\u00e9rentes sections.<\/p>\n

Bootstrap est livr\u00e9 avec de nombreux composants utiles qui peuvent facilement \u00eatre int\u00e9gr\u00e9s sur le site Web. L’un d’eux est l’accord\u00e9on que nous utiliserons dans ce tutoriel. Si vous voulez voir comment fonctionne l’accord\u00e9on de Bootstrap, consultez l’ exemple ici<\/a>.<\/p>\n

Dans cet article, je vous montre comment fabriquer un accord\u00e9on Bootstrap dynamique. Pour cr\u00e9er l’accord\u00e9on dynamique, nous allons r\u00e9cup\u00e9rer les r\u00e9sultats de la base de donn\u00e9es et cr\u00e9er un accord\u00e9on avec ces enregistrements.<\/p>\n

Comment ajouter un accord\u00e9on Bootstrap statique dans le site Web<\/h3>\n

L’ajout de l’accord\u00e9on Bootstrap statique sur le site Web est tr\u00e8s simple. Il vous suffit de copier le code source fourni par Bootstrap et de le placer l\u00e0 o\u00f9 vous souhaitez afficher l’accord\u00e9on. Vous trouverez ci-dessous l’exemple de code d’ajout d’un accord\u00e9on bootstrap statique.<\/p>\n

<html>\n<head>\n\u00a0\u00a0\u00a0\u00a0<title>Accordion Examples<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH\/1fQ784\/j6cY\/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div class=\"accordion\" id=\"accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-header\" id=\"headingOne\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2 class=\"mb-0\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button class=\"btn btn-link\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapseOne\" aria-expanded=\"true\" aria-controls=\"collapseOne\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Collapsible Group Item #1\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"collapseOne\" class=\"collapse show\" aria-labelledby=\"headingOne\" data-parent=\"#accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-body\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-header\" id=\"headingTwo\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2 class=\"mb-0\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button class=\"btn btn-link collapsed\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapseTwo\" aria-expanded=\"false\" aria-controls=\"collapseTwo\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Collapsible Group Item #2\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"collapseTwo\" class=\"collapse\" aria-labelledby=\"headingTwo\" data-parent=\"#accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-body\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js\" integrity=\"sha384-q8i\/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigin=\"anonymous\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js\" integrity=\"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf\/nJGzIxFDsf4x0xIM+B07jRM\" crossorigin=\"anonymous\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
Le code ci-dessus affichera l’accord\u00e9on Bootstrap statique sur votre page Web. Si vous pr\u00e9f\u00e9rez l’utiliser avec du contenu statique, il vous suffit de modifier le titre et le contenu du code HTML ci-dessus.<\/p>\n
Cependant, le but de ce tutoriel est de cr\u00e9er un accord\u00e9on Bootstrap dynamique. Alors, lisez la suite, je vous montre comment dans les prochaines \u00e9tapes.<\/p>\n
Commencer<\/h3>\n
Supposons que vous ayez besoin d’afficher les faqs en accord\u00e9on. Pour les FAQ, nous avons besoin d’une table de base de donn\u00e9es remplie de quelques entr\u00e9es factices. Alors, cr\u00e9ez une base de donn\u00e9es appel\u00e9e "bootstrap" et ex\u00e9cutez la requ\u00eate ci-dessous pour cr\u00e9er une table \u00e0 l’int\u00e9rieur.<\/p>\n
CREATE TABLE `faq` (\u00a0`id` int(11) NOT NULL AUTO_INCREMENT,\n\u00a0`title` text NOT NULL,\n\u00a0`content` text NOT NULL,\n\u00a0PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;<\/code><\/pre>\n
Apr\u00e8s avoir cr\u00e9\u00e9 une table, ajoutons-y quelques entr\u00e9es factices. Ces entr\u00e9es factices seront utilis\u00e9es pour cr\u00e9er un accord\u00e9on dynamique.<\/p>\n
INSERT INTO `faq` (`id`, `title`, `content`) VALUES\n(1, 'Question 1', 'This is answer 1.'),\n(2, 'Question 2', 'This is answer 2.'),\n(3, 'Question 3', 'This is answer 3.');<\/code><\/pre>\n
La partie suivante consiste \u00e0 \u00e9crire du code pour connecter une base de donn\u00e9es en PHP. Cr\u00e9ez un fichier index.php<\/code>et ajoutez le code de connexion comme indiqu\u00e9 ci-dessous.<\/p>\n
$con = mysqli_connect(\"localhost\", \"MYSQL_USERNAME\", \"MYSQL_PASSWORD\", \"bootstrap\");\n\u00a0\n\/\/ Check connection\nif (mysqli_connect_errno()) {\n\u00a0\u00a0\u00a0\u00a0echo \"Failed to connect to MySQL: \". mysqli_connect_error();\n}<\/code><\/pre>\n
Une fois que vous avez connect\u00e9 la base de donn\u00e9es avec succ\u00e8s, r\u00e9cup\u00e9rez le r\u00e9sultat de la table de base de donn\u00e9es dont nous aurons besoin dans un instant.<\/p>\n
$sql = \"SELECT * FROM faq ORDER BY id DESC\";\n$result = mysqli_query($con,$sql);<\/code><\/pre>\n
Cr\u00e9er un accord\u00e9on Bootstrap dynamique<\/h3>\n
Vous avez r\u00e9cup\u00e9r\u00e9 les enregistrements de la table de la base de donn\u00e9es et les avez affect\u00e9s \u00e0 la variable PHP $result<\/code>. Nous allons parcourir cette variable et rendre les choses dynamiques.<\/p>\n
Si vous regardez attentivement le code HTML de l’accord\u00e9on, vous remarquerez que le m\u00eame type de balisage se r\u00e9p\u00e8te. Tout en le rendant dynamique, nous devons modifier certains des attributs tels que id, class, aria-expanded, aria-controls, etc. dans ce balisage.<\/p>\n
Vous trouverez ci-dessous le code qui g\u00e9n\u00e8re un accord\u00e9on Bootstrap dynamique.<\/p>\n
<div class=\"accordion\" id=\"accordionExample\">\n\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0$i=1;\n\u00a0\u00a0\u00a0\u00a0while($row = mysqli_fetch_assoc($result)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-header\" id=\"heading<?php echo $i; ?>\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2 class=\"mb-0\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button class=\"btn btn-link <?php if($i>1) echo \"collapsed\"; ?>\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse<?php echo $i; ?>\" aria-expanded=\"<?php echo ($i==1)? 'true': 'false'; ?>\" aria-controls=\"collapse<?php echo $i; ?>\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php echo $row['title']; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"collapse<?php echo $i; ?>\" class=\"collapse <?php if($i==1) echo 'show'; ?>\" aria-labelledby=\"heading<?php echo $i; ?>\" data-parent=\"#accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-body\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php echo $row['content']; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$i++;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0?>\n<\/div><\/code><\/pre>\n
Notre code final est le suivant.<\/p>\n
<?php\n$con = mysqli_connect(\"localhost\", \"root\", \"\", \"bootstrap\");\n\u00a0\n\/\/ Check connection\nif (mysqli_connect_errno()) {\n\u00a0\u00a0\u00a0\u00a0echo \"Failed to connect to MySQL: \". mysqli_connect_error();\n}\n\u00a0\n$sql = \"SELECT * FROM faq ORDER BY id DESC\";\n$result = mysqli_query($con,$sql);\n?>\n\u00a0\n<html>\n<head>\n\u00a0\u00a0\u00a0\u00a0<title>Accordion Examples<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\" \/>\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div class=\"accordion\" id=\"accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$i=1;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0while($row = mysqli_fetch_assoc($result)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-header\" id=\"heading<?php echo $i; ?>\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2 class=\"mb-0\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button class=\"btn btn-link <?php if($i>1) echo \"collapsed\"; ?>\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse<?php echo $i; ?>\" aria-expanded=\"<?php echo ($i==1)? 'true': 'false'; ?>\" aria-controls=\"collapse<?php echo $i; ?>\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php echo $row['title']; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"collapse<?php echo $i; ?>\" class=\"collapse <?php if($i==1) echo 'show'; ?>\" aria-labelledby=\"heading<?php echo $i; ?>\" data-parent=\"#accordionExample\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-body\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php echo $row['content']; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$i++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
C’est \u00e7a! J’esp\u00e8re que vous comprenez comment cr\u00e9er un accord\u00e9on Bootstrap dynamique. S’il vous pla\u00eet partager vos pens\u00e9es et suggestions dans la section commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n