Home > Developer > JavaScript

Bootscript/javascript components

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 ＞

(1) each plug-in (with JS function components), 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). It is recommended to use a compressed version of the JavaScript files Bootstrap.js and bootstrap.min.js all include all plug-ins, when you use, just select a page to Introduce. (2) the Data property of the component data-toggle: refers to what event triggers data-target: the object that binds its effect (3) the dependency between the Plug-ins imports Bootstrap.min.js before importing the Jquery.js I. 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-->    The fade transition effect is added to the madal, not on the button!  <div class= "modal fade" id= "mymodal" tabindex= "-1" role= "dialog" aria-labelledby= "mymodallabel" aria-hidden= "true" >  <!--determines the size and position of the modal box by adding the Modal-lg class to change the size-->   <div class= "modal-dialog MODAL-LG >     <!--modal content section-->     <div class= "modal-content" >       <!--(1) header-->       <div class= "modal-header" >        &NB Sp;<button type= "button" class= "close" data-dismiss= "modal" ><span aria-hidden= "true" >&times;</ Span><span class= "sr-only" > Close </span></button>        &NBSP;&LT;H4 CLass= "modal-title" id= "mymodallabel" > form submission two. drop-down menu---dropdown.js  <!--small drop-down button--><div class= "dropdown" >   <!--(1) Click the button-->  <button id= "dlabel "type=" button "data-toggle=" dropdown "class=" btn btn-success btn-lg ">    buttons    <span class=" Caret "></span>   </button>   <!--(2) menu directory-->  <!--<ul class=" Dropdown-menu ">     <li><a href=" # "> Baidu </a></li>   </ul >-->   <div class= "dropdown-menu" >adnajdhajkd</div> </div> <!-- Write yourself a--><!--this is a super-simple notation I've summed up--><div class= "dropdown" >    <button class= "btn btn-danger" data-toggle= "dropdown" > Buttons </button>    <div class= "dropdown-menu" role = "menu" > This is the panel </div> </div>    scrolling monitoring---scrollspy.js      1. to the block settings you want to swipe data-spy= "scroll"       2. to set the block settings for data-spy= "scroll"   relative positioning  &nbsP; <!--system provides source code--><!--<body data-spy= "scroll" data-target= ". navbar-example" >  ...  <div class= "navbar-example" >    <ul class= "nav nav-tabs" role= "tablist" >      ... & nbsp   </ul>  </div>  ... </body>-->   <!--write your own-->  <!--(2) make 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 sliding listening space--><!-- The core is: the listener controls slide to an anchor point, then modify this anchor point 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 active-->   on the navigation bar relative to the A tag

three. tab togglable tabs---tab.js      <!--<ul class= "nav nav-tabs" role = "tablist" >        <li role= "presentation" class= "active" ><a href= "#ios" role= "tab" data-toggle= "tab" >Home</a></li>         <li role= "presentation" role= "tab" ><a href= "#android" data-toggle= "tab" > profile</a></li>         <li role= "presentation" role= "tab" ><a href= "# HTML "data-toggle=" tab ">Messages</a></li>       </ul>-->   <!--2. set the function panel for him-->  <!--tab panes--> <!--<div class= "tab-content" >         <div role= "tabpanel" class= "tab-pane active" id= "ios" > This is the iOS panel </div>         <div role= "tabpanel" class= "tab-pane" id= "android" > This is Android panel </div>          <div role= "tabpanel" class= "tab-pane" id= "html" > thisis the HTML panel </div>      </div>-->  <!--lite--> <!--1,   (1) Set data-toggle = "tab"    (2) for a tag to set the corresponding anchor point id      --> <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> <!--2. Give him the function Panel.--> <!--tab panes--> <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 the Android panel </p>   <!--<p id= "html" class= "tab-pane" > This is an HTML panel </p>-->  <a href= "#" id= "html" class= " Tab-pane "> I was html</a>  </div>   three.Tool tip ToolTips tooltip.jsCopy <button type= "button" class= "btn btn-default" data-toggle= "tooltip" data-placement= "left" title= "tooltip on Left ">tooltip on left</button> <button type=" button "class=" btn btn-default "data-toggle=" Tooltip " data-placement= "top" title= "Tooltip on top" >tooltip on top</button> <button type= "button" class= "btn Btn-default "data-toggle=" tooltip "data-placement=" Bottom "title=" tooltip on bottom ">tooltip on Bottom</button > <button type= "button" class= "btn btn-default" data-toggle= "tooltip" data-placement= "right" title= "tooltip on Right "the >tooltip on right</button> <!--light copy code is useless and must add the JQ code yourself: $ (' #example '). Tooltip ();--> <script > Get all the Data-toggle objects and give them an event tooltip $ ("[data-toggle = ' tooltip ']"). tooltip (); </script> Four. popup   popovers popover.js   copy   <button type= "button" class= "btn btn-default" data-container= "body" data-toggle= "popover" data-placement= "left" data-content= "content, You can set it yourself" >  popover on left</button>  <button type= "button" class= "btn btn-default" data-container= "body" data-toggle= "popover" data-placement= "top" data-content= "vivamus sagittis lacus vel augue laoreet rutrum faucibus." >   popover on Top</button> <button type= "button" class= "btn btn-default" data-container= " Body "data-toggle=" popover "data-placement=" bottom "data-content=" vivamussagittis lacus vel augue laoreet rutrum Faucibus. " >   popover on Bottom</button> <button type= "button" class= "btn btn-default" data-container= "body" data-toggle= "popover" data-placement= "right" data-content= "vivamus sagittis lacus vel augue Laoreet rutrum Faucibus. " >   popover on Right</button><!--must Add the JQ code yourself--><script>   $ ("[data-toGgle = ' PopOver '] "). popover (); </script>    Five. Folding Collapse collapse.js Bootstrap version of Code  <!--(1) set a div class to Panel-group--> <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---        &LT;H4 class= "panel-title" >         &LT;!--A Link has an event, collapse collapsed, Affects objects that collapse 1 (collapseone)-->         <a data-toggle= "collapse" data-parent= "#accordion "href=" #collapseOne "aria-expanded=" true "aria-controls=" collapseone ">            This is the first part of          </a>       six. carousel Diagram Carousel carousel.js    <div id= "carousel-example-generic" class= "carousel slide" data-ride= "carousel" >    <!--small circle on indicators Carousel (navigation point)-->  <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" >    & Nbsp;<div class= "item active" >              <div class= "carousel-caption" >         ...       </div>      </div>     <div class= "item" >  &nbsP           <div class= "carousel-caption" >         ...       </div>     </div>     ...   </div>   <!--controls  arrows-->   <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> Reprinted from: Http://www.cnblogs.com/zhaojing/p/6183486.html.

Bootscript/javascript Components

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.

Related Keywords:
eem components mulesoft components vdi components cts components html components uri components wsdl components
Related Article
Ajax and 302 response code test_javascript-js tutorial

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

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