目录搜索
Getting startedAccessibility(无障碍)Browsers and devices(浏览器和设备)Build tools(构建工具)Contents(内容)Download(下载)JavaScriptTheming Bootstrap(主题Bootstrap)WebpackComponents: AlertsAlerts(警报)Components: BadgesBadges(徽章)Components: BreadcrumbBreadcrumbComponents: Button groupButton group(按钮组)Components: ButtonsButtons(按钮)Components: CardsComponents: CarouselCards(卡)Carousel(圆盘传送带)Components: CollapseCollapse(折叠)Components: DropdownsDropdowns(下拉菜单)Components: FormsForms(表单)Components: Input groupInput group(输入群组)Components: Input groupJumbotron(广告大屏幕)Components: List groupList group(列表组)Components: ModalModal(互动视窗)Components: NavbarNavbar(导航栏)Components: NavsNavs(导航栏)Components: PaginationPagination(分页)Components: PopoversPopovers(弹出框)Components: ProgressProgress(进度条)Components: ScrollspyScrollspy(滚动监听)Components: TooltipsTooltips(提示工具)ContentCode(代码)Figures(图片区)Images(图片)Reboot(重置)Tables(表格)Typography(排版)LayoutGrid(网格)Layout(布局)Media object(多媒体对象)Utilities for layout(排版通用类别)MigrationMigrating to v4(迁移到v4)UtilitiesBorders(边框)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转换支持和捕捉挂起的转换。

上一篇:下一篇: