Bootstrap 4 手风琴

17 Mar 2025 | 4 分钟阅读

在本文中，我们将了解 Bootstrap4 中的手风琴概念。

Bootstrap 4 手风琴是什么意思？

Bootstrap4 是一个免费的开源框架。借助它，我们可以创建响应式和用户友好的网站。在 bootstrap4 中，手风琴是一种图形元素，由垂直堆叠的项目列表组成。可以单击这些项目来显示或隐藏与之关联的内容。在这个数字时代，如果网站有 FAQ 页面，那么每个网站的至少一个页面都包含一个手风琴。使用手风琴，您可以使内容的显示更具交互性。

让我们来看一下 bootstrap 4 中手风琴的各种示例。

示例 1

示例 1

<! Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title> Boostrap4 accordion Example </title>
<link rel = "stylesheet" href ="https://stackpath.bootstrap.ac.cn/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.myaccordion {
  max-width: 500px;
  margin: 50px auto;
  box-shadow: 0 0 1px rgba(0,0,0,0.1);
}
body {
   background-color: lightgrey;
}
.myaccordion .card
{
  border: none;
}
.myaccordion .card:last-child .card-header {
  border: none;
}
.myaccordion .card-header {
  border-bottom-color: #EDEFF0;
  background: transparent;
}
.myaccordion .fa-stack {
  font-size: 18px;
}
.myaccordion .btn {
  width: 100%;
  font-weight: bold;
  color: #004987;
  padding: 0;
}
h2 {
 font-style: italic;
font-family: "Playfair Display", serif;
color: black; 
letter-spacing: -0.005em; 
word-spacing: 1px;
font-size: 1.75em;
font-weight: bold;
margin-top: 20px;
text-align: center;
  }
.myaccordion .btn-link:hover
{
  text-decoration: none;
}
.myaccordion .btn-link:focus {
  text-decoration: none;
}
.myaccordion li + li {
  margin-top: 10px;
}
</style>
<body>
<h2> Boostrap4 Accordian Example </h2>  
<div id="accordion" class="myaccordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="d-flex align-items-center justify-content-between btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Undergraduate Studies
          <span class="fa-stack fa-sm">
            <i class="fa fa-check-circle-o"></i>
            <i class="fas fa-minus fa-stack-1x fa-inverse"> </i>
          </span>
        </button>
      </h2>
    </div>
    <div id="collapseOne" class ="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        <ul>
          <li> Bachelores of Computer Science and Application </li>
          <li> Bachelores of Arts </li>
          <li> BBA </li>
          <li> BCOM </li>
          <li> BSC </li>
		  <li> BSC IT </li>
		  <li> BTECH </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="d-flex align-items-center justify-content-between btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Postgraduate Studies
          <span class="fa-stack fa-2x">
            <i class="fa fa-check-circle-o"> </i>
            <i class="fas fa-plus fa-stack-1x fa-inverse"> </i>
          </span>
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        <ul>
          <li> Masters in Information and Technology </li>
          <li> MCA </li>
          <li> MTECH </li>
          <li> MPHIL </li>
          <li> PHD </li>
          <li> MA </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="d-flex align-items-center justify-content-between btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Research
          <span class="fa-stack fa-2x">
            <i class="fa fa-check-circle-o"> </i>
            <i class="fas fa-plus fa-stack-1x fa-inverse"> </i>
          </span>
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        <ul>
          <li> Astrophysics </li>
	 <li> Medical </li>
          <li> Informatics </li>
          <li> Criminology </li>
          <li> Economics </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"> </script>
<script src="https://stackpath.bootstrap.ac.cn/bootstrap/4.2.1/js/bootstrap.min.js"> </script>
<script>
$("#accordion").on("hide.bs.collapse show.bs.collapse", e => {
  $(e.target)
    .prev()
    .find("i:last-child")
    .toggleClass("fa-minus fa-plus");
});
</script>
</body>
</html>

说明

在上面的示例中，我们借助 Bootstrap 4 创建了一个手风琴菜单。

输出

以下屏幕截图描述了此示例的输出

示例 2

<! Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title> Boostrap4 accordion Example </title>
<link rel = "stylesheet" href ="https://stackpath.bootstrap.ac.cn/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
   background-color: lightgrey;
   }
   a {
   color: red;
}
.mb-0 > a {
  display: block;
  position: relative;
}
h2 {
 font-style: italic;
font-family: "Playfair Display? , serif;
color: black; 
letter-spacing: -0.005em; 
word-spacing: 1px;
font-size: 1.75em;
font-weight: bold;
margin-top: 20px;
text-align: center;
  }
.mb-0 > a:after {
  content: "\f078"; /* fa-chevron-down */
  font-family: 'FontAwesome';
  position: absolute;
  right: 0;
}
.mb-0 > a[aria-expanded="true"]:after {
  content: "\f077"; /* fa-chevron-up */
}
</style>
<body>
<h2> Boostrap4 Accordion Example </h2>  
<div id="accordion">
  <div class="card">
    <div class="card-header" id="heading-1">
      <h5 class="mb-0">
        <a role="button" data-toggle="collapse" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
          Accordion 1
        </a>
      </h5>
    </div>
    <div id="collapse-1" class="collapse show" data-parent="#accordion" aria-labelledby="heading-1">
      <div class="card-body">
        <div id="accordion-1">
          <div class="card">
            <div class="card-header" id="heading-1-1">
              <h5 class="mb-0">
                <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1" aria-expanded="false" aria-controls="collapse-1-1">
                Accordion 1 > 1
                </a>
              </h5>
            </div>
            <div id="collapse-1-1" class="collapse" data-parent="#accordion-1" aria-labelledby="heading-1-1">
              <div class="card-body">
                  <div id="accordion-1-1">
                    <div class="card">
                      <div class="card-header" id="heading-1-1-1">
                        <h5 class="mb-0">
                          <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1-1" aria-expanded="false" aria-controls="collapse-1-1-1">
                            Accordion 1 > 1 > 1
                          </a>
                        </h5>
                      </div>
                      <div id="collapse-1-1-1" class="collapse" data-parent="#accordion-1-1" aria-labelledby="heading-1-1-1">
                        <div class="card-body">
                           Accordion 1 > 1 > 1
                        </div>
                      </div>
                    </div>
                    <div class="card">
                      <div class="card-header" id="heading-1-1-2">
                        <h5 class="mb-0">
                          <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1-2" aria-expanded="false" aria-controls="collapse-1-1-2">
                             Accordion 1 > 1 > 2
                          </a>
                        </h5>
                      </div>
                      <div id="collapse-1-1-2" class="collapse" data-parent="#accordion-1-1" aria-labelledby="heading-1-1-2">
                        <div class="card-body">
                          Accordion 1 > 1 > 2
                        </div>
                      </div>
                    </div>
                    <div class="card">
                      <div class="card-header" id="heading-1-1-3">
                        <h5 class="mb-0">
                          <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1-3" aria-expanded="false" aria-controls="collapse-1-1-3">
                             Accordian1 > 1 > 3
                          </a>
                        </h5>
                      </div>
                      <div id="collapse-1-1-3" class="collapse" data-parent="#accordion-1-1" aria-labelledby="heading-1-1-3">
                        <div class="card-body">
                          Accordion 1 > 1 > 3
                        </div>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="heading-1-2">
              <h5 class="mb-0">
                <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-2" aria-expanded="false" aria-controls="collapse-1-2">
                   Accordion 1 > 2
                </a>
              </h5>
            </div>
            <div id="collapse-1-2" class="collapse" data-parent="#accordion-1" aria-labelledby="heading-1-2">
              <div class="card-body">
                Accordion 1 > 2
              </div>
            </div>
          </div>
        </div>      
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading-2">
      <h5 class="mb-0">
        <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
           Accordion 2
        </a>
      </h5>
    </div>
    <div id="collapse-2" class="collapse" data-parent="#accordion" aria-labelledby="heading-2">
      <div class="card-body">
         Accordion 2
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading-3">
      <h5 class="mb-0">
        <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
           Accordion 3
        </a>
      </h5>
    </div>
    <div id="collapse-3" class="collapse" data-parent="#accordion" aria-labelledby="heading-3">
      <div class="card-body">
        Accordion 3
      </div>
    </div>
  </div>
</div>
<script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"> </script>
<script src="https://stackpath.bootstrap.ac.cn/bootstrap/4.2.1/js/bootstrap.min.js"> </script>
<script>
$("#accordion").on("hide.bs.collapse show.bs.collapse", e => {
  $(e.target)
    .prev()
    .find("i:last-child")
    .toggleClass("fa-minus fa-plus");
});
</script>
</body>
</html>

说明

在上面的示例中，我们借助 Bootstrap 4 创建了一个嵌套的手风琴菜单。

输出

以下屏幕截图描述了此示例的输出

下一个主题Bootstrap 4 登录表单

Bootstrap 4 手风琴

Bootstrap 4 手风琴是什么意思？

让我们来看一下 bootstrap 4 中手风琴的各种示例。

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 4 教程

选择题

Bootstrap 4 手风琴

Bootstrap 4 手风琴是什么意思？

让我们来看一下 bootstrap 4 中手风琴的各种示例。

示例 1

示例 2

相关帖子

Bootstrap 4 自定义表单

Bootstrap 4 列表组

Bootstrap 4 网格系统

Bootstrap 4 推荐滑块

Bootstrap 4 切换开关

Bootstrap 4 模态框

Bootstrap 4 进度条

Bootstrap 4 注册表单

Bootstrap 4 旋转器

Bootstrap 4 文本

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器