AmazeUI 网格的实现示例

本文主要介绍了AmazeUI 网格的实现示例，分享给大家，也给自己留个笔记。具体如下：

示例 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







 

效果图：

到此这篇关于AmazeUI 网格的实现示例的文章就介绍到这了,更多相关AmazeUI 网格内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章，希望大家以后多多支持潘少俊衡！