Bootstrap js plug-in that you must learn every day_javascript skills

1. Overview of Bootstrap plug-ins

The components discussed in the previous Layout Components chapter are just the beginning. Bootstrap comes with 12 jQuery plug-ins, which extend the functionality and add more interactivity to the site. Even if you’re not an advanced JavaScript developer, you can start learning Bootstrap’s JavaScript plugin. Using the Bootstrap Data API, most plugins can be triggered without writing any code.

2. Import JavaScript plug-in

In addition to rich web components, Bootstrap includes drop-down menus, button groups, navigation, paging, etc. introduced earlier. It also includes some JavaScript plugins.

Bootstrap’s JavaScript plug-in can be imported into the page individually or at once. Because the JavaScript plug-ins in Bootstrap all depend on the jQuery library, the jQuery library must be imported first whether it is imported individually or all at once.

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).

<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） -->
<script src="js/bootstrap.min.js"></script>

Import individually:

In order to facilitate the separate import of special effects files, Bootstrap V3.2 provides 12 JavaScript plug-ins. They are:

☑ Animation transitions: corresponding plug-in file “transition.js”

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

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

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

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

☑ Tooltips: corresponding plug-in file "tooltop.js"

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

☑ Warning box (Alert): corresponding plug-in file "alert.js"

☑ Buttons: corresponding plug-in file "button.js"

☑ Fold/Accordion (Collapse): the corresponding plug-in file "collapse.js"

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

☑ Automatically locate buoy Affix: The corresponding plug-in file "affix.js"

3. data attribute

You can use all Bootstrap plugins just through the data attribute API without writing a single line of JavaScript code. This is a first-class API in Bootstrap and should be your first choice.

Then again, there may be situations where this feature needs to be turned off. Therefore, we also provide a way to turn off the data attribute API, that is, to unbind the event with the data-api namespace and bound on the document. Like this:

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

If you need to close a specific plug-in, you only need to add the name of the plug-in as the namespace before the data-api namespace, as shown below:

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

4. Programming API

We provide a pure JavaScript API for all Bootstrap plugins. All public APIs support individual or chain calling methods, and return the collection of elements they operate on (note: the calling form is consistent with jQuery). For example:

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

All methods can accept an optional options object as a parameter, or a string representing a specific method, or without any parameters (in this case, the plugin will be initialized to the default behavior), as shown below :

// 初始化为默认行为
$("#myModal").modal() 
 // 初始化为不支持键盘    
$("#myModal").modal({ keyboard: false }) 
// 初始化并立即调用 show
$("#myModal").modal('show')  

Each plugin also exposes its original constructor on the Constructor property: $.fn.popover.Constructor. If you want to get an instance of a specific plugin, you can get it directly through the page element:

$('[rel=popover]').data('popover').

5. Avoid namespace conflicts

Sometimes Bootstrap plugins may need to be used with other UI frameworks. In this case, a namespace conflict may occur. If this unfortunately happens, you can restore its original value by calling the plugin's .noConflict method.

// 返回 $.fn.button 之前所赋的值
var bootstrapButton = $.fn.button.noConflict() 
// 为 $().bootstrapBtn 赋予 Bootstrap 功能       
$.fn.bootstrapBtn = bootstrapButton   

6、事件

Bootstrap 为大多数插件的独特行为提供了自定义事件。一般来说，这些事件有两种形式：
动词不定式：这会在事件开始时被触发。例如 ex: show。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。

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

过去分词形式：这会在动作执行完毕之后被触发。例如 ex: shown。

以上就是本文的全部内容，希望对大家的学习有所帮助。