<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1,user-scaleable=no">
<title>栅格系统 </title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<style>
div[class*="col-"]{
border:1px solid blue;
}
</style>
</head>
<body style="background:gray;">
<div class="container" style="background:#ffffff;">
<h3>栅格系统</h3>
<!-- 栅格系统 col-xs超小屏幕，col-sm平板，col-md 中式台式电脑，col-lg大型台式电脑 -->
<div class="row">
<div class="col-sm-1">col-1</div>
<div class="col-sm-1">col-2</div>
<div class="col-sm-1">col-3</div>
<div class="col-sm-1">col-4</div>
<div class="col-sm-1">col-5</div>
<div class="col-sm-1">col-6</div>
<div class="col-sm-1">col-7</div>
<div class="col-sm-1">col-8</div>
<div class="col-sm-1">col-9</div>
<div class="col-sm-1">col-10</div>
<div class="col-sm-1">col-11</div>
<div class="col-sm-1">col-12</div>
<div class="col-sm-1">col-13</div>
<div class="col-sm-1">col-14</div>
</div>
<!--需求：在一行里面，第一块占两列，第二块占三列，第三块占七列-->
<div class="row">
<div class="col-md-2">222</div>
<div class="col-md-3">333</div>
<div class="col-md-7">777</div>
</div>
<!--响应式，设置参数。pc级大屏幕显示四张图片 pc机中等屏幕显示三张图片，平板显示两张图片，手机端显示一张图片 -->
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
<img src="ff.jpg" class="img-responsive">
<p>栅格系统用一系列行和列的组合来创建页面布局，你的内容就可以放在这些创建好的布局中</p>
</div>
<!--偏移,只能向右偏移 col-xs/sm/md/lg-offset-数值 -->
<p>col-md-offset-2 pc中等屏幕向右偏移2个列</p>
<div class="row">
<div class="col-md-4">占四列，4444</div>
<div class="col-md-2 col-md-offset-3">占两列，偏移两个列2222</div>
</div>
<div class="row">
<div class="col-sm-1">col-1</div>
<div class="col-sm-1">col-2</div>
<div class="col-sm-1">col-3</div>
<div class="col-sm-1">col-4</div>
<div class="col-sm-1">col-5</div>
<div class="col-sm-1">col-6</div>
<div class="col-sm-1">col-7</div>
<div class="col-sm-1">col-8</div>
<div class="col-sm-1">col-9</div>
<div class="col-sm-1">col-10</div>
<div class="col-sm-1">col-11</div>
<div class="col-sm-1">col-12</div>
<div class="col-sm-1">col-13</div>
<div class="col-sm-1">col-14</div>
</div>
<!-- col-xs/sm/md/lg-pull向左偏移，col-xs/md/sm/ld-push向右偏移-->
<div class="row">
<div class="col-md-4 col-md-push-8">向右偏移</div>
<div class="col-md-8 col-md-pull-4">向左偏移</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="flower.jpg" alt="说明" class="img-responsive img-thumbnail">
<h3 class="page-header">从堆叠到水平</h3>
<p>栅格类，分块利用</p>
</div>
<div class="col-md-4">
<img src="flower.jpg" alt="说明" class="img-responsive img-thumbnail">
<h3 class="page-header">从堆叠到水平</h3>
<p>栅格类，分块利用</p>
</div>
<div class="col-md-4">
<img src="flower.jpg" alt="说明" class="img-responsive img-thumbnail">
<h3 class="page-header">从堆叠到水平</h3>
<p>栅格类，分块利用</p>
</div>
</div>
</div>
</body>
</html>
