Bootstrap的js插件之折叠(collapse)】的更多相关文章

data-toggle="collapse"--指明该元素具有折叠功能: data-target--设置元素打开折叠后指向的元素链接. .collapse--用来设置元素为折叠内容. .in--设置折叠内容初始化为显示状态: .panel-collapse--指明该元素内容为折叠面板样式. 很多其它细节请參考演示样例: <!DOCTYPE html> <html lang="zh_CN"> <head> <meta char…
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅能大幅减轻工作量,而且能让我们的代码更简明和优雅. 今天我们选择使用著名的 bootstrap 库的模态框插件 modal.js 来实现模态框效果,同时也使大家进一步熟悉 bootstrap 的插件使用. 一. bootstrap 的 js 插件的简单介绍 1.引入 a. 引入全部JS插件 我们在使…
Bootstrap transition.js 插件详解   Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单了解下 CSS 过渡. CSS 过渡 CSS 过渡是指在 CSS 属性发生改变时在一段时间内平滑地过渡,使用 CSS 伪类可以很方便地使用: a { color: #333; transition: color 1s linear; }…
导入JavaScript插件 不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入 <script src="js/bootstrap.min.js"></script> 单独导入,可到github去下载 动画过渡(Transitions): transition.js 模态弹窗(Modal): modal.js 下拉菜单(Dropdown): dropdown.js 滚动侦测(Scrollspy): scrollspy.js 选项卡(Tab):…
导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaSc…
Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单了解下 CSS 过渡. CSS 过渡 CSS 过渡是指在 CSS 属性发生改变时在一段时间内平滑地过渡,使用 CSS 伪类可以很方便地使用: a { color: #333; transition: color 1s linear; } a:hover { color: #36f; } 这里给链接设…
以下是一个比較常见的側边栏停靠的样例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>js插件_側边栏停靠</title&…
轮播请查看下面演示样例.基本已经涵盖最经常使用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>js插件_轮播</…
data-dismiss="alert"--为关闭button加入该属性能够使其自己主动为警告框赋予关闭功能. .fade .in--为警告框在关闭时加入动画效果. 很多其它细节參考演示样例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten…
1)属性: data-loading-text="载入中..."--使button呈现载入状态: data-toggle="button"--使按钮可以切换状态: data-toggle="buttons"--使按钮组具有类似选择框的选择/取消功能. autocomplete="off"--解决FireFox的兼容性问题:即FireFox会在多个页面载入之间保持button的禁用状态; 2)方法: $().button(&qu…