总览
模态框
选项
有一些选项可以用来定制模态窗口(Modal Window)的外观和感观,它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:
选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
---|---|---|---|
backdrop | boolean 或 string ‘static’ 默认值:true | data-backdrop | 指定一个静态的背景,当用户点击模态框外部时不会关闭模态框。 |
keyboard | boolean 默认值:true | data-keyboard | 当按下 escape 键时关闭模态框,设置为 false 时则按键无效。 |
show | boolean 默认值:true | data-show | 当初始化时显示模态框。 |
remote | path 默认值:false | data-remote | 使用 jQuery .load 方法,为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href,则会加载其中的内容。如下面的实例所示:<a data-toggle="modal" href="remote.html" data-target="#modal" rel="noopener noreferrer">请点击我</a> |
方法
下面是一些可与 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 | 当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。 | $('#identifier').on('shown.bs.modal', function () { // 执行一些动作... }) |
hide.bs.modal | 当调用 hide 实例方法时触发。 | $('#identifier').on('hide.bs.modal', function () { // 执行一些动作... }) |
hidden.bs.modal | 当模态框完全对用户隐藏时触发。 | $('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... }) |
提示工具
选项
有一些选项是通过 Bootstrap 数据 API(Bootstrap Data API)添加或通过 JavaScript 调用的。下表列出了这些选项:
选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
---|---|---|---|
animation | boolean 默认值:true | data-animation | 提示工具使用 CSS 渐变滤镜效果。 |
html | boolean 默认值:false | data-html | 向提示工具插入 HTML。如果为 false,jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击,请使用 text。 |
placement | string|function 默认值:top | data-placement | 规定如何定位提示工具(即 top|bottom|left|right|auto)。 当指定为 auto 时,会动态调整提示工具。例如,如果 placement 是 “auto left”,提示工具将会尽可能显示在左边,在情况不允许的情况下它才会显示在右边。 |
selector | string 默认值:false | data-selector | 如果提供了一个选择器,提示工具对象将被委派到指定的目标。 |
title | string | function 默认值:’’ | data-title | 如果未指定 title 属性,则 title 选项是默认的 title 值。 |
trigger | string 默认值:‘hover focus’ | data-trigger | 定义如何触发提示工具: click| hover | focus | manual。您可以传递多个触发器,每个触发器之间用空格分隔。 |
delay | number | object 默认值:0 | data-delay | 延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字,那么延迟将会应用于显示和隐藏。如果提供的是对象,结构如下所示:delay: { show: 500, hide: 100 } |
container | string | false 默认值:false | data-container | 向指定元素追加提示工具。 实例: container: ‘body’ |
方法
下面是一些提示工具(Tooltip)插件中有用的方法:
方法 | 描述 | 实例 |
---|---|---|
Options: .tooltip(options) | 向元素集合附加提示工具句柄。 | $().tooltip(options) |
Toggle: .tooltip(‘toggle’) | 切换显示/隐藏元素的提示工具。 | $('#element').tooltip('toggle') |
Show: .tooltip(‘show’) | 显示元素的提示工具。 | $('#element').tooltip('show') |
Hide: .tooltip(‘hide’) | 隐藏元素的提示工具。 | $('#element').tooltip('hide') |
Destroy: .tooltip(‘destroy’) | 隐藏并销毁元素的提示工具。 | $('#element').tooltip('destroy') |
事件
下表列出了提示工具(Tooltip)插件中要用到的事件。这些事件可在函数中当钩子使用。
事件 | 描述 | 实例 |
---|---|---|
show.bs.tooltip | 当调用 show 实例方法时立即触发该事件。 | $('#myTooltip').on('show.bs.tooltip', function () { // 执行一些动作... }) |
shown.bs.tooltip | 当提示工具对用户可见时触发该事件(将等待 CSS 过渡效果完成)。 | $('#myTooltip').on('shown.bs.tooltip', function () { // 执行一些动作... }) |
hide.bs.tooltip | 当调用 hide 实例方法时立即触发该事件。 | $('#myTooltip').on('hide.bs.tooltip', function () { // 执行一些动作... }) |
hidden.bs.tooltip | 当提示工具对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)。 | $('#myTooltip').on('hidden.bs.tooltip', function () { // 执行一些动作... }) |
弹出框
选项
有一些选项是通过 Bootstrap 数据 API(Bootstrap Data API)添加或通过 JavaScript 调用的。下表列出了这些选项:
选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
---|---|---|---|
animation | boolean 默认值:true | data-animation | 向弹出框应用 CSS 褪色过渡效果。 |
html | boolean 默认值:false | data-html | 向弹出框插入 HTML。如果为 false,jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击,请使用 text。 |
placement | string|function 默认值:top | data-placement | 规定如何定位弹出框(即 top|bottom|left|right|auto)。 当指定为 auto 时,会动态调整弹出框。例如,如果 placement 是 “auto left”,弹出框将会尽可能显示在左边,在情况不允许的情况下它才会显示在右边。 |
selector | string 默认值:false | data-selector | 如果提供了一个选择器,弹出框对象将被委派到指定的目标。 |
title | string | function 默认值:’’ | data-title | 如果未指定 title 属性,则 title 选项是默认的 title 值。 |
trigger | string 默认值:‘hover focus’ | data-trigger | 定义如何触发弹出框: click| hover | focus | manual。您可以传递多个触发器,每个触发器之间用空格分隔。 |
delay | number | object 默认值:0 | data-delay | 延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字,那么延迟将会应用于显示和隐藏。如果提供的是对象,结构如下所示:delay: { show: 500, hide: 100 } |
container | string | false 默认值:false | data-container | 向指定元素追加弹出框。 实例: container: ‘body’ |
方法
下面是一些弹出框(Popover)插件中有用的方法:
方法 | 描述 | 实例 |
---|---|---|
Options: .popover(options) | 向元素集合附加弹出框句柄。 | $().popover(options) |
Toggle: .popover(‘toggle’) | 切换显示/隐藏元素的弹出框。 | $('#element').popover('toggle') |
Show: .popover(‘show’) | 显示元素的弹出框。 | $('#element').popover('show') |
Hide: .popover(‘hide’) | 隐藏元素的弹出框。 | $('#element').popover('hide') |
Destroy: .popover(‘destroy’) | 隐藏并销毁元素的弹出框。 | $('#element').popover('destroy') |
事件
下表列出了弹出框(Popover)插件中要用到的事件。这些事件可在函数中当钩子使用。
事件 | 描述 | 实例 |
---|---|---|
show.bs.popover | 当调用 show 实例方法时立即触发该事件。 | $('#mypopover').on('show.bs.popover', function () { // 执行一些动作... }) |
shown.bs.popover | 当弹出框对用户可见时触发该事件(将等待 CSS 过渡效果完成)。 | $('#mypopover').on('shown.bs.popover', function () { // 执行一些动作... }) |
hide.bs.popover | 当调用 hide 实例方法时立即触发该事件。 | $('#mypopover').on('hide.bs.popover', function () { // 执行一些动作... }) |
hidden.bs.popover | 当工具提示对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)。 | $('#mypopover').on('hidden.bs.popover', function () { // 执行一些动作... }) |
按钮
方法
下面是一些按钮(Button)插件中有用的方法:
方法 | 描述 | 实例 |
---|---|---|
button(‘toggle’) | 切换按压状态。赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换。 | $().button('toggle') |
.button(‘loading’) | 当加载时,按钮是禁用的,且文本变为 button 元素的 data-loading-text 属性的值。 | $().button('loading') |
.button(‘reset’) | 重置按钮状态,文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时,该方法非常有用。 | $().button('reset') |
.button(string) | 该方法中的字符串是指由用户声明的任何字符串。使用该方法,重置按钮状态,并添加新的内容。 | $().button(string) |
折叠
选项
有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:
选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
---|---|---|---|
parent | selector 默认值:false | data-parent | 如果提供了一个选择器,当可折叠项目显示时,指定父元素下的所有可折叠的元素将被关闭。这与传统的折叠面板(accordion)的行为类似 - 这依赖于 accordion-group 类。 |
toggle | boolean 默认值:true | data-toggle | 切换调用可折叠元素。 |
方法
下面是一些折叠(Collapse)插件中有用的方法:
方法 | 描述 | 实例 |
---|---|---|
Options: .collapse(options) | 激活内容为可折叠元素。接受一个可选的 options 对象。 | $('#identifier').collapse({ toggle: false }) |
Toggle: .collapse(‘toggle’) | 切换显示/隐藏可折叠元素。 | $('#identifier').collapse('toggle') |
Show: .collapse(‘show’) | 显示可折叠元素。 | $('#identifier').collapse('show') |
Hide: .collapse(‘hide’) | 隐藏可折叠元素。 | $('#identifier').collapse('hide') |
事件
下表列出了折叠(Collapse)插件中要用到的事件。这些事件可在函数中当钩子使用。
事件 | 描述 | 实例 |
---|---|---|
show.bs.collapse | 在调用 show 方法后触发该事件。 | $('#identifier').on('show.bs.collapse', function () { // 执行一些动作... }) |
shown.bs.collapse | 当折叠元素对用户可见时触发该事件(将等待 CSS 过渡效果完成)。 | $('#identifier').on('shown.bs.collapse', function () { // 执行一些动作... }) |
hide.bs.collapse | 当调用 hide 实例方法时立即触发该事件。 | $('#identifier').on('hide.bs.collapse', function () { // 执行一些动作... }) |
hidden.bs.collapse | 当折叠元素对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)。 | $('#identifier').on('hidden.bs.collapse', function () { // 执行一些动作... }) |
轮播
选项
有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:
选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
---|---|---|---|
interval | number 默认值:5000 | data-interval | 自动循环每个项目之间延迟的时间量。如果为 false,轮播将不会自动循环。 |
pause | string 默认值:“hover” | data-pause | 鼠标进入时暂停轮播循环,鼠标离开时恢复轮播循环。 |
wrap | boolean 默认值:true | data-wrap | 轮播是否连续循环。 |
方法
下面是一些轮播(Carousel)插件中有用的方法:
方法 | 描述 | 实例 |
---|---|---|
.carousel(options) | 初始化轮播为可选的 options 对象,并开始循环项目。 | $('#identifier').carousel({ interval: 2000 }) |
.carousel(‘cycle’) | 从左到右循环轮播项目。 | $('#identifier').carousel('cycle') |
.carousel(‘pause’) | 停止轮播循环项目。 | $('#identifier').carousel('pause') |
.carousel(number) | 循环轮播到某个特定的帧(从 0 开始计数,与数组类似)。 | $('#identifier').carousel(number) |
.carousel(‘prev’) | 循环轮播到上一个项目。 | $('#identifier').carousel('prev') |
.carousel(‘next’) | 循环轮播到下一个项目。 | $('#identifier').carousel('next') |
事件
下表列出了轮播(Carousel)插件中要用到的事件。这些事件可在函数中当钩子使用。
事件 | 描述 | 实例 |
---|---|---|
slide.bs.carousel | 当调用 slide 实例方法时立即触发该事件。 | $('#identifier').on('slide.bs.carousel', function () { // 执行一些动作... }) |
slid.bs.carousel | 当轮播完成幻灯片过渡效果时触发该事件。 | $('#identifier').on('slid.bs.carousel', function () { // 执行一些动作... }) |