Home > Developer > JavaScript
Bootstrap in addition to rich Web components, such as the drop-down menus, button groups, navigation, paging, and so on, as described earlier. He also includes some JavaScript plugins.
The bootstrap JavaScript plugin can be imported into the page individually or once in a page. Because JavaScript plugins in Bootstrap are all dependent on the jquery library, you must first import the jquery library before importing it in a single import.
Disposable Import:
Bootstrap provides a single file that contains all JavaScript plugins for Bootstrap, i.e. bootstrap.js (compressed version: Bootstrap.min.js).
Use the following (or see the right-hand Code Editor 28-29 line):
<!-Import the jquery repository because Bootstrap's JavaScript plugin relies on jquery--><script src= "http://libs.baidu.com/jquery/1.9.0/ Jquery.js "></script><!—-one-time import of all bootstrap JavaScript plugins (compressed version)--><script src=" js/ Bootstrap.min.js "></script>
Special statement: The jquery repository can also load your local jquery version.
Import separately:
To facilitate the individual import of effects files, the Bootstrap V3.2 provides 12 JavaScript plugins, respectively:
? animation Transitions (transitions): corresponding plug-in file "Transition.js"
? modal pop-up window (Modal): corresponding plugin file "Modal.js"
? Drop- down menu (Dropdown): corresponding plug-in file "Dropdown.js"
? scroll Detection (scrollspy): corresponding plug-in file "Scrollspy.js"
? tab: the corresponding plug-in file "Tab.js"
? prompt Box (tooltips): corresponding plug-in file "Tooltop.js"
? popup Box (Popover): corresponding plug-in file "Popover.js"
? warning Box (alert): the corresponding plug-in file "Alert.js"
? button (Buttons): corresponding plug-in file "Button.js"
? Folding/accordion (Collapse): corresponding plug-in file "Collapse.js"
? Picture Carousel Carousel: corresponding plugin file "Carousel.js"
? Automatic positioning Buoy affix: corresponding plug-in file "Affix.js"
Download of the individual plugins above can be downloaded to GitHub (https://github.com/twbs/bootstrap).
Animation Transitions (transitions)In this section we will first "animation transition (Transitions)" The use of this plug-in, source files: transition.js
The bootstrap framework defaults to the transition effect of the basic animation for each component, and if you want to use it, there are two ways:
? Call the unified compiled bootstrap.js;
? The JavaScript plug-in file that invokes a single transition animation transition.js (the 29th line on the right introduces the address of the bootstrap posted on the transition.js).
The Transition.js file provides an animated transition effect for bootstrap components with transition animation effects. However, it is important to note that these transition animations are implemented using CSS3, so the Ie6-8 browser does not have these transition animation effects.
By default, the following components in the bootstrap framework use the Transition animation effect:
? Modal popup (Modal) sliding and gradient effect;
? The gradient Effect of the tab (tab);
? The gradient effect of the warning box (alert);
? The slide effect of the picture Carousel (Carousel).
"Modal popup (Modal) sliding and gradient effect" source code example.
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Import JavaScript Plugins </title>
<link rel= "stylesheet" href= "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
<body>
<button class= "btn btn-primary" type= "button" > click me </button>
<div class= "Modal Fade" id= "Mymodal" >
<div class= "Modal-dialog" >
<div class= "Modal-content" >
<div class= "Modal-header" >
<button type= "button" class= "Close" data-dismiss= "modal" ><span aria-hidden= "true" >×</span ><span class= "Sr-only" >Close</span></button>
</div>
<div class= "Modal-body" >
<p> modal pop-up window body content </p>
</div>
<div class= "Modal-footer" >
<button type= "button" class= "btn Btn-default" data-dismiss= "modal" > Close </button>
<button type= "button" class= "Btn btn-primary" > Save </button>
</div>
</div><!--/.modal-content--
</div><!--/.modal-dialog--
</div><!--/.modal--
<script src= "Http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script>
<script src= "Http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js" ></script>
<script src= "Http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js" ></script>
<script>
$ (function () {
$ (". Btn"). Click (function () {
$ ("#mymodal"). Modal ("toggle");
});
});
</script>
</body>
Bootstrap importing JavaScript plugins
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
