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