.col-xs-*——栅格列，适用于手机（<768px）;
.col-sm-*——栅格列，适用于平板（≥768px）;
.col-md-*——栅格列，适用于桌面显示器 (≥992px)；
.col-lg-*——栅格列，适用于大桌面显示器(≥1200px)；
.col-md-offset-*——向右偏移列；
.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">
<title>CSS全局样式_栅格系统</title>
<link rel="stylesheet" href="bootstrap.min.css" type="text/css">
<style type="text/css">
.row{
margin-bottom: 20px;
}
.row .row{
margin-top:10px;
margin-bottom: 0;
}
[class*="col-"]{
padding-top: 15px;
padding-bottom: 15px;
background-color: rgba(86,61,124,0.15);
border: 1px solid rgba(86,61,124,0.2);
}
</style>
</head>
<body>
<div class="container">
<div class="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 class="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 class="row">
<div class="col-md-3 col-md-offset-1">.col-md-3</div>
</div>
<!--列的嵌套-->
<div class="row">
<div class="col-sm-9">
one
<div class="row">
<div class="col-xs-8">
first
</div>
<div class="col-xs-4">
second
</div>
</div>
</div>
</div>
<!--列的排序-->
<div class="row">
<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>
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<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>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<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>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/bboyjoe/article/details/47049235
