BootStrap学习------栅格

    使用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>

posted on 2015-11-24 14:20  花生哒哒  阅读(371)  评论(0)  编辑  收藏  举报

导航