image.png
image.png
栅格参数：
image.png
一行最多只能乘载12个
一个简单的例子：
以中等屏幕 桌面显示器 (≥992px)作为一个参考的例子：
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>栅格系统</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<style>
.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,.15);
border: 1px solid #ddd;
background-color: rgba(86,61,124,.2);
}
</style>
</head>
<body>
<div class="container">
<!--一行最多只能乘载12个-->
<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>
<!--那么如果一行是4个、5个呢?-->
<div class="row">
<!--3X4=12,一个就占了3个的宽度-->
<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>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-1.8.3.js"></script>
</body>
</html>
预览效果：
image.png
如果一列内容过多出现的效果和偏移的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>栅格系统</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<style>
.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,.15);
border: 1px solid #ddd;
background-color: rgba(86,61,124,.2);
}
</style>
</head>
<body>
<div class="container">
<!--一行最多只能乘载12个-->
<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>
<!--那么如果一行是4个、5个呢?-->
<div class="row">
<!--3X4=12,一个就占了3个的宽度-->
<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">
<!--3X4=12,一个就占了3个的宽度-->
<div class="col-md-3">
col-md-3
col-md-3
col-md-3
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-4 col-md-offset-3">col-md-4</div>
</div>
</div>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-1.8.3.js"></script>
</body>
</html>
预览效果：
image.png
嵌套的效果：
<div class="container">
<div class="row">
<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>
</div>
预览的效果：
image.png
