Bootstrap 手风琴


要在 Bootstrap 中创建一个手风琴,你可以尝试运行以下代码

示例

在线演示

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "container">
         <h2>My Website</h2>
         <div class = "panel-group" id = "accordion">
            <div class = "panel panel-default">
               <div class = "panel-heading">
                  <h4 class = "panel-title">
                     <a data-toggle = "collapse" data-parent = "#accordion" href = "#coll1">Tutorials</a>
                  </h4>
               </div>
               <div id = "coll1" class = "panel-collapse collapse in">
                  <div class = "panel-body">We provide tutorials on C, C++, Java, PHP, Networking, SEO, C++, C, etc.</div>
               </div>
            </div>
            <div class = "panel panel-default">
               <div class = "panel-heading">
                  <h4 class = "panel-title">
                     <a data-toggle = "collapse" data-parent = "#accordion" href = "#coll2">Quiz</a>
                  </h4>
               </div>
               <div id = "coll2" class = "panel-collapse collapse">
                  <div class = "panel-body">We provide quizzes on C, C++, Java, PHP, Ruby, DBMS, Networking, SEO, etc.</div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

更新于:12-6-2020

253 次浏览

启动你的 职业

完成课程后获得认证

开始学习
广告