滚动广告Carousel，是一个用于轮播内容的组件，也就是平常经常用的banner。
<!-- 设置一个轮播图的id，格式和上一节一样 --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- 轮播图下方的小圆点，用于图片切换是标识当前的图片 --> <ol class="carousel-indicators"> <!-- data-target 指定轮播图的id，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> <li data-target=‘#carousel-example-generic‘ data-slide-to=‘4‘></li> </ol> <!-- 轮播图的正文部分，当中有需要轮播的图片，.carousel-caption类添加一些文字信息。 --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="./images/chrome-big.jpg" > <div class="carousel-caption">这是第一张图片</div> </div> <div class="item"> <img src="./images/firefox-big.jpg" > <div class="carousel-caption">这是第二张图片</div> </div> <div class="item"> <img src="./images/ie-big.jpg" > <div class="carousel-caption">这是第三张图片</div> </div> <div class="item"> <img src="./images/opera-big.jpg" > <div class="carousel-caption">这是第四张图片</div> </div> <div class="item"> <img src="./images/safari-big.jpg" > <div class="carousel-caption">这是第五张图片</div> </div> </div> <!-- 左边的倒退按钮 --> <a class="left carousel-control" href="#carousel-example-generic" role=‘button‘ data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">previous</span> </a> <!-- 右边的前进按钮 --> <a class="right carousel-control" href="#carousel-example-generic" role=‘button‘ data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">next</span> </a> </div>
基本的格式就是这个样子，其中在最外层的div，需要给它设置一个id，然后其中包含的内容都会指向这个id。
给滚动广告 .carousel-control 限定一个高height：***px；如果不限定，图片的高会影响到整体的布局。
轮播的图片可以设置宽度width：100%，将图片铺满屏幕。
栅格系统布局
<!-- .row 定义一个栅格系统，但是必须要被 .container 或者 .container-fluit 包含 --> <div class="container"> <div class="row"> <!-- .col-md-4 定义了其中的一个列。使用 .col-md-* 栅格类就可以创建一个基本的栅格系统， 在手机和平板设备上一开始是堆叠在一起的。在桌面（>970px）屏幕设备上变为水平排列 --> <div class="col-md-4"> <img class="img-circle" src="images/firefox-logo-small.jpg" > <p><a href="" class="btn btn-default" role=‘botton‘>点我下载</a></p> </div> <div class="col-md-4"> <img class="img-circle" src="images/chrome-logo-small.jpg" > <h2>firefox</h2> <p><a href="" class="btn btn-default" role=‘botton‘>点我下载</a></p> </div> <div class="col-md-4"> <img class="img-circle" src="images/safari-logo-small.jpg" > <h2>firefox</h2> <p><a href="" class="btn btn-default" role=‘botton‘>点我下载</a></p> </div> </div> </div>
当在桌面（>970px）的屏幕上变为水平排列，在手机和平板设备上是堆叠在一起的。这样就很好的实现了响应式的布局。是页面的用户体验更好。
学PHP的小蚂蚁 原创博客 http://my.oschina.net/woshixiaomayi/blog
小蚂蚁学习Bootstrap（2）——轮播广告carousel和栅格系统布局
原文：http://my.oschina.net/woshixiaomayi/blog/527707