开发者学堂课程【移动Web前端开发:Bootstrap-插件】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/594/detail/8449
Bootstrap-插件
内容介绍
一、概况
二、功能
一、概况
单个还是全部引入
JavaScript插件可以单个引入(使用 Bootstrap 提供的单个*.js文件),或者一次性全部引入(使用 bootstrap.js 或压缩版的bootstrap.min.js )。
二、功能
对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可。
如果你使用的是编译(或压缩)版的 bootstrap.js 文件,就无需再单独将其引入了。
包含的内容
Transition js ,是针对 transitionEnd 事件的一个基本辅助工具,也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果。
1.禁用过度效果
通过下面的JavaScript代码可以在全局范围禁用过渡效果,并且必须将此代码放在 transition.js (或bootstrap.js或bootstrap.min.js )后面,确保在js 文件加载完毕后再执行下面的代码∶
$.support.transition = false
2.模态框
模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集。
具有交互效果,点某个按钮有反应。
比如动态的实例:点击按钮会出现一个列表,点击×会消失,点击别的地方也可以关掉。
其中包括大模块框和小模块框。
3.下拉菜单
在组件里也有,但是是静态的,没有 js 效果,叫做组件,加了 js 效果,叫做插件。
比如:
点开某一个按钮下方会出现内容,进行选择。
4.滚动监听
滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的。
滚动导航条下面的区域并关注导航项的变化。
下拉菜单中的条目也会自动高亮显示。
根据滚动位置确定当前导航。
5.标签页
在组件里也有标签页,但那是静态的。
这里标签页是加入效果的。
6.工具提示
当鼠标放在某东西上会出现一种提示。
提示可以通过参数配置进行控制。
7.弹出框
为任意元素添加—小块浮层,就像iPad 上一样,用于存放非主要信息。
比如点击按钮会出现设置好的方向的提示框再点击一下会消失。
弹出框的标题和内容的长度都是零的话将永远不会被显示出来。
8.警告框
通过此插件可以为警告信息添加点击并消失的功能。
9.按钮
通过添加 data-loading-text="Loading.. .”
可以为按钮设置正在加载的状态。
Collapse:
折叠 js 插件,控制某个元素的显示隐藏。
可以用在导播型菜单上面控制元素的显示和隐藏。
Carousel:
轮播图 js 插件,只不过是完美无缝切换。
Affix:
以腾讯视频为例,导航是固定在最顶部显示的,往下拉一小部分还是在最顶部,但是逐渐往下拉的时候就出现了,相当于粘贴在了最顶部的位置。在项目中经常会用到。
固定吸附 js 插件,作用是让某一个组件固定位置显示。