做作业的时候遇见用css模拟Bootstrap的栅格布局，学习了一下。发现这个很有用，用来在不同的平台上得到很好地用户体验，比如Phone、Pad、大屏幕显示器、小屏幕显示器。自己模拟用css写了一下，用的是max-width、min-width子元素的宽度设置为不同的百分比，模拟栅格的12列。把100划分12份，用浮动宽度超出会自动换行，下面是段代码，以后会认真学习bootstrap。
<style type="text/css">
#container1{min-width:768px;height:300px;background:#ffcc00;margin-bottom:100px;}
body div{margin:5px 1px 5px 1px;}
#container1 .col-md-4{width:32%;height:50px;background:pink;float:left;}
#container1 .col-md-3{width:24%;height:50px;background:greenyellow;float:left;}
#container1 .col-md-6{width:48%;height:50px;background:green;float:left;}
#container1 .col-md-1{width:8%;height:50px;background:bisque;float:left;}
#container1 .col-md-2{width:16%;height:50px;background:black;float:left;}
#container2{max-width:768px;height:300px;background:pink;}
#container2 .col-md-2{width:16%;height:50px;background:green;float:left;}
#container2 .col-md-6{width:48%;height:50px;background: green;float:left;}
#container2 .col-md-8{width:64%;height:50px;background: red;float:left;}
#container2 .col-md-12{width:96%;height:50px;background: yellow;float:left;}
#container2 .col-md-3{width:24%;height:50px;background: blue;float:left;}
</style>
</head>
<body>
<div id="container1">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-6"></div>
<div class="col-md-3"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-6"></div>
<div class="clear" style="clear:both"></div>
</div>
<div id="container2">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-12"></div>
<div class="col-md-3"></div>
<div class="col-md-6"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-8"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="clear" style="clear:both"></div>
</div>