text-primary 属性值使标题直接变成了红色，text-center使标题直接居中
<h2 class="text-primary text-center">CatPhotoApp</h2>
img-responsive 使图片变成响应式自动调整大小适应屏幕
<img src="/images/running-cat.jpg" class="img-responsive">
将能用class属性值直接定义的样式来替代多余的css样式
"love" 放到 span 标签下。然后为其添加 class="text-danger" 来使文字变成红色
<p>Things cats
<span class="text-danger">love</span>:
</p>
为Cat Photo 应用做一个导航， 标题图片放在一行里
<div class="row">
<div class="col-xs-8"> <h2 class="text-primary text-center">CatPhotoApp</h2></div>
<div class="col-xs-4"> <a href="#"><img class="img-responsive thick-green-border" src="/images/relaxing-cat.jpg"></a></div>
</div>
图标库
Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形，被保存在 .svg 的文件格式中。这些图标就和字体一样，可以通过像素单位指定它们的大小,
可以将 Font Awesome 图标库增添至任何一个应用中，方法很简单，只需要在 HTML 头部增加下列代码即可：
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
通过 Font Awesome 库增加一个 thumbs-up 图标到你的 like 按钮中，方法是在i 元素中增加 class 属性 fa 和 fa-thumbs-up,
i 元素起初一般是让其它元素有斜体(italic)的功能，不过现在一般用来指代图标
<button class="btn btn-block btn-primary">
<i class="fa fa-thumbs-up"></i>Like
</button>
将 Bootstrap 的 col-xs-*用在 form 元素中。这样的话，我们的单选按钮就可以均匀地在页面上展开，不需要知道屏幕的分辨率有多宽
<form action="/submit-cat-photo">
<div class="row">
<div class="col-xs-6"> <label><input type="radio" name="indoor-outdoor"> Indoor</label></div>
<div class="col-xs-6"> <label><input type="radio" name="indoor-outdoor"> Outdoor</label></div>
</div>
</form>
为输入文本框增加属性class="form-control" 来增加框100%宽度
提交按钮增加属性class="btn btn-primary"变成红色，增加i元素添加图标
<input type="text" class="form-control" placeholder="cat photo URL" required >
<button type="submit" class="btn btn-primary">
<i class="fa fa-paper-plane"></i>
Submit
</button>
91