Bootstrap全局样式 - 栅格系统
2017-06-08 本文已影响98人
蝴蝶结199007
知识点
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
简介
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
栅格系统
bootstrap默认为.col-xs-*、.col-sm-*、.col-md-*、.col-lg-*添加了padding值：
position:relative;
min-height:1px;
padding-right: 15px;
padding-left: 15px;
col-xs-*
媒体查询
bootstrap在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
bootstrap在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
栅格参数
栅格参数
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用这些选择器为当前元素增加了左侧的边距（margin）。
列嵌套
添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。
列排序
使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
.col-md-push-*：left
.col-md-pull-*：right
Less mixin 和变量
TODO：这个需要仔细去实践研究，可参考Less mixin 和变量
实践
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Resource-type" content="Document"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>栅格系统</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
<!--
.row{margin-bottom:5px;}
.row div{text-align:center;border:1px solid #5bc0de;}
-->
</style>
</head>
<body>
<div class="container">
<!--col-xs-*-->
<p>col-xs-*</p>
<div class="row">
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
</div>
<!--在任意设备中都是以一行三列显示-->
<div class="row">
<div class="col-xs-4">col-xs-4</div>
<div class="col-xs-4">col-xs-4</div>
<div class="col-xs-4">col-xs-4</div>
</div>
<div class="row">
<div class="col-xs-4">4</div>
<div class="col-xs-8">8</div>
</div>
<div class="row">
<div class="col-xs-6">6</div>
<div class="col-xs-6">6</div>
</div>
<div class="row">
<div class="col-xs-12">12</div>
</div>
<!--col-md-*-->
<p>col-md-*</p>
<!--在 >=992px的设备中，以一行12列显示，<992px 的设备中，会以一行一列显示-->
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-12">12</div>
</div>
</div>
<br/>
<!--流式布局-->
<div class="container-fluid">
<p>流式布局container-fluid</p>
<div class="row">
<div class="col-xs-4">4</div>
<div class="col-xs-4">4</div>
<div class="col-xs-4">4</div>
</div>
</div>
<br/>
<!--移动设备和桌面屏幕-->
<div class="container">
<p>移动 桌面</p>
<!-- >=992px 显示一行两列，<768px 会折行显示，显示两行各一列 -->
<div class="row">
<div class="col-xs-12 col-md-8">col-xs-12 col-md-8</div>
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
</div>
<!-- >=992px 显示一行三列，<768px 最后一个会折行显示 -->
<div class="row">
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
</div>
<br/>
<!--移动 平板 桌面-->
<p>移动 平板 桌面</p>
<!--平板、桌面均显示的一行两列，移动端会折行-->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">col-xs-12 col-sm-6 col-md-8</div>
<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
</div>
<!--移动端最后一个折行显示，平板、桌面均显示的一行三列-->
<div class="row">
<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
</div>
<!--移动端一行一个，平板、桌面均显示的一行三列-->
<div class="row">
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<!--移动端最后一个折行，平板、桌面均显示的一行三列-->
<div class="row">
<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
</div>
<br/>
<!--响应式列重置-->
<p>响应式列重置</p>
<!--平板桌面均显示一行四列，手机显示两行两列-->
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
<br/>
<!--列偏移-->
<p>列偏移</p>
<!--移动、平板显示两行，桌面显示一行两列，第一个向右偏移4个列的宽度，增加的margin-->
<div class="row">
<div class="col-md-4 col-md-offset-4">col-md-4 col-md-offset-4</div>
<div class="col-md-4">col-md-4</div>
</div>
<!--移动、平板显示两行，桌面都向右偏移3个列的宽度-->
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<!--桌面向右偏移3个列的宽度-->
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
<!--col-sm-offset-0 覆盖偏移量，如果不添加覆盖，在桌面第三个则会折行显示，并偏移3个列宽度-->
<div class="row">
<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0</div>
</div>
<!--列嵌套-->
<p>列嵌套</p>
<!--第二层row包含在第一层中-->
<div class="row">
<div class="col-md-6" style="background:#ddd;">
第一层：col-md-6
<div class="row" style="background:#fff;">
<div class="col-md-4">第二层：col-md-4</div>
<div class="col-md-8">第二层：col-md-8</div>
</div>
</div>
<div class="col-md-6" style="background:#ddd;">
第一层：col-md-6
<div class="row" style="background:#fff;">
<div class="col-md-6">第二层：col-md-6</div>
<div class="col-md-6">第二层：col-md-6</div>
</div>
</div>
</div>
<!--列排序-->
<p>列排序</p>
<!---->
<div class="row">
<div class="col-xs-4">排序前：col-xs-4</div>
<div class="col-xs-8">排序前：col-xs-8</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-push-8" style="z-index:2;">排序后：col-xs-4</div>
<div class="col-xs-8 col-xs-pull-4">排序后：col-xs-8</div>
</div>
</body>
</html>
参考学习：
栅格系统
Bootstrap网格系统
