摘自《极客学院》
1、效果图:
2、html代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap.min.css">
<title>栅格系统</title>
<style>
.row{
margin-bottom: 20px;
}
.row .row{
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"]{
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86, 61, 124, .20);
border: 1px solid #ddd;
border: rgba(86, 61, 124, .2);
}
</style>
</head>
<body>
<div class="container">
<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-3">1</div>
<div class="col-xs-3">1</div>
<div class="col-xs-3">1</div>
</div>
<div class="row">
<div class="col-xs-3">col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3col-xs-3</div>
<div class="col-xs-3">col-xs-3</div>
<div class="col-xs-3">col-xs-3</div>
</div>
<div class="row">
<div class="col-xs-3 col-xs-offset-2">向右偏移两格</div>
</div>
<div class="row">
<div class="col-xs-8">
嵌套
<div class="row">
<div class="col-xs-6">
嵌套1
</div>
<div class="col-xs-5">
嵌套2
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-7 col-xs-push-5">往后移动5格</div>
<div class="col-xs-3 col-xs-pull-5">往前移动5格</div>
<div class="col-xs-2 col-xs-pull-10">往前移动10格</div>
</div>
</div>
</body>
</html>