bootstrap框架提供了很多好用的javascript组件，可以很方便的实现常用的js效果，比如点击弹出一个div（modal）、下拉菜单、旋转木马（carousel或slider），非常适合前端不专业的后端程序员使用。下面就来看下modal和carousel如何使用。
modal即点击弹出div的效果，先看下效果图。
代码如下：
<!DOCTYPE html> <html lang="zh"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1"> <link href=""> <script src=""></script> <script src=""></script> </head> <body> <style> .prime-img { width: 100%; } .mw { width: 300px; } .box { margin: 150px auto; text-align: center; width: 150px; } </style> <div> <div> <h4>Modal Example</h2> <!-- Trigger the modal with a button --> <img data-toggle="modal" data-target="#myModal" src="" alt=""> <h4>花</h4> </div> </div> <!-- Modal --> <div role="dialog"> <div> <!-- Modal content--> <div> <div> <button type="button" data-dismiss="modal">×</button> <h4>Modal</h4> </div> <div> <img src="" alt=""> <div>红花娇艳</div> </div> <div> <button type="button" data-dismiss="modal">Close</button> </div> </div> <!--End Modal content--> </div> </div> <!-- End Modal --> </div> </body> </html>
代码第7-9行是需要引入的css和js，可以看到bootstrap.min.js依赖于jQuery。
第32行中的 data-target="#myModal" 指定了要弹出div的id，第38行开始的id为myModal的div就是弹出的实现。其中可以看到弹出的div内容被包含在.modal-content中，而它又被分成了三个部分，.modal-header、.modal-body、.modal-header。具体在使用时不用拘泥于上面的写法，可以自己定义布局和样式。
再看carousel(也可以叫slider)，即旋转木马，又叫幻灯片或滑块。
看下效果图，箭头可以控制：
按钮也可以控制
看下代码：
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1"> <link href=""> <script src=""></script> <script src=""></script> <style> .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 70%; margin: auto; } </style> </head> <body> <div> <br> <div data-ride="carousel"> <!-- Indicators --> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div role="listbox"> <div> <img src="" alt="花"> <div> <h3>花</h3> <p>红花娇艳</p> </div> </div> <div> <img src="" alt="树"> <div> <h3>树</h3> <p>大木苍翠</p> </div> </div> <div> <img src="" alt="海"> <div> <h3>海</h3> <p>海浪汹涌</p> </div> </div> <div> <img src="" alt="湖"> <div> <h3>湖</h3> <p>晚湖静美</p> </div> </div> </div> <!-- Left and right controls --> <a href="#myCarousel" role="button" data-slide="prev"> <span aria-hidden="true"></span> <span>Previous</span> </a> <a href="#myCarousel" role="button" data-slide="next"> <span aria-hidden="true"></span> <span>Next</span> </a> </div> </div> </body> </html>
整个滑动内容和控制元素都被#myCarousel的div包起来，它分为三部分：第23行ol包起来的li组成的按钮，第31行开始到第65中是要滑动的3个.item元素，第67行后面是左右控制箭头。