4-1 实现原理
本节编程练习不计算学习进度，请电脑登录imooc.com操作

实现原理

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

在使用的时候大家可以根据实际情况重新编译LESS（或Sass）源码来修改12这个数值（也就是换成24或32，当然你也可以分成更多，但不建议这样使用）。

（这一章节注意效果要在全屏状态下查看，鼠标滑过结果窗口时可单击出现的全屏按钮）

 

任务

我来试试：查看右侧代码编辑器的代码。

index.htmlstyle.css 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>实现原理</title>
  6. <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7. <link rel="stylesheet" href="style.css">
  8. </head>
  9.  
  10. <body>
  11. <div class="container">
  12.   <div class="row">
  13.     <div class="col-md-1">.col-md-1</div>
  14.     <div class="col-md-1">.col-md-1</div>
  15.     <div class="col-md-1">.col-md-1</div>
  16.     <div class="col-md-1">.col-md-1</div>
  17.     <div class="col-md-1">.col-md-1</div>
  18.     <div class="col-md-1">.col-md-1</div>
  19.     <div class="col-md-1">.col-md-1</div>
  20.     <div class="col-md-1">.col-md-1</div>
  21.     <div class="col-md-1">.col-md-1</div>
  22.     <div class="col-md-1">.col-md-1</div>
  23.     <div class="col-md-1">.col-md-1</div>
  24.     <div class="col-md-1">.col-md-1</div>
  25.   </div>
  26.   <div class="row">
  27.     <div class="col-md-1">.col-md-1</div>
  28.     <div class="col-md-1">.col-md-1</div>
  29.     <div class="col-md-1">.col-md-1</div>
  30.     <div class="col-md-1">.col-md-1</div>
  31.     <div class="col-md-1">.col-md-1</div>
  32.     <div class="col-md-1">.col-md-1</div>
  33.     <div class="col-md-1">.col-md-1</div>
  34.     <div class="col-md-1">.col-md-1</div>
  35.     <div class="col-md-1">.col-md-1</div>
  36.     <div class="col-md-1">.col-md-1</div>
  37.     <div class="col-md-1">.col-md-1</div>
  38.     <div class="col-md-1">.col-md-1</div>
  39.   </div>
  40.     <div class="row">
  41.     <div class="col-md-1">.col-md-1</div>
  42.     <div class="col-md-1">.col-md-1</div>
  43.     <div class="col-md-1">.col-md-1</div>
  44.     <div class="col-md-1">.col-md-1</div>
  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>
  54. </div>
  55. </body>
  56. </html>
  1. [class *= col-]{
  2.   background-color: #eee;
  3.   border: 1px solid #ccc;
  4. }
下一节