Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.
With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.
Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念。
通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。
引入 BootStrap
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
适配图片
通过Bootstrap，我们要做的只是给图片添加 img-responsive class属性。这样图片的宽度就能完美地适配你的页面的宽度了。
适配文本
使用Bootstrap，使文本居中，使它看起来更棒。 我们所要做的只是把text-center class属性添加给 h2 元素。
<h2 class="red-text text-center">your text</h2>
适配按钮
通常情况下，你的 button 元素仅与它所包含的文本一样宽。通过使其成为块级元素，你的按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。
<button class="btn btn-block">Like</button>
添加Bootstrap的 btn-primary class 属性到按钮标签上，使按钮高亮。
<button class="btn btn-block btn-primary">Like</button>
Bootstrap自带了一些预定义的按钮颜色。浅蓝色 btn-info 被用在那些用户可能会采取的操作上。
<button class="btn btn-block btn-info">Info</button>
红色btn-danger被用来提醒用户该操作具有“破坏性”
<button class="btn btn-block btn-danger">Delete</button>
适配网格布局
class row 行
class col-md-* (中等屏幕适配)，col-xs-*(小屏适配)
- 填数字
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
Font Awesome
Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形，被保存在 .svg 的文件格式中。这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。
引入
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
给按钮添加一个icon
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like<i class="fa fa-thumbs-up"></i></button>
</div>
