BootStrap

Bootstrap :

1. 概念:一个前端开发的框架，Bootstrap, 洎Twitter, 是目前很受欢迎的前端框架。Bootstrap 是基于HTML、 CSS、 Javascript 的，它简洁灵活,使
   得Web开发更加快捷。

   * 框架:一个半成品软件,开发人员可以在框架基础上,在进行开发，简化编码。
   * 好处
   1.定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
   2.响应式布局。
   *同一套页面可以兼容不同分辨率的设备。

2. 快速入门

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

响应式布局

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

• 实现:依赖于栅格系统:将一行平均分成12个格子，可以指定元素占几个格子

• 步骤:

  1.定义容器。相当于之前的table.
  *容器分类:
  1. container : 两边留白
  2. container-fluid : 100%宽度
  2.定义行。相当于之前的tr  样式: row
  3.定义元素。指定该元素在不同的设备上，所占的格子数目。样式: col-设备代号-格子数目
  *设备代号:
  1. xs :超小屏幕手机(<768px) :  col-xs-12 .
  2. sm:小屏幕平板(2768px)
  3. md:中等屏幕桌面显示器(2992px)
  4.1g:大屏幕大桌面显示器(21200px)
  * 注意
  * 1.一行中如果格子数目超过12，则超出部分自动换行。
  * 2.栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
  * 3.如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会-个元素沾满一整行。

CSS 样式和JS插件

• 全局CSS样式:

  1. 按钮: class="btn btn- default"
  2. 图片:
  1. 图片在任意尺寸都占100% :
  * <img src="..." alt="..." class="img - responsive">
  2. 图片形状
  * 方形：<img src="..." alt="..." class="img- rounded">
  * 圆形：<img src=".." alt="..." class="img-circle">
  * 相框：<img src="..." alt="..." class=" img- thumbnail">
  可以给div设置	class=" thumbnail"	使整个div都有相框效果
  3. 表格
  * 默认效果：table
  * 边框：table- bordered
  * 悬浮效果：table - hover
  4. 表单
  *给表单项添加: class="form- control"

2.组件:

* 导航条
BootStrap组件中
* 分页条
BootStrap组件中

3.插件:

* 轮播图
BootStrap -->JavaScript插件-->Carousel