BootStrap插件

时间：2022-03-10 11:16:45

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

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

    BootStrap插件不要尝试同时引用这两个文件，因为 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）插件是一种灵活的响应式的向站点添加滑块的方式。

相关文章