群组首页 → Web前端 → dojo → 论坛
发表回复

一个简单的响应式横向网格布局框架Responsive Grid System

agevs 2014-10-14

网页设计中有一个怎么也绕不开的问题，那就是布局问题。一般来说，一个div可能会分割成很多部分，同样是横向分割成两部分，但是在不同的项目中，我们可能会用不同的css代码，网格系统其实就是为这一类似的问题提供一个统一的解决办法。

网格布局有很多，但是有很多非常复杂，往往无法二次开发。Responsive Grid System是国外的一个网站，他们提供了一种非常简单的实现。其实每一个前端开发人员都可以写出这样的框架，但是，从头开始也许会让很多人动力不足。这个框架代码很简单，对我而言，采用它的原因仅仅是我能修改它，沿用它的结构和命名规则，很多时候，让我们无从开头一个系统的css代码的原因恰恰是因为不知道如何命名。

可以500%提高开发效率的前端UI框架！

我对这个框架的态度是：它给我们开了个好头，我可以按照我的想法继续下去。还有就是兼容性，国外那些特立独行的设计师们很少会考虑不支持html5的浏览器，他们或许做出来很多酷的效果，但别高兴早了，都是些在ie上没法用的。这个css框架可以兼容ie6.

 

来看看这个框架的例子程序，以3列和4列为例：

html代码：

.代码  收藏代码
  1. <div class="section group">  
  2.     <div class="col span_1_of_3">  
  3.     This is column 1  
  4.     </div>  
  5.     <div class="col span_1_of_3">  
  6.     This is column 2  
  7.     </div>  
  8.     <div class="col span_1_of_3">  
  9.     This is column 3  
  10.     </div>  
  11. </div>  
  12. <div class="section group">  
  13.     <div class="col span_1_of_4">  
  14.     This is column 1  
  15.     </div>  
  16.     <div class="col span_1_of_4">  
  17.     This is column 2  
  18.     </div>  
  19.     <div class="col span_1_of_4">  
  20.     This is column 3  
  21.     </div>  
  22.     <div class="col span_1_of_4">  
  23.     This is column 4  
  24.     </div>  
  25. </div>  

 

 

 

css代码： 可以500%提高开发效率的前端UI框架！

.代码  收藏代码
  1. /*  SECTIONS  */  
  2. .section {  
  3.     clear: both;  
  4.     padding: 0px;  
  5.     margin: 0px;  
  6. }  
  7.            
  8. /*  COLUMN SETUP  */  
  9. .col {  
  10.     display: block;  
  11.     float:left;  
  12.     margin: 1% 0 1% 1.6%;  
  13. }  
  14. .col:first-child { margin-left: 0; }  
  15.            
  16. /*  GRID OF THREE  */  
  17. .span_3_of_3 {  
  18.     width: 100%;  
  19. }  
  20. .span_2_of_3 {  
  21.     width: 66.1%;  
  22. }  
  23. .span_1_of_3 {  
  24.     width: 32.2%;  
  25. }  
  26.            
  27. /*  GRID OF FOUR  */  
  28. .span_4_of_4 {  
  29.     width: 100%;  
  30. }  
  31. .span_3_of_4 {  
  32.     width: 74.6%;  
  33. }  
  34. .span_2_of_4 {  
  35.     width: 49.2%;  
  36. }  
  37. .span_1_of_4 {  
  38.     width: 23.8%;  
  39. }  
  40.            
  41. /*  GROUPING  */  
  42. .group:before,  
  43. .group:after {  
  44.     content:"";  
  45.     display:table;  
  46. }  
  47. .group:after {  
  48.     clear:both;  
  49. }  

 

 

虽然代码谁都能看懂，但是对于善于学习的人来说，关注的往往不是实现本身，而是为什么这样实现，如果是我，会怎么实现。所以我还是简单的讲讲这个网格系统的“原理”：

How It Works

 

.section

section元素将页面横向分割成几部分。可以500%提高开发效率的前端UI框架！

.group

group元素解决浮动的问题，这类似于网上的clearfix。兼容ie6以上。

.col

col将section分割成小栏目。每一栏都有一定的margin值。每一栏的宽度是用的百分比。百分比值应该是作者根据经验得出来的。
发表回复
Global site tag (gtag.js) - Google Analytics