{"id":27951,"date":"2021-05-28T19:40:00","date_gmt":"2021-05-28T16:40:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27951"},"modified":"2021-10-18T04:08:31","modified_gmt":"2021-10-18T01:08:31","slug":"como-criar-acordeao-bootstrap-dinamico","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-criar-acordeao-bootstrap-dinamico\/","title":{"rendered":"Como Criar Acorde\u00e3o Bootstrap Din\u00e2mico"},"content":{"rendered":"

Acorde\u00e3o (conte\u00fado recolh\u00edvel) \u00e9 a melhor maneira de alternar (ocultar e mostrar) conte\u00fado grande. Um FAQ \u00e9 um dos exemplos mais usados \u200b\u200bde acorde\u00e3o. O acorde\u00e3o \u00e9 usado para exibir mais dados em menos espa\u00e7o. Ele funciona em um formato de recolhimento-expans\u00e3o. Usando o acorde\u00e3o, pode-se ocultar e ver o conte\u00fado entre as diferentes se\u00e7\u00f5es.<\/p>\n

O Bootstrap vem com muitos componentes \u00fateis que podem ser facilmente integrados no site. Um deles \u00e9 o acorde\u00e3o que usaremos neste tutorial. Se voc\u00ea quiser ver como funciona o acorde\u00e3o do Bootstrap, verifique o exemplo aqui<\/a>.<\/p>\n

Neste artigo, mostrarei como fazer um acorde\u00e3o Bootstrap din\u00e2mico. Para fazer o acorde\u00e3o din\u00e2mico, buscaremos os resultados do banco de dados e criaremos o acorde\u00e3o com esses registros.<\/p>\n

Como adicionar acorde\u00e3o bootstrap est\u00e1tico no site<\/h3>\n

Adicionar o acorde\u00e3o Bootstrap est\u00e1tico no site \u00e9 muito f\u00e1cil. Voc\u00ea s\u00f3 precisa copiar o c\u00f3digo-fonte fornecido pelo Bootstrap e coloc\u00e1-lo onde quiser exibir o acorde\u00e3o. Abaixo est\u00e1 o c\u00f3digo de amostra de adi\u00e7\u00e3o de um acorde\u00e3o de bootstrap est\u00e1tico.<\/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
O c\u00f3digo acima exibir\u00e1 uma configura\u00e7\u00e3o est\u00e1tica do Bootstrap em sua p\u00e1gina da web. Se voc\u00ea preferir us\u00e1-lo com conte\u00fado est\u00e1tico, basta alterar o t\u00edtulo e o conte\u00fado do HTML acima.<\/p>\n
No entanto, o objetivo deste tutorial \u00e9 criar um acorde\u00e3o Bootstrap din\u00e2mico. Ent\u00e3o, continue lendo Eu mostro como nas pr\u00f3ximas etapas.<\/p>\n
Come\u00e7ando<\/h3>\n
Vamos supor que voc\u00ea precise mostrar faqs em acorde\u00e3o. Para os faqs, precisamos de uma tabela de banco de dados preenchida com algumas entradas fict\u00edcias. Portanto, crie um banco de dados chamado ‘bootstrap’ e execute a consulta abaixo para criar uma tabela dentro dele.<\/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
Depois de criar uma tabela, vamos adicionar algumas entradas fict\u00edcias a ela. Essas entradas fict\u00edcias ser\u00e3o usadas para criar um acorde\u00e3o din\u00e2mico.<\/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
A pr\u00f3xima parte \u00e9 escrever c\u00f3digo para conectar um banco de dados em PHP. Crie um arquivo index.php<\/code>e adicione o c\u00f3digo de conex\u00e3o conforme mostrado abaixo.<\/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
Uma vez que voc\u00ea conectou o banco de dados com sucesso, busque o resultado da tabela do banco de dados que iremos solicitar em um momento.<\/p>\n
$sql = \"SELECT * FROM faq ORDER BY id DESC\";\n$result = mysqli_query($con,$sql);<\/code><\/pre>\n
Crie um acorde\u00e3o de bootstrap din\u00e2mico<\/h3>\n
Voc\u00ea buscou os registros da tabela do banco de dados e os atribuiu \u00e0 vari\u00e1vel PHP $result<\/code>. Faremos um loop por essa vari\u00e1vel e tornaremos as coisas din\u00e2micas.<\/p>\n
Se voc\u00ea olhar atentamente para o c\u00f3digo HTML de sanfona, notar\u00e1 que o mesmo tipo de marca\u00e7\u00e3o se repete. Ao torn\u00e1-lo din\u00e2mico, temos que ajustar alguns dos atributos como id, class, aria expandido, aria-controls, etc. nesta marca\u00e7\u00e3o.<\/p>\n
Abaixo est\u00e1 o c\u00f3digo que gera um acorde\u00e3o Bootstrap din\u00e2mico.<\/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
Nosso c\u00f3digo final \u00e9 o seguinte.<\/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
\u00c9 isso! Espero que voc\u00ea entenda como criar um acorde\u00e3o Bootstrap din\u00e2mico. Por favor, compartilhe seus pensamentos e sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n