FreeCodeCamp 学习笔记（二）响应式框架bootstrap

响应式设计：
添加：<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type=“text/css”>
给 <img> 添加 img-responsive class
属性使图片宽度适应屏幕宽度
给 文本
添加 text-center class属性使文本居中
给 <button> 添加 btn class属性使按钮为 bootstrap
的自带按钮样式

<button> class :
btn-block: 使按钮填满整个水平空间
btn-primary: 使按钮设为默认的深蓝色
btn-info: 使按钮设为提示的浅蓝色
btn-danger: 使按钮设为警告的红色

响应式网格布局：
设置 class 属性：(一般设置于 <div>
中）
需要先设置一个class=“row”的<div>，在其中定义一行中每个列元素
对每个列元素设置 class : col-md-*
    col-xs-*
md适用于屏幕宽度中等的设备（如笔记本电脑）
xs适用于屏幕宽度较小的设备（如手机）
*需要填数字，表示每个元素所占的列宽

通过div创建块级元素，通过span创建行内元素

引入 Font Awesome
图标库：
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
<i> 图标元素 
添加class属性：fa fa-****-**

container 与 container-fluid
容器的区别：
container 类用于固定宽度并支持响应式布局的容器
   - 所谓固定宽度并不是开发者自定义的宽度，而是 bootstrap
内部通过媒体查询获得屏幕宽度，自动将宽度设为某个固定值
container-fluid 类用于100%宽度，占据全部视口的容器