Bootstrap JavaScript Plugin part of the note finishing

Last Update:2016-12-14 Source: Internet

Author: User

Tags button type

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Overview (1) Each plugin (with JS function), want to use the bootstrap plug-in, one is to write his HTML, the second is to use CSS to modify it, and then introduce the corresponding JS file. Bootstrap frame in the Carousel diagram, he has his own JS file. JavaScript plug-ins can be introduced individually (using a single *.js file provided by Bootstrap), or all at once (using Bootstrap.js or compressed version of Bootstrap.min.js). Recommended use of a compressed version of JavaScript files bootstrap.jsAnd bootstrap.min.jsAll of the plugins are included, and when you use them, just select one to bring in the page. (2) The Data property of the componentData-toggle: Refers to what event triggersData-target: The object that binds its effect(3) Dependencies between plugins import bootstrap.min.js before importing the jquery.js modal box modal.js-----Appears as a pop-up dialog box. Click the button to start a modal box from JavaScript. This modal frame will appear from top to bottom and gradually to the front of the page. <!--Button Trigger modal--
<button type= "button" class= "btn btn-primary btn-lg" data-toggle= "modal" data-target= "#myModal" >
Modal buttons
</button><!--Modal-to-fade transitions are added in Madal, not on button! <div class= "modalFade"Id=" Mymodal "tabindex="-1 "role=" dialog "aria-labelledby=" Mymodallabel "aria-hidden=" true "> <!--determines the size and position of the modal box, Change size by adding MODAL-LG class--<div class= "Modal-dialog modal-lg" > <!--Modal Content section--<div class= "Modal-conten T "> <!--(1) header--<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>
<!--(2) Content-<div class= "Modal-body" > <input type= "text" class = "Form-control" > &lt ;/div> <!--(3) tail--<div class= "Modal-footer" > <button type= "button" class= "Btn btn-d Efault "data-dismiss=" modal ">Close</button> <button type=" button "class=" btn btn-primary ">save Chang Es</button> </div> </div> </div></div> Enhancing the accessibility of modal frames

Be sure to .modal add role="dialog" properties, which are used for aria-labelledby="myModalLabel" the title bar of the Modal box only, to aria-hidden="true" notify the accessible tool to skip the DOM element of the modal box.

In addition, you should also pass aria-describedbyproperty is modal box .modalAdd descriptive information. The optional size modal box provides two selectable dimensions ( modal-lg/ modal-sm), by providing .modal-dialogAdds a style adjustment class implementation. Drop-down Menu--- Dropdown.js <!--(2) to do a simple navigation--
<div class= "Navbar-example" >
<!--This is a navigation--
<ul class= "nav nav-tabs" role= "Tablist" >
<li role= "Presentation" class= "active" ><a href= "#ios" >ios</a></li>
<li role= "Presentation" ><a href= "#html" >html</a></li>
<li role= "Presentation" ><a href= "#php" >php</a></li> </ul></div><!-- (1) This is the slide listening space--
<!--core is: Swipe into an anchor point in the Monitor control, then modify the anchor point's active-
<div data-spy= "scroll" data-target= ". Navbar-example" style= "Position:relative;height:300px;overflow:auto;" >
<!--(3) Set the ID object to match the tab in the navigation bar, causing the label to position the row (anchor feature), swipe to listen to a location, and return to the navigation bar on the corresponding a-label active---

Tab.js
<a href= "#ios" class= "btn Btn-danger" data-toggle= "tab" >iOS</a>
<a href= "#android" class= "btn Btn-danger" data-toggle= "tab" > Android </a>
<a href= "#html" class= "btn Btn-danger" data-toggle= "tab" >HTML</a>

<div class= "Tab-content" >
<p id= "ios" class= "Tab-pane Active" > This is the iOS panel </p>
<p id= "Android" class= "Tab-pane" > This is Android panel </p>
<Div class="Panel-group"Id= "accordion" role= "Tablist" aria-multiselectable= "true" >
<!--(1)Panel -<div class="Panel panel-default"><!--(2)This panel only heading can also have/panel-heading/panel-body-<div class= "panel-heading "role= "tab" id= "Headingone" >
<!--(3) title--

Panel-title"> <!--a link has an event that collapse collapsed, affecting objects that fold 1 (collapseone)--and <adata-toggle= "Collapse"Data-parent= "#accordion" href= "#collapseOne" aria-expanded= "true" aria-controls= "Collapseone" >
This is the first part of </a> <div class= "Panel-body" > Content. Text area </div> </div> <!--............... Second Panel ... Same as the first panel ...--<div class= "Panel Panel-default" > <div class= "panel-heading" role= "tab" id= "head Ingtwo ">

This is the second part of the </a> <div class= "Panel-body" > Content. Text Area </div>
</div> </div></div> ==================== Simple version ====================<button class= "btn btn-info btn-lg" data-toggle= "collapse" data-target= "#demo" > Buttons < /button>
<!--This is done--
<!--<div id= "demo" class= "in" >
I am the panel. Love, love the space press back to the phone ike good-looking offspring card number that cubic card <br>
Ajka AKD Hakdhna Ldkaljaa.ansc,cfav,cmam,va,vcma,mmd,am,dm,am,a
ADAKD Akjahfjka JKAFH
</div>

<!--bootstrap a class. Collapse
<div id= "Demo" class= "Collapse in" >
I am the panel. Love, love the space press back to the phone ike good-looking offspring card number that cubic card <br>
Ajka AKD Hakdhna Ldkaljaa.ansc,cfav,cmam,va,vcma,mmd,am,dm,am,a
ADAKD Akjahfjka JKAFH
</div> Carousel Diagram CarouselCarousel.js<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!--small Circle (navigation point) on the indicators carousel map<ol class= "Carousel-indicators" > <li data-target= "#carousel-example-generic" data-slide-to= "0" class= "active" ></li> <li data-target= "#carousel-example-generic" data-slide-to= "1" ></li> <li data-target= "#carousel-example-generic" data-slide-to= "2" ></li> </ol> <!--Wrapper for slides picture area-- <div class= "Carousel-inner" role= "ListBox" > <div class= "Item Active" > <div class= "Carousel-caption" > ... </div> </div> <div class= "Item" > <div class= "Carousel-caption" > ... </div> </div> ... </div> <!--Controls around the arrow-- <a class= "left Carousel-control" href= "#carousel-example-generic" role= "button" data-slide= "prev" > <span class= "Glyphicon glyphicon-chevron-left" ></span> <span class= "Sr-only" >Previous</span> </a> <a class= "Right Carousel-control" href= "#carousel-example-generic" role= "button" data-slide= "Next" > <span class= "Glyphicon glyphicon-chevron-right" ></span> <span class= "Sr-only" >Next</span></a></div>

Bootstrap JavaScript Plugin part of the note finishing

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More