Bootstrap（二）

了解完bootstrap的基本框架后，开始学习bootstrap的脚手架

脚手架 英文原名Scaffolding

全局样式
所谓全局样式就是通过Bootstrap框架为页面设计的全局CSS样式表，该全局样式表包括基本的html元素样式，以及栅格系统，可以增强页面及其元素的CSS效果
需要在html中添加lang=“zh-CN”属性

bootstrap定义的内容具体都是存放在源码包scaffolding.less中

栅格系统
栅格系统是bootstrap的一个特色，可以让页面布局变得更加简单，合理，美观，容易维护

框架默认的栅格系统最多为12列，形成一个940px宽的容器，默认没有启动响应式布局特性。如果设计时加入响应式布局的css文件，栅格系统则会根据可视窗口的宽度从724px到1170px进行自适应的动态调整。假如在可视化窗口低于767px宽的情况下，列将不再固定并且会在垂直方向进行自动的堆叠

这个栅格我从图片上看就好像把一个整体分了几个小块一样，但这些小块中间都是有空隙的，也就是说加在一起没整体大，这可能只是图片这样画的而已，具体的，容我再往后学习学习

基本的栅格的html代码形式如下：

创建一个类名为.row,并在容器中加入适当数量的.spanXX（最多 12个）

<div class="bs-docs-grid">
			<div class="row show-grid">
				<div class="span1">1</div>
			</div>
			<div class="row show-grid">
				<div class="span2">2</div>
			</div>
			<div class="row show-grid">
				<div class="span4">4</div>
			</div>
			<div class="row show-grid">
				<div class="span8">8</div>
			</div>
			<div class="row show-grid">
				<div class="span12">12</div>
			</div>
		</div>
		

这是一个基本设计代码，我把代码敲完运行，发现还是空白的，然后我添加了一些css样式方便观察

		  .row{
			margin-right: -15px;
			margin-left: -15px;
			background-color: #005CBF;
		 }
		.span1,.span12{
			background-color: red;
			height: 3.125rem;
			width: 100px;
			
		}
		.span2,.span8 {
			background-color: yellow;
			height: 50px;
			width: 60px;
		}
		.span4{
			background-color: black;
			width:30px;
			height: 66px;
		}

得到的效果图如下：

这种栅格系统可能很适合做名片之类的信息展示吧

偏移列
Bootstrap栅格系统支持偏移列，这个偏移列我之前也没接触过，书上说是可以使用.offsetXX类将列向右移动，相当于将列的左边距增加了指定的单位

嵌套列
他的整体形式就是.row里面数个span，所谓嵌套就是span里面套一个.row，而row里面自然也是个数个span的，好理解

流式栅格系统
该系统的特点是对每一列的宽度使用百分比而不是像素数量，区别于固定栅格系统，他能对不同的分辨率做出适当的调整。

前面学习的基本固定栅格系统是使用的.row作为容器，流式的则改为使用.row-fluid,fluid就是流体意思
其他的格式和前面基础的是一模一样的

流式偏移，流式也支持偏移，方法和前面一样，使用类.offsetxx
还有嵌套，都一样

页面布局
布局分为固定布局和流式布局两种

固定布局
bootstrap提供了一个通用的固定宽度
class=“mini-layout”

对应的流式布局
class=“mini-layout fluid”

响应式设计
bootstrap的初衷就是满足响应式设计原理

启动响应式特性
这里因为书是17年的，老了，现在好像已经没有bootstrap-responsive.css文件了，都集成在一个bootstrap.css中了

所以现在的具体用法是：

   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link href="css/bootstrap.css"  rel="stylesheet">

响应式的特点
媒体查询允许在一些条件基础上自定义css，但是通常围绕着 min-width和max-width进行

应用响应式的bootstrap有以下特点：
修改栅格系统中列的宽度
需要的时候用堆叠元素代替浮动
调整标题和文本的大小以便适合各种设备

支持的设备：
大屏幕-------大于等于1200px------70px（列宽）---------30px（间隙宽度）
默认----------大于等于980px-------60px-----------------------20px
平板-----------大于等于768px------42px----------------------20px
手机到平板----小于等于767px-----流式列，无固定宽度
手机-------------小于等于480px------流式列，无固定宽度

媒体查询的方法：
@media(min-width:1200px){ … } 这个是大屏幕
就是@+media+（大小要求）{…}

响应式布局辅助类
作用是针对不同的设备显示和隐藏内容

.visble-phone visble 是显示的意思就是只显示手机，hidden 隐藏，只隐藏
.visble-table
.visible-desktop
.hidden-phone
.hidden-table
.hidden-desktop