Kuidas luua dünaamilist alglaadimisakordi
Akordion (kokkupandav sisu) on parim viis suure sisu vahetamiseks (peitmiseks ja kuvamiseks). Korduma kippuvad küsimused on üks akordioni levinumaid näiteid. Akordionit kasutatakse suurema hulga andmete kuvamiseks väiksemas ruumis. See töötab ahenda-laienda-vormingus. Akordioni abil saab peita ja vaadata sisu erinevate osade vahel.
Bootstrap sisaldab palju kasulikke komponente, mida saab hõlpsasti veebisaidile integreerida. Üks neist on akordion, mida me selles õpetuses kasutame. Kui soovite näha, kuidas Bootstrapi akordion töötab, vaadake siin näidet.
Selles artiklis näitan teile, kuidas teha dünaamilist Bootstrapi akordioni. Dünaamilise akordioni tegemiseks toome andmebaasist tulemused ja loome nende kirjetega akordioni.
Kuidas lisada veebisaidile staatilist alglaadimisakordi
Staatilise Bootstrapi akordioni lisamine veebisaidile on ülilihtne. Peate lihtsalt kopeerima Bootstrapi pakutava lähtekoodi ja asetama selle kõikjale, kuhu soovite akordioni kuvada. Allpool on staatilise bootstrap-akordioni lisamise näidiskood.
<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>Ülaltoodud kood kuvab teie veebilehel staatilise Bootstrapi akordioni. Kui eelistate seda kasutada staatilise sisuga, peate lihtsalt ülaltoodud HTML-ist pealkirja ja sisu muutma.
Selle õpetuse eesmärk on siiski luua dünaamiline Bootstrapi akordion. Niisiis, loe edasi ja ma näitan teile, kuidas järgmistes sammudes.
Alustamine
Oletame, et peate KKK-sid näitama akordionis. KKK-de jaoks vajame andmebaasi tabelit, mis on täidetud mõne näiva kirjega. Niisiis, looge andmebaas nimega ‘bootstrap’ ja käivitage allpool olev päring, et luua selle sisse tabel.
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;Pärast tabeli loomist lisame sellele mõned näivad kirjed. Neid näivkirjeid kasutatakse dünaamilise akordioni loomiseks.
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.');Järgmine osa on koodi kirjutamine andmebaasi ühendamiseks PHP-s. Looge fail index.phpja lisage ühenduskood, nagu allpool näidatud.
$con = mysqli_connect("localhost", "MYSQL_USERNAME", "MYSQL_PASSWORD", "bootstrap");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: ". mysqli_connect_error();
}Kui olete andmebaasi edukalt ühendanud, tooge tulemus andmebaasitabelist, mida me hetkega vajame.
$sql = "SELECT * FROM faq ORDER BY id DESC";
$result = mysqli_query($con,$sql);Looge dünaamiline alglaadimise akordion
Olete andmebaasi tabelist kirjeid toonud ja määranud need PHP muutujale $result. Vaatame selle muutuja läbi ja muudame asja dünaamiliseks.
Kui vaatate akordioni HTML-koodi tähelepanelikult, märkate, et sama tüüpi markeering kordub. Dünaamiliseks muutes peame selles märgistuses kohandama mõningaid atribuute nagu id, klass, laiendatud aaria, aaria-juhtelemendid jne.
Allpool on kood, mis loob dünaamilise Bootstrapi akordioni.
<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>Meie lõplik kood on järgmine.
<?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>See selleks! Loodan, et saate aru, kuidas luua dünaamiline Bootstrapi akordion. Palun jagage oma mõtteid ja ettepanekuid allpool olevas kommentaaride jaotises.