...
✅ Notizie, temi, plugin WEB e WordPress. Qui condividiamo suggerimenti e le migliori soluzioni per siti web.
Varie

Come creare una fisarmonica bootstrap dinamica

59
Contenuto
Come aggiungere una fisarmonica bootstrap statica nel sito web
Iniziare
Crea una fisarmonica bootstrap dinamica
articoli Correlati

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

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

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.

Come aggiungere una fisarmonica bootstrap statica nel sito web

Aggiungere la fisarmonica statica Bootstrap sul sito Web è semplicissimo. Devi solo copiare il codice sorgente fornito da Bootstrap e posizionarlo dove vuoi visualizzare la fisarmonica. Di seguito è riportato il codice di esempio per l’aggiunta di una fisarmonica bootstrap statica.

<html>
<head>
    <title>Accordion Examples</title>
    <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">
</head>
<body>
    <div class="accordion" id="accordionExample">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h2 class="mb-0">
                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Collapsible Group Item #1
                    </button>
                </h2>
            </div>
            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                <div class="card-body">
                    Anim 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.
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingTwo">
                <h2 class="mb-0">
                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Collapsible Group Item #2
                    </button>
                </h2>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                <div class="card-body">
                    Anim 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.
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Il codice sopra mostrerà 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.

Tuttavia, lo scopo di questo tutorial è creare una fisarmonica Bootstrap dinamica. Quindi, continua a leggere ti mostro come nei prossimi passaggi.

Iniziare

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.

CREATE TABLE `faq` ( `id` int(11) NOT NULL AUTO_INCREMENT,
 `title` text NOT NULL,
 `content` text NOT NULL,
 PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Dopo aver creato una tabella, aggiungiamo alcune voci fittizie. Queste voci fittizie verranno utilizzate per creare una fisarmonica dinamica.

INSERT INTO `faq` (`id`, `title`, `content`) VALUES
(1, 'Question 1', 'This is answer 1.'),
(2, 'Question 2', 'This is answer 2.'),
(3, 'Question 3', 'This is answer 3.');

La parte successiva è scrivere il codice per connettere un database in PHP. Crea un file index.phpe aggiungi il codice di connessione come mostrato di seguito.

$con = mysqli_connect("localhost", "MYSQL_USERNAME", "MYSQL_PASSWORD", "bootstrap");
 
// Check connection
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: ". mysqli_connect_error();
}

Una volta connesso con successo il database, recupera il risultato dalla tabella del database di cui avremo bisogno tra poco.

$sql = "SELECT * FROM faq ORDER BY id DESC";
$result = mysqli_query($con,$sql);

Crea una fisarmonica bootstrap dinamica

Hai recuperato i record dalla tabella del database e li hai assegnati alla variabile PHP $result. Esamineremo questa variabile e renderemo le cose dinamiche.

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.

Di seguito è riportato il codice che genera una fisarmonica Bootstrap dinamica.

<div class="accordion" id="accordionExample">
    <?php
    $i=1;
    while($row = mysqli_fetch_assoc($result)) {
        ?>
        <div class="card">
            <div class="card-header" id="heading<?php echo $i; ?>">
                <h2 class="mb-0">
                    <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; ?>">
                        <?php echo $row['title']; ?>
                    </button>
                </h2>
            </div>
            <div id="collapse<?php echo $i; ?>" class="collapse <?php if($i==1) echo 'show'; ?>" aria-labelledby="heading<?php echo $i; ?>" data-parent="#accordionExample">
                <div class="card-body">
                    <?php echo $row['content']; ?>
                </div>
            </div>
        </div>
        <?php
        $i++;
    }
    ?>
</div>

Il nostro codice finale è il seguente.

<?php
$con = mysqli_connect("localhost", "root", "", "bootstrap");
 
// Check connection
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: ". mysqli_connect_error();
}
 
$sql = "SELECT * FROM faq ORDER BY id DESC";
$result = mysqli_query($con,$sql);
?>
 
<html>
<head>
    <title>Accordion Examples</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
    <div class="accordion" id="accordionExample">
        <?php
        $i=1;
        while($row = mysqli_fetch_assoc($result)) {
            ?>
            <div class="card">
                <div class="card-header" id="heading<?php echo $i; ?>">
                    <h2 class="mb-0">
                        <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; ?>">
                            <?php echo $row['title']; ?>
                        </button>
                    </h2>
                </div>
                <div id="collapse<?php echo $i; ?>" class="collapse <?php if($i==1) echo 'show'; ?>" aria-labelledby="heading<?php echo $i; ?>" data-parent="#accordionExample">
                    <div class="card-body">
                        <?php echo $row['content']; ?>
                    </div>
                </div>
            </div>
            <?php
            $i++;
        }
        ?>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Questo è tutto! Spero che tu capisca come creare una fisarmonica Bootstrap dinamica. Per favore condividi i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.

articoli Correlati

Fonte di registrazione: artisansweb.net
Potrebbe piacerti anche Altri di autore

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More