欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Bootstrap 手风琴菜单的实现代码

程序员文章站 2022-05-31 18:17:50
好了，废话不多说了，直接给大家贴代码了，具体代码如下所示： ...

好了，废话不多说了，直接给大家贴代码了，具体代码如下所示：

<!doctype html>
<html>
<head>
  <title></title>
  <meta charset="utf-8"> 
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 可选的bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- jquery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- 最新的 bootstrap 核心 javascript 文件 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div style="width: 200px;">
      <div class="panel-group" id="accordion2">
      <div class="panel-heading">
        <strong style="font-size: 30px;">论坛分类</strong>
      </div>
        <div class="panel panel-default">
          <div class="panel-heading" data-toggle="collapse"
            data-parent="#accordion2" href="#collapseone">
            <a class="accordion-toggle">java</a>
          </div>
          <div id="collapseone" class="panel-collapse collapse"
            style="height: 0px;">
            <div class="panel-body">
              <ul class="nav nav-pills nav-stacked">
                <li><a href="#">java基础</a></li>
                <li><a href="#">java面向对象</a></li>
                <li><a href="#">java核心api</a></li>
                <li><a href="#">javaee</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" data-toggle="collapse"
            data-parent="#accordion2" href="#collapsetwo">
            <a class="accordion-toggle">数据库</a>
          </div>
          <div id="collapsetwo" class="panel-collapse collapse"
            style="height: 0px;">
            <div class="panel-body">
              <ul class="nav nav-pills nav-stacked">
                <li><a href="#">sql基础</a></li>
                <li><a href="#">oracle</a></li>
                <li><a href="#">mysql</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" data-toggle="collapse"
            data-parent="#accordion2" href="#collapsethree">
            <a class="accordion-toggle">技术前沿</a>
          </div>
          <div id="collapsethree" class="panel-collapse in"
            style="height: 0px;">
            <div class="panel-body">
              <ul class="nav nav-pills nav-stacked">
                <li><a href="#">nosql</a></li>
                <li><a href="#">hadoop</a></li>
                <li><a href="#">webservice</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

以上所述是小编给大家介绍的bootstrap 手风琴菜单的实现代码，希望对大家有所帮助

上一篇： iPad最终归宿是生产力？iPad mini身上有答案

下一篇： 宣太后最爱的人是谁?谁也不会想到

推荐阅读