Bootstrap-折叠方法

最新推荐文章于 2024-07-05 13:00:00 发布

期待王教授

最新推荐文章于 2024-07-05 13:00:00 发布

阅读量3.1k

点赞数

分类专栏：日常积累基础文章标签： Bootstrap

本文链接：https://blog.csdn.net/wangwenru6688/article/details/52016018

版权

日常积累同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

基础

6 篇文章 0 订阅

订阅专栏

今天做项目有一个功能是从表里加载某个班每个教师的获得的荣誉列表，想实现的是加载出该班的教师，点击教师是列出该教师的所有荣誉，再点击将荣誉折叠。最后用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服务器控件，还挺方便的。

期待王教授

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
20
评论
Bootstrap-折叠方法

今天做项目有一个功能是从表里加载某个班每个教师的获得的荣誉列表，想实现的是加载出该班的教师，点击教师是列出该教师的所有荣誉，再点击将荣誉折叠。最后用Bootstrap的折叠（Collapse）插件方法实现，这里记录一下。【知识点】 1、Bootstrap Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap
复制链接

扫一扫

专栏目录