<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style type="text/css">
.row{
margin-bottom: 20px;
}
.row .row{
margin-top: 10px;
margin-bottom: 0px;
}
[class*="col-"]{
padding-top: 15px;
padding-bottom: 15px;
background-color: #C4E3F3;
/*.15 值得是透明度*/
background-color: rgba(86,61,124,.15);
border: 1px solid #DDDDDD;
border: 1px solid rgba(86,61,124,.2);
}
</style>
</head>
<body>
<div class="container">
<div id="row">
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
</div>
<div id="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
</div>
<div id="row">
<div class="col-md-3">col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
</div>
</div>
<br />
<div class="container">
<div id="row">
<div class="col-md-4 col-md-offset-4">col-md-4</div>
</div>
</div>
<br />
<!--嵌套-->
<div class="container">
<div class="col-sm-9">
one
<div class="row">
<div class="col-xs-8">
first
</div>
<div class="col-xs-4">
two
</div>
</div>
</div>
</div>
<br />
<!--列的排序-->
<div class="container">
<div class="col-md-9 col-md-push-3">col-md-9</div>
<div class="col-md-3 col-md-pull-9">col-md-3</div>
</div>
</body>
</html>