Boostrap Basic Tutorial JavaScript plug-in _javascript tips

Boostrap provides 12 JavaScript plug-ins, including:

Animation transition Transition

Modal Modal

Drop down menu Dropdown

Scrolling detection Scrollspy

TAB tab

Prompt Box Tooltip

Pop-up box PopOver

Alert Box alert

Buttons button

Folding Collapse

Rotating Wheel Seeding Carousel

Automatic positioning Buoy Affix

Modal Bomb window

<div class= "modal show" >
<div class= "Modal-dialog" >
<div class= "Modal-content" >
< Div class= "Modal-header" >
<button type= "button" class= "Close" data-dismiss= "modal" aria-hidden= "true" >
x
</button>
 
 

Drop down Menu

Declarative usage

General Pull-down menus are implemented on the navigation bar (NavBar) and Tabs (tab)

<div class= "nav navbar-default" id= "Nav-example" > <a href= "#" class= "Navbar-brand" >project Name</A> <ul role= "navigation" class= "Nav navbar-nav" > <li class= "dropdown" > <a data-toggle= "dropdown" class= " Dropdown-toggle "role=" button "href=" # "id=" Drop1 "> Dropdown<b class=" caret "></b> </A> <ul Aria-labelledby= "Drop1" role= "menu" class= "Dropdown-menu" > <li role= "presentation" ><a href= "#" tabindex= "-1" role= "MenuItem" >Action1</a> </li> <li role= "presentation" ><a href= "#" tabindex= "-1" role = "MenuItem" >Action2</a> </li> <li role= "presentation" ><a href= "#" tabindex= "-1" role= " MenuItem ">Action3</a> </li> </ul> </li> <li class=" dropdown open "> <a data-toggle=
"Dropdown" class= "Dropdown-toggle" role= "button" href= "#" id= "Drop2" > Dropdown2<b class= "Caret" ></b> </A> <ul aria-labelledby= "Drop2" role= "menu" class= "Dropdown-men"U "> <li role=" presentation "><a href=" # "tabindex="-1 "role=" MenuItem ">Action4</a> </li> <li role= "Presentation" ><a href= "#" tabindex= "-1" role= "MenuItem" >Action5</a> </li> <li
role= "Presentation" ><a href= "#" tabindex= "-1" role= "MenuItem" >Action6</a> </li> </ul> </li> </ul> </div>

tab

<%--Navigation bar tab--%>
<ul class= nav nav-tabs > <li><a href= "
#home" data-toggle= "tab" > home</a> </li>
<li><a href= "#profile" data-toggle= "tab" >Profile</a> </li>
<li><a href= "#messages" data-toggle= "tab" >Messages</a> </li>
<li><a href = "#settings" data-toggle= "tab" >Settings</a> </li>
</ul>
<%--tab Panel--%>
<div class= "Tab-content" >
<div class= "Tab-pane active" id= "Home" >home...</div>
<div class= "Tab-pane" id= "Profile" >profile...</div> <div class= "Tab-pane" id= "Messages
" >messages ...</div>
<div class= "Tab-pane" id= "Settings" >settings...</div>
</div>

Prompt box

<button data-original-title= "Tooltip on left" class= btn Btn-default "data-toggle=" Tooltip "
data-placement=" Left > Left-Hand tooltip</button>
<button data-original-title= "Tooltip on Top" class= "btn Btn-default" data-toggle= "tooltip"
data-placement= "Top" > above tooltip</button>
<button data-original-title= " Tooltip on Bottom "class=" btn Btn-default "data-toggle=" Tooltip "data-placement="
> Below Bottom button>
<button data-original-title= "Tooltip on Right" class= "btn Btn-default" data-toggle= "Tooltip
" Data-placement= "Right" > Right-hand tooltip</button>

Warning Box

<div class= "alert alert-warning fade in" >
<button data-mismiss= "alert" class= "Close" type= "button" >x </button>
 
 

Folded

<div class= "Panel-group" id= "accordion" >
<div class= "Panel Panel-default" >
<div class= " Panel-heading ">
 
 

Rotation Wheel Seeding

<div data-ride= "Carouse1" class= "Carousel cameraslide" id= "container" > <%--picture container--%> <div " Carousel-inner "> <div class=" Item Active "></div> <div Class= "Item" ></div> <div class= "item" ></div> </div> <%--Circle indicator--%> <ol class=" Carousel-indicators " > <li data-slide-to= "0" data-target= "#container" class= "active" ></li> <li data-slide-to= "1" data-target= "#container" ></li> <li data-slide-to= "2" data-target= "#container" ></li> </ol > <%--control button--%> <a data-slide= "prev" href= "#container" class= "left Carousel-control" > <span class= " Glyphicon glyphicon-chevron-left "></span> </a> <a data-slide=" prev "href=" #container "class=" right Carousel-control "> <span class=" Glyphicon glyphicon-chevron-right "></span>;/a> </div> 

The above is a small set to introduce the Boostrap Basic Tutorial JavaScript plug-in chapter, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!