Bootstrap

Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念。

通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。

你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：

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

首先，我们需要把所有的HTML内容放在class为container-fluid的div下

1.给图片添加img-responsive class属性。这样图片的宽度就能完美地适配你的页面的宽度了。
2.添加text-center class属性，可以居中头部元素
3.Bootstrap有它自己的 button 按钮风格，在button 元素中，给它添加 btn class 属性
4.添加Bootstrap的 btn-block class 到你的按钮，使其成为块级元素，你的按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。

这张图阐述了行内元素与块级元素的区别： O32cDWE.png

5.深蓝色 .btn .btn-block .btn-primary
6.浅蓝色 .btn .btn-block .btn-info
7.红色 .btn .btn-block .btn-danger
8.下面这张图表显示了 Bootstraps 的12列网格布局是如何起作用的：

col.png

请注意，在这张图表中，class属性 col-md-* 正被使用。在这里，md 表示 medium (中等的)，* 代表一个数字，它指定了这个元素所占的列宽。通过此图表的属性设置可知，在中等大小的屏幕上(例如笔记本电脑)，元素的列宽被指定了.

应用于较小的屏幕，比如手机屏幕，将会使用 col-xs-* ，其中 xs 是 extra small 缩写.
9.可以用 span 标签来创建行内元素，把 "Things cats love" 中的 "love" 放到 span 标签下。然后为其添加 text-danger class 来使文字变成红色。

<p>Top 3 things cats <span class = "text-danger">love:</span></p>

---

10.Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形，被保存在 .svg 的文件格式中。这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。

你可以将 Font Awesome 图标库增添至任何一个应用中，方法很简单，只需要在你的 HTML 头部增加下列代码即可：

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

你可以通过 Font Awesome 库增加一个 thumbs-up 图标 thumps up.PNG

到你的 like 按钮中，方法是在i 元素中增加 class 属性 fa 和 fa-thumbs-up。

<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i></Likebutton>

info 按钮添加 info-circle 图标，<i class="fa fa-info-circle "></i> info.PNG

delete 按钮添加 trash 图标，<i class="fa fa-trash"></i>

飞机图标 <i class="fa fa-paper-plane"></i>