Boostrap provides 12 JavaScript plugins, including:
Animation Transition
Modal Modal
Dropdown menu
Scrollspy
Tab
Prompt box Tooltip
Popover
Warning box Alert
Button
Collapse
Rotary Carousel
Automatically positioning float Affix
Modal pop-up window
<div><div><div><div><button type="button" data-dismiss="modal" aria-hidden="true">×</button><h4>Modal title</h4></div><div><p>This is what the pop-up window shows........</p></div><div><button type="button" data-dismiss="modal">Close</button><button type="button" data-dismiss="modal">Save</button></div></div></div>
Pull-down menu
Declarative usage
Generally, the drop-down menu is implemented on the navigation bar (navbar) and tab (tab).
<div id="nav-example"><A href="#">Project Name</A><ul role="navigation"><li><A data-toggle="dropdown" role="button" href="#" id="drop1">Dropdown<b></b></A><ul aria-labelledby="drop1" role="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><A data-toggle="dropdown" role="button" href="#" id="drop2">Dropdown2<b></b></A><ul aria-labelledby="drop2" role="menu"><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><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><div id="home">home...</div><div id="profile">profile...</div><div id="messages">messages...</div><div id="settings">settings...</div></div>
Prompt box
<button data-original-title="Tooltip on left" data-toggle="tooltip"data-placement="left">Tooltip on left</button><button data-original-title="Tooltip on top" data-toggle="tooltip"data-placement="top">Tooltip on top</button><button data-original-title="Tooltip on bottom" data-toggle="tooltip"data-placement="bottom">Tooltip on bottom</button><button data-original-title="Tooltip on bottom" data-toggle="tooltip"data-placement="bottom">Tooltip on bottom</button><button data-original-title="Tooltip on right" data-toggle="tooltip"data-placement="right">Tooltip</button>
Warning box
<div><button data-mismiss="alert" type="button">X</button><h4>Warning Title</h4><p>Change this and that and try agoin. </p></div>
fold
<div id="accordion"><div><div><h4><A data-toggle="collapse" data-parent="#accordion" href="#accordion">Trigger element#1</A></h4></div><div id="collapseOne"><div>Fold content......</div></div></div></div>
Rotating carousel
<div data-ride="carouse1" id="container"><%--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- data-slide-to="2" data-target="#container"></li></ol><%--Left and Left Control Buttons--%><a data-slide="prev" href="#container"><span></span></a><a data-slide="prev" href="#container"><span></span></a></div>
The above is the JavaScript plug-in chapter of the basic Boostrap tutorial introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!