<!-- Controls --> <a href="#carousel-example-generic" role="button" data-slide="prev"> <span></span> <span>Previous</span> </a> <a href="#carousel-example-generic" role="button" data-slide="next"> <span></span> <span>Next</span> </a> </div>
PS:每个传送带控件的href属性必须是最外围传送带元素的ID值（这里是carousel-example-generic）。
添加以上代码之后，保存刷新浏览器。Bootstrap的样式和JavaScript都应该生效，页面中的图片应该变身成为滚动的传送带。现在的显示效果如下：
默认情况下，传送带的幻灯片每5秒切换一次。为了充分展示我们的作品，可以改成8秒。
(1) 打开 js/main.js
(2) 添加以下代码。这里先用jQuery方法检测相应的页面元素是否存在，如果存在则将传送带的间隔初始化为8000毫秒。
$(document).ready(function () { $(".carousel").carousel({ interval:8000 }); });
(3) 保存并刷新。
相关的选项可以参考Bootstrap 传送带的官方文档：
4.创建响应式分栏
页面中有三个文本，每块都有标题、段落和链接。在大于平板电脑的屏幕上，我们希望内容分为三栏，而在较窄的屏幕上，我们希望内容变成一栏全宽。
这里将拥戴Bootstrap 移动优先的响应式网格，其官方文档地址为：（其中文文档地址为：）。
简单的说，Bootstrap 内置12栏网格系统，其基本的类结构支持 col-12 表示全宽，col-6表示半宽，col-4表示四分之一宽，以此类推。
在Bootstrap3 中，由于创造性地使用了媒体查询，网格体统具有极强的适应力。如前所述，我们希望欢迎消息在比平板小的屏幕中呈现一栏全宽，而在大约768px 时变成三分之一栏宽。巧合的是，Bootstrap 内置的小屏幕断点恰好是768px，也就是 @screen-sm-min 变量的默认值。而大于 768px 的中屏幕断点是992px，对应变量是@screen-md-min。然后，大于1200px断点的算大屏幕。
小断点有一个特殊的栏类命名法：col-sm-。因为我们向在小断点之上使用三栏，所以这里使用。这样在小断点之下，分块元素会保持全宽，而在小断点之上，则会各站三分之一宽并肩排列。完整的结构如下所示：
<div> <div> <div> <h2>Welcome!</h2> <p>....</p> <p><a href="#">See our portfolio</a></p> </div> <div> <h2>Recent Updates</h2> <p>....</p> <p><a href="#">See what's new!</a></p> </div> <div> <h2>Our Team</h2> <p>...</p> <p><a href="#">Meet the team!</a></p> </div> </div> </div>
下面稍微解释下 container 和 row 类的作用：
□ container 类用于约束内容的宽度，并使其在页面内居中；
□ row 类用于包装三个栏，并未栏间流出左右外边距；
□ container 类和row 类都设定了清除，因而它们可以包含浮动元素，同时又清除之前的浮动元素。
现在，保存并刷新。可以看到对应的显示效果如下：
这样就利用响应式网格系统完成了响应式分栏，接下来我们要利用Bootstrap的按钮样式，把内容分块中的链接做成突出的效果。
5.把链接变成按钮
把重要的内容链接转换成突出显示的按钮很简单。为此要用到如下几个关键的类。
□ btn 类用于把链接变成按钮的样式；
□ btn-primary 类用于把按钮变成主品牌颜色；
□ pull-right 类用于把链接浮动到右侧，使其占据更大的空间，从而便于发现和点击。
把上述这几个类添加到三个内容块末尾的链接上：
复制代码 代码如下:
<p><a href="#">See our portfolio</a></p>
保存并刷新，其显示效果如下：
此处按钮的标记结构的官方文档地址为： （中文文档：）。
在基本的标记结构就为的条件下，接下来可以进行微调了。谓词需要用到自定义的CSS，而我们要借此机会体验一下Bootstrap的LESS文件的强大威力。
6.理解LESS