切换布局
显示结果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap5 独立面板手风琴 - 迹忆客(jiyik.com)</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m-4"> <div class="accordion" id="myAccordion"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne">1. 什么是HTML?</button> </h2> <div id="collapseOne" class="accordion-collapse collapse" > <div class="card-body"> <p>HTML 代表超文本标记语言。 HTML 是用于描述网页结构的标准标记语言。<a href="https://www.jiyik.com/w/html" target="_blank">更多>></a></p> </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">2. 什么是Bootstrap?</button> </h2> <div id="collapseTwo" class="accordion-collapse collapse show" > <div class="card-body"> <p>Bootstrap5 是一个时尚、直观且功能强大的前端框架，可用于更快、更轻松地进行 Web 开发。 它是 CSS 和 HTML 约定的集合。<a href="https://www.jiyik.com/w/bootstrap5" target="_blank">更多>></a></p> </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree">3. 什么是CSS?</button> </h2> <div id="collapseThree" class="accordion-collapse collapse"> <div class="card-body"> <p>CSS 代表级联样式表。 CSS 允许我们为给定的 HTML 元素指定各种样式属性，例如颜色、背景、字体等。 <a href="https://www.jiyik.com/w/css" target="_blank">更多>></a></p> </div> </div> </div> </div> </div> </body> </html>
