站点引用 Bootstrap 插件的方式有两种:

  • 单独引用:使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件,请先确保弄清这些插件之间的依赖关系。
  • 编译(同时)引用:使用 bootstrap.js 或压缩版的 bootstrap.min.js

    不要尝试同时引用这两个文件,因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。

所有的插件依赖于 jQuery。所以必须在插件文件之前引用 jQuery。请访问 bower.json 查看 Bootstrap 当前支持的 jQuery 版本。

某些时候 Bootstrap 插件可能需要与其他 UI 框架一起使用。在这种情况下,可能会发生命名空间冲突。如果不幸发生了这种情况,你可以通过调用插件的 .noConflict 方法恢复其原始值。

如果您想要单独引用该插件的功能,那么除了其他的 JS 文件,您还需要引用 transition.js。

Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类

模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

如果您想要单独引用该插件的功能,那么您需要引用 modal.js。

您可以切换模态框(Modal)插件的隐藏内容:

  • 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")。
  • 通过 JavaScript:使用这种技术,您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框:
默认值 描述
backdrop boolean或string static 默认值:true 指定一个静态的背景,当用户点击模态框外部时不会关闭模态框
keyborad boolean:true 按下escape键时关闭模态框,设置位false时则无效
show boolean:true 初始化显示模态框
remote path:false 如果添加一个有效的url的href,则会加载其中的内容

与modal()一起使用的有用的方法

方法 描述 实例
Options:modal(options) 把内容作为模态框激活 $('#identifier').modal({keyboard:false})
Toggle:modal('toggle') 切换模态框 $('#identifier').modal('toggle')
Show:modal('show') 手动打开模态框 $('#identifier').modal('show')
Hide:modal('hide') 手动隐藏模态框 $('#identifier').modal('hide')

事件,在函数中当钩子使用

事件 描述 实例
show.bs.modal 在调用show方法后触发 $('#identifier').on('show.bs.modal',function(){})
shown.bs.modal 当模态框对用户触发可见时 $('#identifier').on('show.bs.modal',function(){})
hide.bs.modal 当调用hide实例方法时触发 $('#identifier').on('hide.bs.modal',function(){}
hidden.bs.modal 当模态框完全对用户隐藏时触发 $('#identifier').on('hidden.bs.modal',function(){}

下拉菜单(Dropdown)插件的隐藏内容:通过 data 属性:向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单

如果您需要保持链接完整(在浏览器不启用 JavaScript 时有用),请使用 data-target 属性代替 href="#":

下拉菜单切换有一个简单的方法用来显示或隐藏下拉菜单$(data-toggle).dropdown('toggle')

滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。

通过 data 属性:向您想要监听的元素(通常是 body)添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。

通过 JavaScript:您可以通过 JavaScript 调用滚动监听,选取要监听的元素,然后调用 .scrollspy() 函数:

$('body').scrollspy({ target: '.navbar-example' })

.scrollspy('refresh'):当通过 JavaScript 调用 scrollspy 方法时,您需要调用 .refresh 方法来更新 DOM

activate.bs.scrollspy每当一个新项目被滚动监听激活时,触发该事件

激活各个标签:
// 通过名称选取标签页
$('#myTab a[href="#profile"]').tab('show') // 选取第一个标签页
$('#myTab a:first').tab('show') // 选取最后一个标签页
$('#myTab a:last').tab('show') // 选取第三个标签页(从 0 开始索引)
$('#myTab li:eq(2) a').tab('show') 如果需要为标签页设置淡入淡出效果,请添加 .fade 到每个 .tab-pane 后面。
.$().tab:该方法可以激活标签页元素和内容容器。 当您想要描述一个链接的时候,提示工具(Tooltip)就显得非常有用。
需添加一个提示工具(tooltip),只需向一个锚标签添加 data-toggle="tooltip" 即可。
弹出框(Popover):如需添加一个弹出框(popover),只需向一个锚/按钮标签添加 data-toggle="popover" 即可。
折叠:
  1. data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
  2. href 或 data-target 属性添加到父组件,它的值是子组件的 id
  3. data-parent 属性把折叠面板(accordion)的 id 添加到要展开或折叠的组件的链接

Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。

BootStrap插件的更多相关文章

  1. Bootstrap插件的使用

    昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...

  2. bootstrap插件学习-bootstrap.dropdown.js

    bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...

  3. bootstrap插件学习-bootstrap.modal.js

    bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...

  4. Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式

    Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...

  5. Bootstrap -- 插件: 提示工具、弹出框、 警告框消息

    Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...

  6. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

  7. 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播

    1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...

  8. Bootstrap插件概述

    前面的话 Bootstrap除了包含丰富的Web组件之外,如下拉菜单.按钮组.导航.分页等,还包括一些JavaScript的插件.插件为 Bootstrap 的组件赋予了“生命”.Bootstrap的 ...

  9. js插件---bootstrap插件daterangepicker是什么

    js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...

随机推荐

  1. Android中刷新Invalidate和postInvalidate的区别

    Android中实现view的更新有两组方法,一组是invalidate,另一组是postInvalidate,其中前者是在UI线程自身中使用,而后者在非UI线程中使用.Android提供了Inval ...

  2. C语言排序算法学习笔记——交换类排序

    交换类排序:根据序列中两个元素关键字的比较结果来交换他俩在序列中的位置. 冒泡排序:假设待排序表长为n,从后往前(或从前往后)两两比较相邻元素的值,若为逆序(即A[i-1]>A[i])则交换他们 ...

  3. java工具类——java将一串数据按照gzip方式压缩和解压缩

    我要整理在工作中用到的工具类分享出来,也方便自己以后查阅使用,这些工具类都是我自己实际工作中使用的 import java.io.ByteArrayInputStream; import java.i ...

  4. java 基础排序算法

    冒泡: 从左往右依次比较相邻的两个数,将小数放在前面,大数放在后面. public void bobSort(){        for(int i=0;i<length-1;i++){//排序 ...

  5. vue+sass实现切换字体大小

    接到领导指示,用户嫌我做的页面字体太小,15px的字体叫小?领导说用户多是上了年纪的人.没办法,改吧,谁让咱是个搬砖的呢..咳咳 我寻思着这次改大了,下次用户嫌大再让改小呢?干脆给他做个选择字号的功能 ...

  6. centos7配置yum本地源(iso镜像)及局域网使用

    2.测试环境: 服务器1:44.135.8.19(yum源) 服务器2:44.135.8.1(局域网机器) 系统:centos7.4 上传iso镜像到服务器,并挂载iso镜像 mount -t iso ...

  7. ios端滚动优化

    加入css -webkit-overflow-scrolling: touch;

  8. Servlet学习记录2

    读取web.xml参数 上篇文章ImageServlet里只设置了JPG,GIF,DOC类型文件的Content-Type.如果这时候需求变化了,需要增加Excel文件格式的Content-Type, ...

  9. git取别名配置

    已经配置的别名 $ git config --global alias.st status $ git config --global alias.co checkout $ git config - ...

  10. docker使用flannel网络

    基础环境我们使用了两台centos 7系统 基础配置为: 两台机器IP为 172.17.3.10 172.17.3.62 hosts文件配置为 172.17.3.10 node1 172.17.3.6 ...