新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

开发者文档

响应式的12栏栅格系统,兼容三种主流屏幕尺寸 1024,1280/1366以及1440。实际上用户屏幕宽度在1024px以上的情况下会自动选择一个最佳的栅格宽度。
如果想关闭响应式布局,只需要删除 sui-responsive.less文件即可。

1. 默认栅格系统

1
1
1
1
1
1
1
1
1
2
2
3
4
4
2
6
  1. <div class="grid-demo">
  2. <div class="sui-row">
  3. <div class="span1">1</div>
  4. <div class="span1">1</div>
  5. <div class="span1">1</div>
  6. <div class="span1">1</div>
  7. <div class="span1">1</div>
  8. <div class="span1">1</div>
  9. <div class="span1">1</div>
  10. <div class="span1">1</div>
  11. </div>
  12. <div class="sui-row">
  13. <div class="span1">1</div>
  14. <div class="span2">2</div>
  15. <div class="span2">2</div>
  16. <div class="span3">3</div>
  17. </div>
  18. <div class="sui-row">
  19. <div class="span4">4</div>
  20. <div class="span4">4</div>
  21. </div>
  22. <div class="sui-row">
  23. <div class="span2">2</div>
  24. <div class="span6">6</div>
  25. </div>
  26. </div>

默认栅格系统每一栏是定宽的,并且宽度可以根据屏幕宽度在几个固定值之间变化,区别于流式栅格系统的百分比宽度。

2. 流式栅格系统

1
1
1
1
1
1
1
1
1
2
2
3
4
4
2
6
  1. <div class="grid-demo">
  2. <div class="sui-row-fluid">
  3. <div class="span1">1</div>
  4. <div class="span1">1</div>
  5. <div class="span1">1</div>
  6. <div class="span1">1</div>
  7. <div class="span1">1</div>
  8. <div class="span1">1</div>
  9. <div class="span1">1</div>
  10. <div class="span1">1</div>
  11. </div>
  12. <div class="sui-row-fluid">
  13. <div class="span1">1</div>
  14. <div class="span2">2</div>
  15. <div class="span2">2</div>
  16. <div class="span3">3</div>
  17. </div>
  18. <div class="sui-row-fluid">
  19. <div class="span4">4</div>
  20. <div class="span4">4</div>
  21. </div>
  22. <div class="sui-row-fluid">
  23. <div class="span2">2</div>
  24. <div class="span6">6</div>
  25. </div>
  26. </div>

流式栅格系统每一栏的宽度都是其容器的百分比,因此会随着屏幕宽度的变化而不断变化,没有一个固定的宽度像素值。