bootstrap手風琴摺疊範例程式碼分享，bootstrap範例程式碼

最後更新：2017-05-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體為大家分享了bootstrap手風琴的具體代碼，供大家參考，具體內容如下

<!DOCTYPE html> <html lang="zh-CN"> <head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">  <title>XXX</title>  <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">  <link rel="stylesheet" href="css/main.css">  <!--[if lt IE 9]>  <script src="lib/html5shiv/html5shiv.min.js"></script>  <script src="lib/respond/respond.min.js"></script>  <![endif]--> </head> <body style="margin: 200px;"> <!--基本執行個體--> <button class="btn btn-primary" data-toggle="collapse" data-target="#content">  Bootstrap </button> <div class="collapse" id="content"> <!--<div class="collapse fade in" id="content">-->  <div class="well">  Bootstrap 是 Twitter 推出的一個用於前端開發的開源工具包。它由  Twitter 的設計師 Mark Otto 和 Jacob Thornton 合作開發,是一個 CSS/HTML 架構。目  前,Bootstrap 最新版本為 3.0 。  </div> </div> <br> <br> <br> <!--1、摺疊部分設定一個id  2、在被點擊的串連處引入<a href="#collapseOne" rel="external nofollow" rel="external nofollow" rel="external nofollow"  3、還是在被點擊的串連處加入 date-toggle="collapse"  4、寫完之後第一次不正常，所以需要在摺疊部分寫上  class=“collapse”（表示一開始隱藏）或者 “collapse in”（表示一開始展開）  --> <!--<div class="panel-group"><!–大容器–>   <div class="panel panel-default"><!–這個表示第一個整塊兒的–>  <div class="panel-heading"><!–第一部分，被點擊部分–>   <h4 class="panel-title">   <a href="#collapseOne" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse">1號串連</a>   </h4>  </div>  <div class="panel-collapse collapse" id="collapseOne"><!–第二部分，摺疊部分–>   <div class="panel-body">   1號內容   </div>  </div>  </div>   <div class="panel panel-default"><!–這個表示第一個整塊兒的–>  <div class="panel-heading"><!–第一部分，被點擊部分–>   <h4 class="panel-title">   <a href="#collapseTwo" rel="external nofollow" rel="external nofollow" data-toggle="collapse">2號串連</a>   </h4>  </div>  <div class="panel-collapse collapse" id="collapseTwo"><!–第二部分，摺疊部分–>   <div class="panel-body">   2號內容   </div>  </div>  </div>   <div class="panel panel-default"><!–這個表示第一個整塊兒的–>  <div class="panel-heading"><!–第一部分，被點擊部分–>   <h4 class="panel-title">   <a href="#collapseThree" rel="external nofollow" rel="external nofollow" data-toggle="collapse">3號串連</a>   </h4>  </div>  <div class="panel-collapse collapse" id="collapseThree"><!–第二部分，摺疊部分–>   <div class="panel-body">   3號內容   </div>  </div>  </div>  </div>--> <br> <br> <br> <br> <!--點擊某一展開，其他的都自動摺疊  1、給大容器加一個id id="accordion"  2、給每一個被點選連結加上一個 data-parent="#accordion" --> <div class="panel-group" id="accordion"><!--大容器-->   <div class="panel panel-default"><!--這個表示第一個整塊兒的-->  <div class="panel-heading"><!--第一部分，被點擊部分-->   <h4 class="panel-title">   <a href="#collapseOne" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-parent="#accordion">1號串連</a>   </h4>  </div>  <div class="panel-collapse collapse" id="collapseOne"><!--第二部分，摺疊部分-->   <div class="panel-body">   1號內容   </div>  </div>  </div>   <div class="panel panel-default"><!--這個表示第一個整塊兒的-->  <div class="panel-heading"><!--第一部分，被點擊部分-->   <h4 class="panel-title">   <a href="#collapseTwo" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-parent="#accordion">2號串連</a>   </h4>  </div>  <div class="panel-collapse collapse" id="collapseTwo"><!--第二部分，摺疊部分-->   <div class="panel-body">   2號內容   </div>  </div>  </div>   <div class="panel panel-default"><!--這個表示第一個整塊兒的-->  <div class="panel-heading"><!--第一部分，被點擊部分-->   <h4 class="panel-title">   <a href="#collapseThree" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-parent="#accordion">3號串連</a>   </h4>  </div>  <div class="panel-collapse collapse" id="collapseThree"><!--第二部分，摺疊部分-->   <div class="panel-body">   3號內容   </div>  </div>  </div>  </div> <script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/js/bootstrap.js"></script> <script src="js/main.js"></script> </body>  </html>

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More