栅格系统
- 系统会自动把页面分为12列
- 栅格系统会通过一系列的行 (row) 与 列 (column) 来创建页面布局.
- 实现列的平均划分, 需要给列添加 类前缀
- 列大于 12 , 多余的列会另起一行显示
列嵌套
列嵌套就是一个列内再分成若干份小列, 我们可以通过添加一个新的.row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.row>div {
height: 50px;
background-color: blue;
}
div [class="col-md-6"] {
background-color: crimson;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移, 这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距 (margin).
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以改变列的顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
.row div {
background-color: crimson;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">左侧</div>
<div class="col-md-4 col-md-offset-4 col-md-pull-8">右侧</div>
</div>
</div>
</body>
</html>
响应式工具
与之相反的是 visible-xs … 是显示某个页面