前些天学习了bootstrap,把其中的栅格系统整理出来,如有错误,欢迎指正。 概要,栅格系统针对pc,pad,移动端开发出响应式web页面,根据不同屏幕分辨率有针对不同的解决方法。 (0.1,屏幕设备尺寸大于1200px 选择col-lg (0.2. 屏幕设备尺寸在970px到1200px 选择col-md (0.3. 屏幕设备尺寸在768px到970px 选择col-sm (0.4. 屏幕设备尺寸小于768px 选择col-xs
1.栅格系统把页面分为12栏(最多12栏),如下
:
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1,maxinum-scale,user-scalable=no">
栅格系统
.a{
height: 50px;
border: 1px red solid;
background: pink;
}
<div class="col-md-9 a">9
<div class="row">
<div class="col-md-3 a">3
<div class="col-md-9 a">9
<script src="library/jq.js">
<script src="library/bootstrap.min.js">