整理：Bootstrap

1.动态兼容手机与浏览器

在HTML开头添加

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

2.图片的宽度完美地适配页面的宽度

为图片添加img-responsive class属性

<img class="img-responsive" src="/images/running-cat.jpg">

3.让元素内容居中

添加text-center class属性

<h2 class="red-text text-center">CatPhotoApp</h2>

center-block 让当前元素居中

4.按钮

btn class属性：让按钮更好看

<button class="btn">like</button>

btn-block class属性：让按钮成为块级元素，占满一行——仍然需要 btn class

<button class="btn btn-block">Like</button>

btn-primary class属性：让按钮颜色变为深蓝色——仍然需要 btn class

<button class="btn btn-block btn-primary">Like</button>

btn-info class属性：让按钮颜色变为浅蓝色——仍然需要 btn class——用在那些用户可能会采取的操作上

<button class="btn btn-block btn-info">Info</button>

btn-danger class属性：让按钮颜色变为红色——仍然需要 btn class——用来提醒用户该操作具有“破坏性”，例如删除

<button class="btn btn-block btn-danger">Delete</button>

5.响应式网格布局

父级的样式为row,一共分为12列

<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>

单选按钮就可以均匀地在页面上展开，不需要知道屏幕的分辨率有多宽

<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>

复选框就可以均匀地在页面上展开了，不管屏幕的分辨率是多大

<div class="row">
　　<div class="col-xs-4">
　　　　<label><input type="checkbox" name="personality"> Loving</label>
　　</div>
　　<div class="col-xs-4">
　　　　<label><input type="checkbox" name="personality"> Lazy</label>
　　</div>
　　<div class="col-xs-4">
　　　　<label><input type="checkbox" name="personality"> Crazy</label>
　　</div>
</div>

6.矢量图标库Font Awesome

这些图标都是矢量图形，被保存在 .svg 的文件格式中。

这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父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>

 <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>

<button class="btn btn-block btn-danger"><li class="fa fa-trash"></li> Delete</button>

<button class="btn btn-primary" type="submit"><i class="fa fa-paper-plane"></i> Submit</button>

7.well 属性

为设定的列创造出一种视觉上的深度感