Bootstrap 轮播图技巧

 

bootstrap的使用让页面开发的速度变得更快,在这里就着重解析一下bootstrap3里轮播图模块,和不同情况（屏幕宽度）下轮播图图片大小如何做到响应式切换.

下面代码即是bootstrap3轮播图模块解析:

 

1. <section id="banner">

2. <!-- 当同一个页面中,同时存在多个轮播图时,不同的轮播图以及他的控制按钮,需要有相对应id值 -->

3. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

4. <!-- 控制翻页的圆点 -->

5. <ol class="carousel-indicators">

6. <!-- data-target 指向被控制的轮播图 -->

7. <!-- data-slide-to 表示点击这个点时,需要跳转到第几页 -->

8. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

9. <li data-target="#carousel-example-generic" data-slide-to="1"></li>

10. <li data-target="#carousel-example-generic" data-slide-to="2"></li>

11. <li data-target="#carousel-example-generic" data-slide-to="3"></li>

12. </ol>

13.  

14. <!-- 轮播图内部显示的内容 -->

15. <div class="carousel-inner" role="listbox">

16. <!-- 一个item表示一页 -->

17. <!-- active表示当前正在显示的一页 -->

18. <div class="item active" >

19. <!--<img src="./img/slide_01_2000x410.jpg" alt="...">-->

20. <!-- carousel-caption 轮播图中的字幕 -->

21. <