一，利用bootstrap设计响应式页面
bootstrap能自动获取使用者的屏幕的宽度和高度，能自动调整html元素的高度和宽度，因此也称为响应式布局。
使用方法：加以下链接添加到头部：<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap /3.3.1/css/bootstrap.min.css"/>，并将html内容包含在一个class为container-fluid的div中。（备注:container-fluid 为宽度为100%，占据全部窗口的布局。）
例：<div class="container-fluid">小猫图片</div>
二，通过bootstrap使图片适配手机屏幕
只要给图片添加class为img-responsive就行了
三， 通过bootstrap使文本居中
只要给文本添加class为text-center就行了
四，通过bootstrap添加按钮
<button class="btn"></button>(备注：btn使按钮没有边框）
五，块级元素按钮
块级元素按钮是宽度占据整个屏幕的按钮
<button class="btn btn-block"></button>
六，给按钮添加颜色
<button class="btn btn-block btn-primary"></button>深蓝色
<button class="btn btn-block btn-info"></button>淡蓝色
<button class="btn btn-block btn-danger"></button>红色
七，页面布局
boostrap使用响应式网格系统，可以轻松将元素放入行中并设置宽度
<div class="row">
<div class="col-xs-6"></div>
</div>
备注：1、md大概是笔记本屏幕大小，xs大概是手机屏幕大小
2、宽度有以下几种分布：col-xs-6,col-xs-6;col-xs-4, col-xs-4, col-xs-4; col-xs-8, col-xs-4
八，创建行内元素
可以通过span标签来创建一个整行的内联元素
<p>Things cats <span class="text-danger">love</span></p>
九，在按钮上使用font awesome 图标
Font Awesome是一个方便的图标库。 这些图标都是矢量图形，以.svg文件格式存储。 这些图标可以像字体一样被处理,你可以使用像素设置字体大小一样指定这些图标的大小，并且这些图标可以继承父类HTML标签的字体大小。 您可以添加Font Awesome到任何应用程序，只需将下面的链接添加到你的HTML顶部就可以了：
<link rel="stylesheet" href= "// maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”/>
<button><i class="fa fa-thumbs-up"></i>like</button> like
<button><i class="fa fa-trash"></i>delete</button> delete
<button><i class="fa fa-info-circle"></i>info</button> info
<button><i class="fa fa-paper-plane"></i>submit</button> submit
十，使用Form Controls设置输入框样式
<input type="text" class="form-controls" placeholder="cats picture url" required>
