折叠插件概述
在前面的章节学习中,我们也接触到了折叠插件,比如最近学习的一篇导航栏插件,那么折叠插件是什么?折叠插件能够使区域内的内容折叠起来,用于创建折叠导航还是内容面板都是很不错的选择。
用法
data属性:添加data-toggle="collapse"----告诉页面此处做折叠,data-target="#ID"----折叠容器的ID。
Java Script:$(''.collapse).collapse();
创建折叠插件
- 创建需要折叠的导航或者内容面板
- 折叠触发器(按钮或者链接)按钮添加data-target="#ID",超链接添加href="#ID",共同添加data-toggle="collapse"。ID为需要折叠的容器ID
- 需要折叠的内容容器<div>添加class="collapse panel-collapse或者navbar-collapse",如果是折叠面板为panel-collapse,导航为navbar-collapse,添加唯一ID,值与上面的ID相同。
- 在容器中添加class="in"则为默认打开折叠
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<!--折叠触发器a添加href="#ID"-->
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
点击进行展开第一部分
</a>
</h4>
</div>
<!--折叠容器添加class="collapse"因为是面板所以再添加class="panel-collapse",in为立即展开-->
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。
Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。
国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapseTwo" data-parent="#accordion"> 点击展开第二部分 </a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。
CSS:Bootstrap 自带以下特性:全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。
组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
JavaScript 插件:Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
定制:您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<button data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree" class="btn btn-default"> 点击展开第二部分 </button>
</h4>
</div>
<div id="collapseThree" class="collapse panel-collapse">
Less是一个 CSS 预处理器,让 CSS 具有动态性。
另一方面,Bootstrap 是一个快速开发 Web App 和站点的工具包。
这样,您可以在 CSS 中使用 Bootstrap 的 Less 变量、mixins(混合)和 nesting(嵌套)。
</div>
</div>
</div>
</div>
代码解读:我们创建了三个折叠触发器,第一第二个为超链接触发器,其中第一个折叠容器中添加了class="in",第三个为按钮,从例子中可以看出,超链接是用href="#ID"来确定需要折叠容器的,按钮是通过data-target="#ID"。
data-parent属性把折叠面板的id添加到折叠触发器上。
基本格式:
<!--导航或者面板-->
.....
<!--折叠触发器(点击会展开或者关闭折叠)-->
<!--超链接触发-->
<a data-toggle="collapse" href="#example">.....</a>
<!--按钮触发-->
<button class="btn btn-default" data-toggle="collapse" data-target="#example">
.......</button>
<!--折叠内容容器-->
<div class="collapse panel-collapse或者navbar-collapse" id="example">
.....</div>
运行结果
刚打开页面时:
可以看到带有class="in'的折叠器打开页面时,没有发生折叠,需要鼠标点击才会发生折叠。
扫描二维码关注公众号,回复:
3534522 查看本文章
创建带有折叠键的导航栏
- 创建导航栏
- 创建折叠触发器按键,添加data-toggle="collapse",data-target="#ID" class="navbar-collapse"
- 将导航元素添加到一个内容容器中,赋予唯一ID(与上同)。添加class="navbar-collapse collapse"
- 将容器添加到导航栏中
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#NavbarCollapse" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
个人站点
</div>
</div>
<div class="navbar-collapse collapse" id="NavbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">IOS</a></li>
<li><a href="#">PHP</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Java
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a>Java入门</a></li>
<li><a>Java进阶</a></li>
<li class="divider"></li>
<li><a>数据结构与算法</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
运行结果
大屏浏览时
小屏浏览时
选项
选项使用很简单,添加相关的data-*属性即可。
方法
案例
<div class="container">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapseOne">
点击进行展开第一部分
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。
Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。
国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapseTwo"> 点击展开第二部分 </a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。
CSS:Bootstrap 自带以下特性:全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。
组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
JavaScript 插件:Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
定制:您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" id="#collapseThree" > 点击展开第二部分 </a>
</h4>
</div>
<div id="collapseThree" class="collapse panel-collapse">
Less是一个 CSS 预处理器,让 CSS 具有动态性。
另一方面,Bootstrap 是一个快速开发 Web App 和站点的工具包。
这样,您可以在 CSS 中使用 Bootstrap 的 Less 变量、mixins(混合)和 nesting(嵌套)。
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapseFour">点击展开第四部分</a>
</h4>
</div>
<div class="collapse panel-collapse" id="collapseFour">
Bootstrap框架是当前最流行的开源框架之一
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#collapseOne').collapse({toggle:false});
});
$(function () {
$('#collapseTwo').collapse('show');
});
$(function () {
$('#collapseThree').collapse('toggle');
});
$(function () {
$('#collapseFour').collapse('hide');
});
</script>
运行结果
事件
show事件实例
<div class="container">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapseOne">
点击进行展开第一部分,show事件(当show方法启动时生效)
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse ">
<div class="panel-body">
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。
Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。
国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。
</div>
</div>
</div>
</div>
</div>
<script>
$('#collapseOne').on('show.bs.collapse',function () {
alert("当你点击此框时会有提醒")
})
</script>
代码解读:show事件需要show方法生效时才会触发,show方法为collapse折叠框点击展开,那么Java Script中代码意思为当触发show方法时触发show事件里的处理(弹出alert框)
运行结果
hide事件
<div class="container">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapseOne">
点击进行展开第一部分,hide事件(当hide方法启动时生效)
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse ">
<div class="panel-body">
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。
Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。
国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。
</div>
</div>
</div>
</div>
</div>
<script>
$('#collapseOne').on('hide.bs.collapse',function () {
alert("当你关闭折叠框时会有提醒")
})
</script>
代码解读:hide事件跟show事件一样,当触发hide方法时才会触发hide事件
运行结果