目录 搜索
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
文字

用我们构建在 jQuery 上的可选 JavaScript 插件来实现 Bootstrap。了解每个插件,我们的数据和编程 API 选项,等等。

个人或汇编

插件可以单独包含(使用Bootstrap的单个*.js文件),或者一次全部使用bootstrap.js或缩小bootstrap.min.js(不包括两者)。

相依性

一些插件和CSS组件依赖于其他插件。如果您单独包含插件,请确保在文档中检查这些依赖关系。另外请注意,所有插件都依赖于jQuery(这意味着jQuery必须包含插件文件之前)。

我们的下拉菜单,弹出窗口和工具提示也取决于Popper.js。

数据属性

几乎所有的引导插件都可以单独通过HTML启用和配置,数据属性是我们使用JavaScript功能的首选方法。一定要仅在单个元素上使用一组数据属性,您不能从同一个按钮触发工具提示和模式。

但是,在某些情况下,禁用此功能可能是可取的。若要禁用数据属性api,请取消绑定命名空间为data-api就像这样:

$(document).off('.data-api')

或者,要针对特定的插件,只需将插件的名称与Data-API命名空间一起包括在如下所示的名称空间中:

$(document).off('.alert.data-api')

事件

Bootstrap为大多数插件的独特操作提供自定义事件。一般来说,这些都是不定式和过去分词形式 - 不定式(ex。show)在事件开始时触发,其过去分词形式(ex。shown)在动作完成时触发。

所有不定式事件preventDefault()功能。这提供了在动作开始之前停止执行的能力。从事件处理程序返回false也将自动调用preventDefault()...

$('#myModal').on('show.bs.modal', function (e) {  
  if (!data) return e.preventDefault() // stops modal from being shown
})

编程API

我们还认为,您应该能够完全通过JavaScriptAPI使用所有的Bootstrap插件。所有公共API都是单一的、可链接的方法,并返回所操作的集合。

$('.btn.danger').button('toggle').addClass('fat')

所有的方法都应该接受一个可选的选项对象,一个针对特定方法的字符串,或者什么都不接受(它用默认行为启动一个插件):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })               // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

每个插件还在一个Constructor属性上公开它的原始构造函数:$.fn.popover.Constructor。如果你想获得一个特定的插件实例,直接从一个元素中获取:$('[rel="popover"]').data('popover')

异步函数和转换

所有程序化API方法都是异步的,并在转换开始之后但结束之前返回给调用者。

为了在转换完成后执行一个操作,您可以侦听相应的事件。

$('#myCollapse').on('shown.bs.collapse', function (e) {  
    // Action to execute once the collapsible area is expanded
})

另外,对转换组件的方法调用将被忽略

$('#myCarousel').on('slid.bs.carousel', function (e) {  
    $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})
$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

默认设置

您可以通过修改插件的Constructor.Default对象来更改插件的默认设置:

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to false

无冲突

有时,需要在其他UI框架中使用引导插件。在这种情况下,名称空间冲突可能会偶尔发生。如果发生这种情况,你可以打电话给.noConflict的值。

var bootstrapButton = $.fn.button.noConflict()             // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

版本号

可以通过VERSION插件构造函数的属性。例如,对于工具提示插件:

$.fn.tooltip.Constructor.VERSION // => "4.0.0-beta.2"

禁用JavaScript时没有特殊的后遗症

当JavaScript禁用时,Bootstrap的插件不会特别优雅地回退。如果您在这种情况下关心用户体验,请向用户<noscript>解释情况(以及如何重新启用JavaScript),和/或添加您自己的自定义回退。

第三方图书馆

引导程序不正式支持第三方JavaScript库。比如Prototype或jQueryUI。尽管.noConflict以及命名空间事件,可能存在需要自己解决的兼容性问题。

功用

所有Bootstrap的JavaScript文件都依赖于util.js它,它必须与其他JS文件一起包含。如果您使用编译过的(或缩小版)bootstrap.js,则不需要包含它 - 它已经存在。

util.js包括实用程序函数和基本助手transitionEnd事件以及CSS转换模拟器。其他插件使用它来检查CSS转换支持和捕捉挂起的转换。

上一篇: 下一篇: