{"id":25267,"date":"2021-05-28T19:35:00","date_gmt":"2021-05-28T16:35:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25267"},"modified":"2021-10-18T03:09:33","modified_gmt":"2021-10-18T00:09:33","slug":"come-creare-una-fisarmonica-bootstrap-dinamica","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-creare-una-fisarmonica-bootstrap-dinamica\/","title":{"rendered":"Come creare una fisarmonica bootstrap dinamica"},"content":{"rendered":"

Accordion (contenuto pieghevole) \u00e8 il modo migliore per attivare (nascondere e mostrare) contenuti di grandi dimensioni. Una FAQ \u00e8 uno degli esempi comunemente usati della fisarmonica. La fisarmonica viene utilizzata per visualizzare pi\u00f9 dati in meno spazio. Funziona su un formato comprimi-espandi. Usando la fisarmonica si pu\u00f2 nascondere e vedere il contenuto tra le diverse sezioni.<\/p>\n

Bootstrap include molti componenti utili che possono essere facilmente integrati nel sito web. Uno di questi \u00e8 la fisarmonica che useremo in questo tutorial. Se vuoi vedere come funziona la fisarmonica di Bootstrap, dai un’occhiata all’esempio qui<\/a>.<\/p>\n

In questo articolo, ti mostro come realizzare una fisarmonica Bootstrap dinamica. Per creare la fisarmonica dinamica, recupereremo i risultati dal database e creeremo la fisarmonica con questi record.<\/p>\n

Come aggiungere una fisarmonica bootstrap statica nel sito web<\/h3>\n

Aggiungere la fisarmonica statica Bootstrap sul sito Web \u00e8 semplicissimo. Devi solo copiare il codice sorgente fornito da Bootstrap e posizionarlo dove vuoi visualizzare la fisarmonica. Di seguito \u00e8 riportato il codice di esempio per l’aggiunta di una fisarmonica bootstrap statica.<\/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
Il codice sopra mostrer\u00e0 la fisarmonica Bootstrap statica sulla tua pagina web. Se preferisci utilizzarlo con contenuto statico, devi solo modificare il titolo e il contenuto dall’HTML sopra.<\/p>\n
Tuttavia, lo scopo di questo tutorial \u00e8 creare una fisarmonica Bootstrap dinamica. Quindi, continua a leggere ti mostro come nei prossimi passaggi.<\/p>\n
Iniziare<\/h3>\n
Supponiamo che tu debba mostrare le faq nella fisarmonica. Per le faq, abbiamo bisogno di una tabella di database riempita con alcune voci fittizie. Quindi, crea un database chiamato "bootstrap" ed esegui la query seguente per creare una tabella al suo interno.<\/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
Dopo aver creato una tabella, aggiungiamo alcune voci fittizie. Queste voci fittizie verranno utilizzate per creare una fisarmonica dinamica.<\/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 parte successiva \u00e8 scrivere il codice per connettere un database in PHP. Crea un file index.php<\/code>e aggiungi il codice di connessione come mostrato di seguito.<\/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
Una volta connesso con successo il database, recupera il risultato dalla tabella del database di cui avremo bisogno tra poco.<\/p>\n
$sql = \"SELECT * FROM faq ORDER BY id DESC\";\n$result = mysqli_query($con,$sql);<\/code><\/pre>\n
Crea una fisarmonica bootstrap dinamica<\/h3>\n
Hai recuperato i record dalla tabella del database e li hai assegnati alla variabile PHP $result<\/code>. Esamineremo questa variabile e renderemo le cose dinamiche.<\/p>\n
Se osservi attentamente il codice HTML di fisarmonica, noterai che lo stesso tipo di markup viene ripetuto. Mentre lo rendiamo dinamico, dobbiamo modificare alcuni degli attributi come id, class, aria-expanded, aria-controls, ecc. in questo markup.<\/p>\n
Di seguito \u00e8 riportato il codice che genera una fisarmonica Bootstrap dinamica.<\/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
Il nostro codice finale \u00e8 il seguente.<\/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
Questo \u00e8 tutto! Spero che tu capisca come creare una fisarmonica Bootstrap dinamica. Per favore condividi i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.<\/p>\n
articoli Correlati<\/h4>\n