bootstrap的使用让页面开发的速度变得更快,在这里就着重解析一下bootstrap3里轮播图模块,和不同情况(屏幕宽度)下轮播图图片大小如何做到响应式切换.
下面代码即是bootstrap3轮播图模块解析:
-
<section id="banner">
-
<!-- 当同一个页面中,同时存在多个轮播图时,不同的轮播图以及他的控制按钮,需要有相对应id值 -->
-
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
-
<!-- 控制翻页的圆点 -->
-
<ol class="carousel-indicators">
-
<!-- data-target 指向被控制的轮播图 -->
-
<!-- data-slide-to 表示点击这个点时,需要跳转到第几页 -->
-
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
-
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
-
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
-
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
-
</ol>
-
<!-- 轮播图内部显示的内容 -->
-
<div class="carousel-inner" role="listbox">
-
<!-- 一个item表示一页 -->
-
<!-- active表示当前正在显示的一页 -->
-
<div class="item active" >
-
<!--<img src="./img/slide_01_2000x410.jpg" alt="...">-->
-
<!-- carousel-caption 轮播图中的字幕 -->
-
<