Introduction and use of Bootstrap plug-in

Bootstrap Plugin Overview
The components discussed in the previous Layout Components chapter are just the beginning. The 12 jQuery plug-ins that come with Bootstrap have expanded functions and can add more interactions to the site. Even if you are not an advanced js developer,
you can learn Bootstrap's js plugin. Using the Bootstrap Data API, most plug-ins can be triggered without writing any code.
There are two ways for the site to reference the bootstrap plug-in:
Separate reference: use individual *.js files of Bootstrap. Some plugins and css components depend on other plugins. If you reference plugins individually, be sure to figure out the dependencies between those plugins first.
Compile (simultaneous) reference: use Bootstrap.js or the compressed version of bootstrap.min.js
Do not try to reference these two files at the same time, because both bootstrap.js and bootstrap.min.js contain all plugins .
All plug-ins depend on jQuery. So jQuery must be quoted before the plug-in file. Please visit bower.json to view the jQuery version currently supported by boostrap.
data attribute
You can use all bootstap plug-ins just through the data attribute API without writing a line of javascript code. This is the first class API in bootstrap and should be your preferred method.
Then again, in some cases it may be necessary to turn the feature off. Therefore, we also provide a method to turn off the data attribute API, that is, to unblock the event bound to the document with the data-api namespace. Like the following:
$(document).off('.data-api')
If you need to turn off a specific plug-in, you only need to add the name of the plug-in before the data-api namespace. space, as shown below:
$(document).off('.alert.data-api')
Programmatic API
We provide pure javascript API for all Bootstrap plug-ins. All public apis support individual or chain calling methods, and return a collection of elements for all operations (note: the calling form is consistent with jQuery).
$('.btn.danger').button('toggle').addClass('fat')

Import

【One-time import】

Bootstrap provides a single file that contains all of Bootstrap’s JavaScript plug-ins, namely bootstrap.js (compressed version: bootstrap.min.js)

[Individual import]

To facilitate the separate import of special effects files, Bootstrap provides 12 JavaScript plug-ins, they are:

　☑ Animation transitions (Transitions): the corresponding plug-in file "transition.js"

　☑Module Modal pop-up window (Modal): the corresponding plug-in file "modal.js"

　☑ Dropdown menu (Dropdown): the corresponding plug-in file "dropdown.js"

　☑ Scroll detection (Scrollspy ): The corresponding plug-in file "scrollspy.js"

　☑ Tab: The corresponding plug-in file "tab.js"

　☑ Tooltips: The corresponding plug-in file “tooltop.js”

　☑ Pop-up box (Popover): the corresponding plug-in file “popover.js”

　☑ Alert box (Alert): the corresponding plug-in file “alert.js”

　☑Buttons: The corresponding plug-in file “button.js”

　☑Collapse/Accordion: The corresponding plug-in file “collapse.js”

　☑ Image carousel Carousel: The corresponding plug-in file "carousel.js"

　☑ Automatic positioning of the buoy Affix: The corresponding plug-in file "affix.js"

data attribute

　Yes All Bootstrap plug-ins can be used simply through the data attribute API without writing a single line of JavaScript code. This is a first-class API in Bootstrap and should be the preferred approach.

Then again, in some cases this feature may need to be turned off. Therefore, a method is also provided to turn off the data attribute API, that is, to unblock the event bound to the document with data-api as the namespace. Like the following:

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

In addition, if it is for a specific plug-in, just add the name of that plug-in as a namespace in front of data-api , as follows:

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

API

Bootstrap provides a pure JavaScript API for all plug-ins. All public APIs support individual or chain calling methods, and return the set of elements they operate on, which is consistent with jQuery’s calling form

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

All methods can accept an optional An option object as a parameter, or a string representing a specific method, or providing nothing (in which case the plugin will be initialized with default values)

$('#myModal').modal()                      // 以默认值初始化$('#myModal').modal({ keyboard: false })   // initialized with no keyboard$('#myModal').modal('show')                // 初始化后立即调用 show 方法

　　每个插件还通过 Constructor 属性暴露了其原始的构造函数：$.fn.popover.Constructor。如果想获取某个插件的实例，可以直接通过页面元素获取：$('[rel="popover"]').data('popover')

【默认设置】

　　每个插件都可以通过修改其自身的 Constructor.DEFAULTS 对象从而改变插件的默认设置：

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false

【避免命名空间冲突】

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

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

【事件】

　　Bootstrap 为大部分插件所具有的动作提供了自定义事件。一般来说，这些事件都有不定式和过去式两种动词的命名形式，例如，不定式形式的动词（例如 show）表示其在事件开始时被触发；而过去式动词(如shown)表示在动作执行完毕之后被触发。

　　所有 Bootstrap 事件的名称都采用命名空间方式。所有以不定式形式的动词命名的事件都提供了 preventDefault 功能。这就赋予在动作开始执行前将其停止的能力

$('#myModal').on('show.bs.modal', function (e) {  if (!data) return e.preventDefault() // 阻止模态框的展示})

 

过渡效果

　　Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法：

　　☑ 调用统一编译的bootstrap.js；

　　☑ 调用单一的过渡动画的JavaScript插件文件transition.js

　　transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是，这些过渡动画都是采用CSS3来实现的，所以IE6-8浏览器是不具备这些过渡动画效果

　　默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果：

　　☑ 模态弹出窗（Modal）的滑动和渐变效果；

　　☑ 选项卡（Tab）的渐变效果；

　　☑ 警告框（Alert）的渐变效果；

　　☑ 图片轮播（Carousel）的滑动效果

　　transition.js 是针对 transitionEnd 事件的一个基本辅助工具，也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果

　　通过下面的代码可以在全局范围禁用过渡效果，并且必须将此代码放在transition.js(或bootstrap.js或bootstrap.min.js)后面，确保在js文件加载完毕后再执行下面代码

$.support.transition = false

The above is the detailed content of Introduction and use of Bootstrap plug-in. For more information, please follow other related articles on the PHP Chinese website!