bootstrap 人员架构模板 bootstrap框架技术

1.什么是Bootstrap？

      1.Bootstrap是2011年Twitter团队为了方便维护PC端和手机端二研发的一个响应式前端框架。
2.用于快速开发Web应用程序和网站的前端框架
3.Bootstrap是基于HTML、CSS、JS的，简介灵活，使Web开发更加快捷
4.总结：Bootstrap是一个建立在一个页面，可以在三个中断(PC、平板、手机)上完美战士的响应式前端框架  

2.Bootstrap的环境配置：

19:021.到Bootstrap官网下载Bootstrap库。官网：http://www.bootcss.com
2.页面中引入库：
①bootstrap.min.css：在Bootstrap中有很多CSS样式。所以要有CSS文件
②bootstrap.min.js：严格意义上来说，Bootstrap是基于jQuery的一个库，jQuery又是javaScript的一个库。所以又要引入一个bootstrap.min.js库

3. 栅格系统（例子更清晰）

//概念
栅格系统，可以理解为就是网格，格子
每行最多12个格子，如果想要再多可以使用栅格嵌套实现
3.2.2.案例：演示Bootstrap网格系统
<h1>栅格系统</h1>
<div class="row">
	<div class="col-lg-1 b">1</div>
	<div class="col-lg-1 b">2</div>
	<div class="col-lg-1 b">3</div>
	<div class="col-lg-1 b">4</div>
	<div class="col-lg-1 b">5</div>
	<div class="col-lg-1 b">6</div>
	<div class="col-lg-1 b">7</div>
	<div class="col-lg-1 b">8</div>
	<div class="col-lg-1 b">9</div>
	<div class="col-lg-1 b">10</div>
	<div class="col-lg-1 b">11</div>
	<div class="col-lg-1 b">12</div>	
</div>
现在是一行12个格子，注意：格子的排列会受到页面的分辨率影响排位一列
如果再多一个格子就会自动换行
如果我们把第一个格子的col-lg-1写成：<div class="col-lg-3 b">1</div>
就表示第一个格子占12个格子中的三格格子
col:表示列，lg:大屏幕，3:表示占的格子数量
我们在看一个例子：
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 b">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 b">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 b">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 b">4</div>
</div>
默认一行四列，根据页面的缩小会变为一行3，剩下的自动到第二行。页面再缩小就会变为一行2个格子。继续缩小就会变为一行一个格子
如果我们想一行最少两个格子，只需要在加上：col-xs-6
<div class="row">
	<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 b">1</div>
	<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 b">2</div>
	<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 b">3</div>
	<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 b">4</div>
</div>
xs表示最小
3.2.3.案例：演示列偏移offset。
示例代码：
<div class="row">
	<div class="col-lg-4 col-lg-offset-4 b">1</div>
</div>
现在一行有一个盒子，这个盒子占了4个格子。如果我们想让这个盒子居中，占在第5个格子开始。就是以上代码
col-lg-offset-4
表示偏移格子，4表示偏移四个格子
<div class="row">
	div class="col-lg-4 col-lg-offset-5 b">1</div>
	<div class="col-lg-4 col b">2</div>
</div>
如果像这种有两个盒子，第一个盒子偏移就会把第二个盒子往后面挤
3.2.4.案例：演示栅格系统嵌套(某列中嵌套栅格)
以上面的代码为例，现在需要再第二个盒子内再添加三个盒子，每个盒子占4个该怎么写？这种情况我们就需要用到嵌套，在盒子内嵌套格子
<div class="row">
	<div class="col-lg-4 col-lg-offset-4 b">1</div>
	<div class="col-lg-4 col b">
		<div class="row">
		<div class="col-lg-4 b">1</div>
		<div class="col-lg-4 b">2</div>
		<div class="col-lg-4 b">3</div>
		</div>
	</div>
</div>
第二个盒子里面嵌套了三个盒子，每个盒子占了四个格子
3.2.5.交换位置：右移动：push  左移动：pull
列交换位置：
<div class="row">
	<div class="col-lg-4 col-lg-push-8 b">1</div>
	<div class="col-lg-4 b">2</div>
	<div class="col-lg-4 col-lg-pull-8 b">3</div>
</div>
把第一个盒子和第三个盒子交换位置，首先每个盒子占了四个格子，第一个盒子要往右移动8个格子，第三个盒子要往左移动8个格子
注意：交换位置的移动不会把其它的格子挤走，会重叠。

 4.一张图带你了解Bootsrap中的一些基础css