一，利用bootstrap设计响应式页面

bootstrap能自动获取使用者的屏幕的宽度和高度，能自动调整html元素的高度和宽度，因此也称为响应式布局。

www.bootcss.com/

使用方法：加以下链接添加到头部：<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>