<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<title>全局css样式栅格系统</title>
<style type="text/css">
.row{
margin-bottom: 20px;
}
.row .row{
margin-top: 10px;
margin-bottom: 0;
}/*后面.row里面会嵌套.row,这里先写了不影响效果*/ [class*="col-"]{
padding-top: 15px;
padding-bottom: 15px;
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
background-color: rgba(86,61,124,0.5);
border: 1px solid rgba(86,61,124,0.2);
}/*通配符*=可以增加所有col-样式*/
</style>
</head>
<body>
<div class="container"><!--容器-->
<div class="row"><!--•“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。-->
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-2</div>
<div class="col-md-1">col-md-3</div>
<div class="col-md-1">col-md-4</div>
<div class="col-md-1">col-md-5</div>
<div class="col-md-1">col-md-6</div>
<div class="col-md-1">col-md-7</div>
<div class="col-md-1">col-md-8</div>
<div class="col-md-1">col-md-9</div>
<div class="col-md-1">col-md-10</div>
<div class="col-md-1">col-md-11</div>
<div class="col-md-1">col-md-12</div>
<div class="col-md-1">col-md-12</div>
<div class="row">
<div class="col-md-1">col-md-12</div>
</div>
<!--xs:超小屏幕 手机 (<768px),sm:小屏幕 平板 (≥768px),md:中等屏幕 桌面显示器 (≥992px),lg:大屏幕 大桌面显示器 (≥1200px) -->
<!--•通过“行（row）”在水平方向创建一组“列（column）”。•你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。-->
</div>
</div>
</body>
</html>
