Bootstrap

## Bootstrap

1. Bootstrap概念：

   一个前端开发的框架，来自Twitter，是目前很受受欢迎的前端框架。Bootstrap是基于HTML，CSS，JavaScript的，她简洁灵活，使得web开发更加快捷。

   框架概念：

   一个半成品软件，开发人员可以在框架的基础上，进行开发，简化代码。

   Bootstrap好处：

    1）定义了很多的CSS样式和JS插件。开发人员可以直接使用这些样式和插件得到丰富的页面效果。
    2）响应式布局。
    	*同一套页面可以兼容不同分辨率的设备
   

2. 快速入门

   1）下载Bootstrap
   2）在项目中将Bootstrap的三个文件夹复制
   3）创建HTML页面，引入必要的资源文件
   

## 响应式布局

1. 概念

   同一套页面可以兼容不同分辨率的设备。

2. 实现

   依赖于栅格系统：将一行分成12个格子，可以指定元素占几个格子。
   

3. 步骤

   1）定义容器。相当于之前的table

   *容器分类
   	1] container：两边留白
   	2] container-fluid：100%宽度
   

   2）定义行。相当于之前的tr。 样式：row
   3）定义元素。指定该元素在不同的设备上，所占格子的数目。

   样式：col-设备代号-格子数目
   *设备代号：
   	1] xs:超小屏幕  手机（<768px）:col-xs-12
   	2] sm:小屏幕  平板（≥768px）
   	3] md:中等屏幕  桌面显示屏（≥992px）
   	4] lg:大屏幕  大桌面显示屏（≥1200px）
   

4. 注意

   1）一行中如果格子数目超过12，则超过部分自动换行。
   2）栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备
   3）如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行
   

CSS样式和JS插件

1. 全局CSS样式：
   *按钮：
   *图片：

   *class=”img-responsive”:图片在任意尺寸都占100%
   *图片形状
   	*方形
   	*圆形
   	*相框
   *表格
   	*table
   	*table-bordered
   	*table-hover
   *表单
   	*给表单项添加：class=”form-control”
   

2. 组件:
   *导航栏
   *分页条

3. 插件:
   *轮播图