Home > Article > Web Front-end > Detailed tutorial on bootstrap accordion folding

Detailed tutorial on bootstrap accordion folding

Y2JOriginal: 2017-05-23 11:38:051562browse

This article mainly introduces the bootstrap accordion folding example code in detail, which has certain reference value. Interested friends can refer to it

The example in this article shares the specific code of bootstrap accordion. , for your reference, the specific content is as follows

<!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> 
<p class="collapse" id="content"> 
<!--<p class="collapse fade in" id="content">--> 
 <p class="well"> 
 Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 
 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。目 
 前,Bootstrap 最新版本为 3.0 。 
 </p> 
</p> 
<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”（表示一开始展开） 
 --> 
<!--<p class="panel-group"><!–大容器–> 
 
 <p class="panel panel-default"><!–这个表示第一个整块儿的–> 
 <p 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> 
 </p> 
 <p class="panel-collapse collapse" id="collapseOne"><!–第二部分，折叠部分–> 
  <p class="panel-body"> 
  1号内容 
  </p> 
 </p> 
 </p> 
 
 <p class="panel panel-default"><!–这个表示第一个整块儿的–> 
 <p class="panel-heading"><!–第一部分，被点击部分–> 
  <h4 class="panel-title"> 
  <a href="#collapseTwo" rel="external nofollow" rel="external nofollow" data-toggle="collapse">2号连接</a> 
  </h4> 
 </p> 
 <p class="panel-collapse collapse" id="collapseTwo"><!–第二部分，折叠部分–> 
  <p class="panel-body"> 
  2号内容 
  </p> 
 </p> 
 </p> 
 
 <p class="panel panel-default"><!–这个表示第一个整块儿的–> 
 <p class="panel-heading"><!–第一部分，被点击部分–> 
  <h4 class="panel-title"> 
  <a href="#collapseThree" rel="external nofollow" rel="external nofollow" data-toggle="collapse">3号连接</a> 
  </h4> 
 </p> 
 <p class="panel-collapse collapse" id="collapseThree"><!–第二部分，折叠部分–> 
  <p class="panel-body"> 
  3号内容 
  </p> 
 </p> 
 </p> 
 
</p>--> 
<br> 
<br> 
<br> 
<br> 
<!--点击某一展开，其他的都自动折叠 
 1、给大容器加一个id id="accordion" 
 2、给每一个被点击链接加上一个 data-parent="#accordion" 
--> 
<p class="panel-group" id="accordion"><!--大容器--> 
 
 <p class="panel panel-default"><!--这个表示第一个整块儿的--> 
 <p 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> 
 </p> 
 <p class="panel-collapse collapse" id="collapseOne"><!--第二部分，折叠部分--> 
  <p class="panel-body"> 
  1号内容 
  </p> 
 </p> 
 </p> 
 
 <p class="panel panel-default"><!--这个表示第一个整块儿的--> 
 <p 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> 
 </p> 
 <p class="panel-collapse collapse" id="collapseTwo"><!--第二部分，折叠部分--> 
  <p class="panel-body"> 
  2号内容 
  </p> 
 </p> 
 </p> 
 
 <p class="panel panel-default"><!--这个表示第一个整块儿的--> 
 <p 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> 
 </p> 
 <p class="panel-collapse collapse" id="collapseThree"><!--第二部分，折叠部分--> 
  <p class="panel-body"> 
  3号内容 
  </p> 
 </p> 
 </p> 
 
</p> 
<script src="lib/jquery/jquery.js"></script> 
<script src="lib/bootstrap/js/bootstrap.js"></script> 
<script src="js/main.js"></script> 
</body> 
 
</html>

[Related recommendations]

1. Javacript free video tutorial

2. bootstrap template Detailed explanation of remote instance of state box

3. Detailed explanation of code for angularJS to implement $http.post and $http.get requests

4. layer bomb Window plug-in usage tutorial

5. JS development uses Baidu map code organization

The above is the detailed content of Detailed tutorial on bootstrap accordion folding. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of remote instances of bootstrap modal boxNext article：Detailed explanation of remote instances of bootstrap modal box

See more

Detailed tutorial on bootstrap accordion folding

Related articles