1、使图片的宽度完美的适配页面宽度？（图片尺寸刚好等于我们的手机尺寸）
给图片添加 img-responsive class属性。
2、居中头部元素？
给图片添加 text-center class属性
3、Bootstrap风格按钮一？
给图片添加 btn class属性
4、Bootstrap风格按钮二？
给图片添加 btn-block class属性（在btn基础上加）
通常button元素仅与它所包含的文本一样宽，通过使其成为块级元素，按钮会伸展并填满页面整个水平空间，任何在它之下的元素会跟着浮动至该区块的下一行。
行内元素与块级元素区别图例：
5、Bootstrap风格按钮带颜色一（深蓝色）
给按钮添加 btn-primary class属性，该属性颜色不一定只用于按钮
效果：
6、Bootstrap风格按钮带颜色二(浅蓝色)
给按钮添加 btn-info class属性
效果：
7、Bootstrap自带了一些预定义的按钮颜色。
红色 btn-danger 被用来提醒用户该操作具有“破坏性”
效果：
8、12列网格布局
请注意，在这张图表中，class属性 col-md-* 正被使用。
在这里， md 表示 medium (中等的)，* 代表一个数字，它指定了这个元素所占的列宽。
通过此图表的属性设置可知，在中等大小的屏幕上(例如笔记本电脑)，元素的列宽被指定了。
xs 是 extra small 缩写（应用于较小的屏幕，比如手机屏幕），* 是你需要填写的数字，代表在一行中,各个元素应该占的列宽。
Eg:
效果：
9、Font Awesome 是一个非常方便的图标库。
这些图标都是矢量图形，被保存在 .svg 的文件格式中。
这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。
你可以将 Font Awesome 图标库增添至任何一个应用中，方法很简单，只需要在你的 HTML 头部增加下列代码即可：
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
10、 i 元素起初一般是让其它元素有斜体(italic)的功能，不过现在一般用来指代图标。
你可以将 Font Awesome 中的 class 属性添加到 i 元素中，把它变成一个图标。
eg：
效果：