Boostrap提供了12種JavaScript插件，包括：
動畫過渡Transition
模態Modal
下拉菜單Dropdown
滾動偵測Scrollspy
選項卡Tab
提示框Tooltip
彈出框Popover
警告框Alert
按鈕Button
折疊Collapse
旋轉輪播Carousel
自動定位浮標Affix
模態彈窗
<div><div><div><div><button type="button" data-dismiss="modal" aria-hidden="true">×</button><h4>Modal標題</h4></div><div><p>這裡是彈窗顯示的內容...........</p></div><div><button type="button" data-dismiss="modal">關閉</button><button type="button" data-dismiss="modal">保存</button></div></div></div></div>
下拉菜單
聲明式用法
一般下拉菜單都是在導航條（navbar）和選項卡（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>
選項卡
<%--導航條選項卡--%><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><%--選項卡面板--%><div><div id="home">home...</div><div id="profile">profile...</div><div id="messages">messages...</div><div id="settings">settings...</div></div>
提示框
<button data-original-title="Tooltip on left" data-toggle="tooltip"data-placement="left">左側Tooltip</button><button data-original-title="Tooltip on top" data-toggle="tooltip"data-placement="top">上方Tooltip</button><button data-original-title="Tooltip on bottom" data-toggle="tooltip"data-placement="bottom">下方Tooltip</button><button data-original-title="Tooltip on right" data-toggle="tooltip"data-placement="right">右側Tooltip</button>
警告框
<div><button data-mismiss="alert" type="button">X</button><h4>警告標題</h4><p>Change this and that and try aggin。 </p></div>
折疊
<div id="accordion"><div><div><h4><A data-toggle="collapse" data-parent="#accordion" href="#accordion">觸發元素#1</A></h4></div><div id="collapseOne"><div>折疊內容......</div></div></div></div>
旋轉輪播
<div data-ride="carouse1" id="container"><%--圖片容器--%><div><div><img src="images/banner_slide_01.jpg"></div><div><img src="images/banner_slide_02.jpg"></div><div><img src="images/banner_slide_03.jpg"></div></div><%--圓圈指示符--%><ol><li data-slide-to="0" data-target="#container"></li><li data-slide-to="1" data-target="#container"></li><li data-slide-to="2" data-target="#container"></li></ol><%--左右控制按鈕--%><a data-slide="prev" href="#container"><span></span></a><a data-slide="prev" href="#container"><span></span></a></div>
以上所述是小編給大家介紹的Boostrap基礎教程之JavaScript插件篇，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！