AmazeUI网格如何实现 AmazeUI网格实现代码示例

AmazeUI网格如何实现？本篇文章小编给大家分享一下AmazeUI网格实现代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

具体代码如下：

css/amazeui.min.css">



示例 1：一个基本的网格

  
4
  
8


示例 2：不同区间不同的划分比例

  
sm-6 md-4 lg-3
  
sm-6 md-8 lg-9


示例 3：限制宽度的网格

  
4
  
8


示例 4：容器

  

    
.am-u-sm-6
    
.am-u-sm-6
  


示例 5：不足 12 份的网格


  
3
  
3
  
3



  
3
  
3
  
3


示例 6：响应式辅助类控制元素显隐

  

    sm-2
    lg-4
  
  
sm4 lg4
  

    sm-6
    lg-4
  


  

    sm-full
    lg-3
  
  

    sm-full
    lg-6
  
  

    sm-full
    lg-3
  


  

    6
    2
  
  

    6
    8
  
  

    full
    2
  


  
3
  
9


  

    full
    4
  
  

    full
    8
  


  

    6
    5
  
  

    6
    7
  


  

    full
    6
  
  

    full
    6
  


示例 7：列边距啪啪啪

  
1
  
11


  
1
  
10, offset 1


  
1
  
9, offset 2


  
1
  
8, offset 3


  
1
  
7, offset 4


示例 8：居中， To be or not to be


  
3 centered



  
6 centered



  
9 md-down-centered 



  
11 centered


示例 9：结构与表现表里不一


  
8 main
  
4 sidebar


示例 10: 没有内边距的列

  
.am-u-sm-6
  
.am-u-sm-6







 

效果图：