Bootstrap框架基础

1)后台开发人员,写css搞一个好看的页面,十分困难;
	html、css、js开发页面非常困难;

2)bootstrap: 一个前端开发框架
	(1)框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码
		web知识 + javase--》丰富的网站 BS架构的程序:	
			但是编码麻烦,因此有些人把基础知识封装了一下,使用非常简单,提供一些jar包;
			我们借助jar包快速开发;
	(2)好处:
		1.定义好了很多的css样式和js插件,我们开发人员直接可以使用这些样式和插件得到丰富的效果;
		2.响应式布局-->兼容移动设备:
			同一套页面,可以兼容不同分辨率的设备;

			笔记: 淘宝如何做呢? 写了2套页面,维护变得困难;
				  apple怎么做呢? 就是响应式布局,会变成汉堡按钮; 

3)作为后台开发工程师,这些很少;

4)使用bootstrap
  (1)去官网下载bootstrap;
  (2)解压后,在项目中将css fonts js复制到项目中;
  		带min不带min区别:
  			带min的是压缩版本,回车、制表符等去掉了;

  (3)创建html页面,引入资源文件:
  	    前三行:
  	  		1:编码
  	  		2:IE的支持
  	  		3:视口, 宽度:设备的宽度 缩放比例: 1:1

  	  	笔记:
  	  		jquery: 简化js的开发,增强js的功能;
  	  		bootstrap依赖于jquery;

5)3部分内容
	(1)响应式布局
		步骤: 
			1.定义容器,相当于之前的table
				容器分类:
					1.container: 有点留白
					2.container-fluid  100%的宽度,每一种设备

			2.定义行,相当于tr.
				样式:row

			3.定义元素. 指定该元素在不同的设备上所占的格子数目.
				样式: col-设备代号-格子数目(1~12)

				4种设备代号:
					1. xs:相当于手机 < 768px   col-xs-12
					2. sm:相当于pad  >= 768
					3. md: 笔记本    >=992
					4. lg: 台式机    >=1200


		笔记: 
			自己写如何实现?
				获取屏幕宽度,根据不同宽度,调整缩放,这样很麻烦;

			bootstrap依赖于栅格系统:
				将一行平均分成12个格子,可以指定元素占几个格子;

			<div>在pc上显示占4个格子;
				  在手机上占据12个格子;

			超出了12,那么会自动换行;

			栅格类属性,向上兼容

			如果真实设备的宽度 < 栅格类属性的设备的代号的最小值,那么一个元素占满一整行

	(2)css样式

	(3)js插件

	
6)栅格系统注意事项:

7)css样式和js插件
	(1)全局css样式
		按钮
		图片
		表格
		表单

	(2)组件
		导航条
		分页条

	(3)插件
		轮播图

8)我们不需要去看懂,会改就行了; 

9)哪里看不懂删除哪里