FCC之响应式框架Bootstrap

---

---

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

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

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

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

导入这句代码，是后面各种操作的基础

---

2、居中

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

text-center属性起作用

---

3、通常情况下，你的button元素仅与它所包含的文本一样宽。通过使其成为块级元素，你的按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。

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

---

4、深蓝色btn-primary是你的应用的主要颜色，被用在那些用户主要采取的操作上。

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

btn 首先是个按钮
btn-block 按钮成为块级元素
btn-primary 深蓝色

效果：

---

5、Bootstrap常用的一些颜色：
btn-primary 深蓝色
btn-info 浅蓝色
红色btn-danger被用来提醒用户该操作具有“破坏性”。

---

6、Bootstrap 使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求

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

也可以用 *col-xs- *，其中 xs 是 extra small 缩写（应用于较小的屏幕，比如手机屏幕）， 是你需要填写的数字，代表在一行中,各个元素应该占的列宽。

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

7、Font Awesome（超棒的字体） 是一个非常方便的图标库

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

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

代码：

<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"><i class="fa fa-trash"></i>Delete</button>

---

8、