使用Bootstrap前端框架-栅格 要点
1.使用Bootstrap需要引入的css和js:
(1)bootstrap.min.js
(2)bootstrap.min.css
2.栅格系统需要通过<div class="container"> 进行承载
3.div相比于table更适合目前的开发，友好度较高
4.栅格参数
| <768px(手机) | >=768px(Pad) | >=992px（小型显示器） | >=1200px(宽屏显示器) |
| .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Auto | ~62px | ~81px | ~97px |
5.一个屏幕最多承载12个栅格
6.实例
<!DOCTYPE html> <html> <head> <title> </title> <script src="~/Scripts/jquery-2.1.4.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <style> [class*="col-md"] { padding-top:15px; padding-bottom:15px; background-color:#eee; background-color: rgba(86,61,124,.15); border:1px solid #ddd; border:1px solid rgba(86,61,124,.2); } </style> </head> <body> <div class="container"> <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> <div class="row"> <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"> <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> </body> </html>
效果：
实现栅栏偏移
<div class="row"> <div class="col-md-3 col-md-offset-3">col-md-3</div> </div>
嵌套栅格
<div class="row">
<div class="col-md-9">
one
<div class="row">
<div class="col-md-8">
first
</div>
<div class="col-md-4">
two
</div>
</div>
</div>
</div>
排序
<div class="row"> <div class="col-md-9"> col-md-9 </div> <div class="col-md-3"> col-md-3 </div> </div> <div class="row"> <div class="col-md-9 col-md-push-3"> col-md-9 </div> <div class="col-md-3 col-md-pull-9"> col-md-3 </div> </div>
