bootstrap-栅格系统

栅格系统：

栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

移动设备优先：

meta用于设置屏幕和设备等一款级时候运行用户缩放,以及缩放比例的问题：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

//分别为: 定义窗口 屏幕宽度和设备一致    初始缩放比例    最大缩放比例   禁止用户缩放

 

一  创建栅格系统的容器

  		<div class="container-fluid">//100%宽度
			<div class="row">
				...
			</div>
		</div>
  		<div class="container">//固定宽度（1170px）,居中显示
			<div class="row">
				...
			</div>
		</div>

　　

二  创建合适的栅格系统

Bootstrap把每一行分成12等份，“col-md-数字”中的“数字”从1-12中取，数字等于几，就占几份；

<div class='row '>
		<div class='col-md-3' style="background: blue;">我是内容</div>
		<div class='col-md-9' style="background: red;">我是内容</div>
</div>

　　

三  单元格的类还有四种选择

　           .col-xs- 无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置；试用于手机；

　　　　.col-sm- 屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；试用于平板；

　　　　.col-md- 屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；试用于桌面显示器；

　　　　.col-lg- 屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；适用于大型桌面显示器；

例：//如果是大屏幕电脑一行显示4个模块(-lg-3),如果是中等屏幕pad一行显示3个模块(-md-4),如果是小屏幕手机一行显示1个模块(xs-12)

        <div class='row'>
		<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12 bg-danger'>我是内容</div>
		<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12 bg-info'>我是内容</div>
		<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12 bg-primary'>我是内容</div>
		<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12 bg-success'>我是内容</div>
		<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12 bg-danger'>我是内容</div>
		<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12 bg-info'>我是内容</div>
		<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12 bg-primary'>我是内容</div>
		<div class='col-lg-3 col-md-4 col-sm-6 col-xs-12 bg-success'>我是内容</div>
	</div>

　　

 

四  常用的技术点

      1     列偏移 : 假设一行两列分别占5,6有让中间保持空隙,向两边靠

          //如果偏移超过了,会自动换行并偏移

<div class="row">
		<div class="col-md-3 col-md-offset-1 bg-danger">1</div>
	     <div class="col-md-3 col-md-offset-1 bg-info">2</div>
</div>

　　

      2   嵌套 : 嵌套遵循把父亲当做12份

	<div class="row" >
		<div class="col-md-7" >
			<div class="col-md-3" >1</div>
			<div class="col-md-3" >2</div>
			<div class="col-md-3" >3</div>
			<div class="col-md-3" >4</div>
		</div>
		<div class="col-md-5" >
			<div class="col-md-4" >5</div>
			<div class="col-md-4" >6</div>
			<div class="col-md-4" >7</div>
		</div>
	</div>

　　

   3     移动 : push向右移动,pull向左移动

<div class="row">
        <div class="col-md-3 col-md-push-9 bg-danger">向右移动</div>
        <div class="col-md-9 col-md-pull-3 bg-info">向左移动</div>
</div>