Bootstrap-插件|学习笔记

简介: 快速学习 Bootstrap-插件

开发者学堂课程【移动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 效果,叫做插件。

比如:

image.png

点开某一个按钮下方会出现内容,进行选择。

4.滚动监听

滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的。

滚动导航条下面的区域并关注导航项的变化。

下拉菜单中的条目也会自动高亮显示。

根据滚动位置确定当前导航。

5.标签页

在组件里也有标签页,但那是静态的。

这里标签页是加入效果的。

6.工具提示

当鼠标放在某东西上会出现一种提示。

提示可以通过参数配置进行控制。

7.弹出框

为任意元素添加—小块浮层,就像iPad 上一样,用于存放非主要信息。

比如点击按钮会出现设置好的方向的提示框再点击一下会消失。

弹出框的标题和内容的长度都是零的话将永远不会被显示出来。

8.警告框

通过此插件可以为警告信息添加点击并消失的功能。

9.按钮

通过添加 data-loading-text="Loading.. .”可以为按钮设置正在加载的状态。

Collapse:

折叠  js  插件,控制某个元素的显示隐藏。

可以用在导播型菜单上面控制元素的显示和隐藏。

Carousel:

轮播图  js  插件,只不过是完美无缝切换。

Affix:

以腾讯视频为例,导航是固定在最顶部显示的,往下拉一小部分还是在最顶部,但是逐渐往下拉的时候就出现了,相当于粘贴在了最顶部的位置。在项目中经常会用到。

固定吸附  js  插件,作用是让某一个组件固定位置显示。

相关文章
|
前端开发
表格插件-bootstrap table的隔行换色
表格插件-bootstrap table的隔行换色
125 0
|
前端开发 JavaScript 容器
|
前端开发 JavaScript
|
存储 前端开发 JavaScript
|
前端开发 JavaScript 容器
|
前端开发 JavaScript
表格插件-bootstrap table的表内查看编辑删除
表格插件-bootstrap table的表内查看编辑删除
110 0
|
前端开发 JavaScript 索引
bootstrap+fileinput插件实现可预览上传照片功能
bootstrap+fileinput插件实现可预览上传照片功能
125 0
|
前端开发 JavaScript
下一篇
无影云桌面