Dynaamisen Bootstrap-harmonikan luominen
Harmonikka (kokoontaitettava sisältö) on paras tapa vaihtaa (piilottaa ja näyttää) suurta sisältöä. Usein kysytyt kysymykset (FAQ) ovat yksi yleisimmin käytetyistä harmonikan esimerkkeistä. Harmonikaa käytetään näyttämään enemmän tietoa vähemmän tilaa. Se toimii pienennä-laajenna-muodossa. Harmonikan avulla voi piilottaa ja nähdä sisältöä eri osioiden välillä.
Bootstrap sisältää paljon hyödyllisiä komponentteja, jotka voidaan helposti integroida verkkosivustoon. Yksi niistä on harmonikka, jota käytämme tässä opetusohjelmassa. Jos haluat nähdä Bootstrapin harmonikan toiminnan, tutustu esimerkkiin täällä.
Tässä artikkelissa näytän sinulle, kuinka tehdä dynaaminen Bootstrap-harmonikka. Dynaamisen harmonikan saamiseksi haemme tulokset tietokannasta ja luomme harmonikan näiden tietueiden kanssa.
Staattisen käynnistyshihnan harmonikan lisääminen verkkosivustoon
Staattisen Bootstrap-harmonikan lisääminen verkkosivustolle on erittäin helppoa. Sinun tarvitsee vain kopioida Bootstrapin toimittama lähdekoodi ja sijoittaa se minne haluat näyttää harmonikan. Alla on esimerkkikoodi staattisen bootstrap-harmonikan lisäämisestä.
<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>Yllä oleva koodi näyttää staattisen Bootstrap-harmonikan verkkosivullasi. Jos haluat käyttää sitä staattisen sisällön kanssa, sinun tarvitsee vain muuttaa otsikkoa ja sisältöä yllä olevasta HTML: stä.
Tämän opetusohjelman tarkoituksena on kuitenkin luoda dynaaminen Bootstrap-harmonikka. Joten, lue näytän sinulle kuinka seuraavissa vaiheissa.
Päästä alkuun
Oletetaan, että sinun on näytettävä usein kysytyt kysymykset harmonikalla. Usein kysyttyjä kysymyksiä varten tarvitsemme tietokantataulukon, joka on täytetty muutamalla nuken merkinnällä. Luo siis tietokanta nimeltä bootstrap ja suorita alla oleva kysely luoda taulukko sen sisälle.
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;Kun olet luonut taulukon, lisätään siihen joitain nuken merkintöjä. Näitä nuken merkintöjä käytetään dynaamisen harmonikan luomiseen.
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.');Seuraava osa on koodin kirjoittaminen tietokannan liittämistä varten PHP: ssä. Luo tiedosto index.phpja lisää yhteyskoodi alla olevan kuvan mukaisesti.
$con = mysqli_connect("localhost", "MYSQL_USERNAME", "MYSQL_PASSWORD", "bootstrap");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: ". mysqli_connect_error();
}Kun olet liittänyt tietokannan onnistuneesti, hae tulos tietokantataulukosta, jota tarvitsemme hetken kuluttua.
$sql = "SELECT * FROM faq ORDER BY id DESC";
$result = mysqli_query($con,$sql);Luo dynaaminen käynnistyshihna
Olet hakenut tietueet tietokantataulukosta ja määrittänyt ne PHP-muuttujaan $result. Silmukkaamme tämän muuttujan läpi ja teemme asioista dynaamisia.
Jos tarkastelet tarkkaan harmonikan HTML-koodia, huomaat samanlaisen merkinnän toistuvan. Samalla kun se on dynaaminen, meidän on muutettava joitain määritteitä, kuten id, class, aria-laajennettu, aria-control jne.
Alla on koodi, joka tuottaa dynaamisen Bootstrap-harmonikan.
<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>Lopullinen koodimme on seuraava.
<?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>Se siitä! Toivon, että ymmärrät kuinka luoda dynaaminen Bootstrap-harmonikka. Jaa ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.