bootstrap栅格布局

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <!-- //简介:boststrap内置了一套响应式，移动设备优先的流式栅格系统，随着屏幕设备或视口尺寸的增加，系统会自动分为最多12列，它包含了易于使用的预定义class，还有强大的mixin用于生成更具语义的布局 -->
  5     <meta charset="UTF-8">
  6     <title>Document</title>
  7     <link href="resource/bootstrap/css/bootstrap.css" rel="stylesheet">
  8     <!-- /*栅格选项：bootstrap3.x使用了四种栅格选项来形成栅格系统，其实区别只有一条就是适合不同尺寸的屏幕设备。
  9     class=  col-xs、col-sm、col-md、col-lg
 10                     ***     small   mid     large  */ 
 11         /*列偏移：使用.col-md-offset-* 可以将列偏移到右侧，这些class通过使用*选折起将所有列增加了列的左侧margin。
 12         例如：.col-md-offset-4将.col-md-4向右移动了4个列的宽度。
 13         */            
 14         /*嵌套列：为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列内即可实现。注意：嵌套row所包含的列加起来应该等于12.
 15         */
 16         /*列排序：通过使用.col-md-push-*和.col-md-pull-*就可以很容易地改变列的顺序。
 17         */ -->
 18      <!--  margin叫边界手册上叫外补丁，padding是填充内补丁，在他们之间有一个边界border。padding包围的就是content， -->
 19       <style type="text/css">
 20         .show-grid [class ^="col-"] {
 21             padding-top: 10px;
 22             padding-bottom: 10px;
 23             background-color: #eee;
 24             border: 1px solid #ddd;
 25             background-color: rgba(86, 61, 124, .15);
 26             border: 1px solid rgba(86, 61, 124, .2);
 27         }
 28         </style>
 29         <script type="text/javascript">
 30         $(function(){
 31         });
 32         </script>
 33 </head>
 34 <body>
 35     
 36  <b>col-lg-*用法</b>  
 37         <br/> 
 38         <div class="row show-grid">
 39           <div class="col-lg-8">.col-lg-8</div>
 40           <div class="col-lg-4">.col-lg-4</div>
 41         </div>
 42         <br/>         
 43         <b>col-md-*用法</b>
 44         <div class="row show-grid">
 45           <div class="col-md-1">.col-md-1</div>
 46           <div class="col-md-1">.col-md-1</div>
 47           <div class="col-md-1">.col-md-1</div>
 48           <div class="col-md-1">.col-md-1</div>
 49           <div class="col-md-1">.col-md-1</div>
 50           <div class="col-md-1">.col-md-1</div>
 51           <div class="col-md-1">.col-md-1</div>
 52           <div class="col-md-1">.col-md-1</div>
 53           <div class="col-md-1">.col-md-1</div>
 54           <div class="col-md-1">.col-md-1</div>
 55           <div class="col-md-1">.col-md-1</div>
 56           <div class="col-md-1">.col-md-1</div>
 57         </div>
 58         <br/> 
 59         <div class="row show-grid">
 60           <div class="col-md-8">.col-md-8</div>
 61           <div class="col-md-4">.col-md-4</div>
 62         </div>
 63         <br/> 
 64         <b>col-sm-*用法</b>
 65         <div class="row show-grid">
 66           <div class="col-sm-8">.col-sm-8</div>
 67           <div class="col-sm-4">.col-sm-4</div>
 68         </div>
 69         <br/>             
 70         <b>col-xs-*用法</b>
 71         <div class="row show-grid">
 72           <div class="col-xs-8">.col-xs-8</div>
 73           <div class="col-xs-4">.col-xs-4</div>
 74         </div>    
 75         <br/>     
 76         <b>列偏移: col-md-offset-*</b>
 77         <div class="row show-grid">
 78           <div class="col-md-4">.col-md-4</div>
 79           <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
 80         </div>
 81         <div class="row show-grid">
 82           <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
 83           <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
 84         </div>
 85         <div class="row show-grid">
 86           <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
 87         </div>
 88         <br/>     
 89         <b>嵌套列: 嵌套row所包含的列加起来应该等于12</b>
 90         <div class="row show-grid">
 91             <div class="col-md-9">
 92                 Level 1: .col-md-9
 93                 <div class="row show-grid">
 94                     <div class="col-md-6">Level 2: .col-md-6</div>
 95                     <div class="col-md-6">Level 2: .col-md-6</div>
 96                 </div>
 97             </div>
 98         </div>
 99         <br/>     
100         <b>列排序: .col-md-push-*和.col-md-pull-*</b>    
101         <div class="row show-grid">
102           <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
103           <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
104         </div>        
105     </body>
106 </html>
posted @ 2015-09-26 13:24 ZZZZW 阅读(379) 评论(0) 编辑收藏举报
刷新页面返回顶部
bootstrap栅格布局

公告
