bootstrap框架--js插件

  • javascript的js文件可以单个引入，也可以一次性全部引入，不过无论是哪种引入方式，都是依赖于jquery（1.9.1以上），所以要先插入jquery再引入js插件
  • data属性指向的是js单个插件名，例如data-toggle="dropdown"，指向的是下拉菜单这个js插件
    • transition:

      • 模态框
      • 轮播图
      • 选项卡
      • 折叠
      • 动画过度
时间： 2024-10-01 03:38:23

bootstrap框架--js插件的相关文章

Bootstrap transition.js 插件详解

Bootstrap transition.js 插件详解 时间 2015-01-27 12:12:00 博客园-原创精华区 原文  http://www.cnblogs.com/xyzhanjiang/p/4252513.html 主题 Bootstrap JavaScript Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单了解下 CSS 过渡

Bootstrap 框架、插件

Bootstrap,前端工程师比较常用的框架.插件,根据它的定义,我们不妨这样理解,Bootstrap就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自己的页面效果的成品.所以更加准确说,我们更多的时候是去学习如何去使用Bootstrap,那么我们该如何学会更好的使用Bootstrap?下面是我个人在Bootstrap学习使用过程中得一些心得,在这儿跟大家分享,不足之处欢迎前辈们多多指教! 第一:在学习一个新的知识,我们首先的明白它是什么以及我们为

玩转Bootstrap（JS插件篇）

模态弹出框 一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使用如下(或见右侧代码编辑器28-29行): <!-导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js&qu

Bootstrap的js插件之轮播(carousel)

轮播请查看以下示例,基本已经涵盖最常用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>js插件_轮播</titl

关于Bootstrap之JS插件模态框的重要注意事项

用modal.js插件的模态框时,根据参考文档写下了如下代码: $('#myModal').modal('toggle').on('shown.bs.modal', function (e) { //TODO something }); 运行结果: chrome正常! IE8+(低版本没试)不响应事件,竟然不响应事件! >>排查步骤: 翻看文档,看有没有介绍此处存在兼容问题,结果没有: 既然不存在兼容问题,就是代码的编写问题了,问题变得好办了,顺序翻转: $('#myModal').on('s

Bootstrap的js插件之标签页

data-toggle="tab"--指明标签项具有切换响应功能: .tab-content--包裹标签页的所有内容部分: .tab-pane--包裹对应标签项的内容部分: .fade--设置标签项切换时有淡入淡出的效果: .in--设置标签页第一项淡入的初始化效果: .active--设置标签页以及对应标签项的内容处于激活状态: 更多细节参考示例: <!DOCTYPE html> <html lang="zh_CN"> <head&g

bootstrap之js插件踩坑系列

<html> <head>     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">     <!-- 可选的Bootstrap主题文件(一般不用引入) -->     <link rel="stylesheet" href="http://cdn.b

Bootstrap的js插件之按钮(button)

1)属性: data-loading-text="加载中..."--使按钮呈现加载状态: data-toggle="button"--使按钮能够切换状态: data-toggle="buttons"--使按钮组具有类似选择框的选择/取消功能: autocomplete="off"--解决FireFox的兼容性问题:即FireFox会在多个页面加载之间保持按钮的禁用状态; 2)方法: $().button("toggl

Bootstrap的js插件之折叠（collapse）

data-toggle="collapse"--指明该元素具有折叠功能: data-target--设置元素打开折叠后指向的元素链接. .collapse--用来设置元素为折叠内容. .in--设置折叠内容初始化为显示状态: .panel-collapse--指明该元素内容为折叠面板样式. 很多其它细节请參考演示样例: <!DOCTYPE html> <html lang="zh_CN"> <head> <meta char