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%宽度，占据全部视口的容器