Bootstrap-折叠方法

发布时间：2020-12-17 20:58:13 所属栏目：安全来源：网络整理

导读：? ? ? ? 今天做项目有一个功能是从表里加载某个班每个教师的获得的荣誉列表，想实现的是加载出该班的教师，点击教师是列出该教师的所有荣誉，再点击将荣誉折叠。最后用Bootstrap的折叠（Collapse）插件方法实现，这里记录一下。 ? ? ? ? 【知识点】 ? ? ? ?

? ? ? ? 今天做项目有一个功能是从表里加载某个班每个教师的获得的荣誉列表，想实现的是加载出该班的教师，点击教师是列出该教师的所有荣誉，再点击将荣誉折叠。最后用Bootstrap的折叠（Collapse）插件方法实现，这里记录一下。

? ? ? ? 【知识点】

? ? ? ? 1、Bootstrap

? ? ? ??Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

? ? ? ? 2、具体代码

? ? ? ? 使用Bootstrap需要引用三个js文件：可以从网上下载：

<span style="font-size:18px;">   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></span>

? ? ? ?具体实现：

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
   <title>Bootstrap折叠（Collapse）插件方法</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<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="#collapSEOne">
               王建军
            </a>
         </h4>
      </div>
      <div id="collapSEOne" class="panel-collapse collapse in">
         <div class="panel-body">
            省级一级教师
         </div>
		  <div class="panel-body">
            全国优秀教师
         </div>
      </div>
   </div>
   <div class="panel panel-success">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseTwo">
               余小二
            </a>
         </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
         <div class="panel-body">
            省级一级教师
         </div>
		  <div class="panel-body">
            全国优秀教师
         </div>
      </div>
   </div>
   <div class="panel panel-info">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseThree">
               王媛媛
            </a>
         </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
         <div class="panel-body">
            省级一级教师
         </div>
		  <div class="panel-body">
            全国优秀教师
         </div>
      </div>
   </div>
   <div class="panel panel-warning">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseFour">
               冯远程
            </a>
         </h4>
      </div>
      <div id="collapseFour" class="panel-collapse collapse">
         <div class="panel-body">
            省级一级教师
         </div>
		  <div class="panel-body">
            全国优秀教师
         </div>
      </div>
   </div>
</div>
<script type="text/javascript">
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});
   $(function () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapSEOne').collapse('hide')});
</script>  

</body>
</html></span>

? ? ? ? 运行效果

? ? ? ? ??

? ? ? ? 【小结】

? ? ? ? ?这里只是一个小例子，具体代码中的实现也基本类似，只是大部分HTML都是在后头拼写的，用到了Literal服务器控件，还挺方便的。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!