amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid

amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid

一、总结

1、与grid区别：网格中：am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在ul中，里面有li) 记住这个avg（表示等分网格） 这里数字的意思不一样，这里的数字表示几等份

2、基本使用：被ul和li统治

<ul class="am-avg-sm-4 am-thumbnails">
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-4.jpg" /></li>
</ul>

3、响应式是什么？：针对不同屏幕有不同响应

<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-thumbnails">
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-4.jpg" /></li>
</ul>

4、配合css的特效，挺好玩的：

.boxes .box {
  height: 100px;
  color: #eee;
  line-height: 100px;
  text-align: center;
  font-weight: bold;
  transition: all .2s ease;
}

.boxes .box:hover {
  font-size: 250%;
  transform: rotate(360deg);
}

 

 

 

二、等分网格 AVG Grid

目录

• 基本使用
• 响应式
• 九宫格

Average Grid，均分网格（原 Block Grid），使用 ul / ol 创建等分列，用于内容的排列。

响应式断点为：

Class	区间
.am-avg-sm-*	0 - 640px
.am-avg-md-*	641px - 1024px
.am-avg-lg-*	1025px +

与布局网格不同的是，这里的数字表示几等分，而不是占 12 等分中的几列，比如 .am-avg-sm-2 会将子元素 <li>的宽度设置为 50%。

考虑到通用性（菜单、图片）等，<li> 没有设置 padding，使用时需根据需求自行设置。

另外需要注意的 AVG Grid 只能用于 <ul> / <ol> 结构。

下面的演示中，添加了以下自定义样式（Less）：

这部分代码已经整合到缩略图，无需再添加。

 Copy

.doc-block-grid {
  margin-left: -5px;
  margin-right: -5px;
  > li {
    padding: 0 5px 10px 5px;
    img {
      border: 1px solid #CCC;
      padding: 2px;
      background: #FFF;
    }
  }
}

演示图标版权归微软 Bing 所有。

基本使用

只添加 .am-avg-sm-*，应用于所有屏幕尺寸。

 Copy

• 
• 
• 
• 

<ul class="am-avg-sm-4 am-thumbnails">
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-4.jpg" /></li>
</ul>

响应式

按需增加更多响应式 class，缩放窗口可以查看响应效果。

 Copy

• 
• 
• 
• 
• 
• 
• 
• 

<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-thumbnails">
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-4.jpg" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-2.jpg" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-3.jpg" /></li>
  <li><img class="am-thumbnail" src="http://s.amazeui.org/media/i/demos/bing-4.jpg" /></li>
</ul>

九宫格

看到同学提这样的需求，就简单写一个示例。

 Copy

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

<ul class="am-avg-sm-3 boxes">
  <li class="box box-1">1</li>
  <li class="box box-2">2</li>
  <li class="box box-3">3</li>
  <li class="box box-4">4</li>
  <li class="box box-5">5</li>
  <li class="box box-6">6</li>
  <li class="box box-7">7</li>
  <li class="box box-8">8</li>
  <li class="box box-9">9</li>
</ul>

 Copy

.boxes {
  width: 300px;
}

.boxes .box {
  height: 100px;
  color: #eee;
  line-height: 100px;
  text-align: center;
  font-weight: bold;
  transition: all .2s ease;
}

.boxes .box:hover {
  font-size: 250%;
  transform: rotate(360deg);
}

.box-1 {
  background-color: red;
}

.box-2 {
  background-color: orange;
}

.box-3 {
  background-color: #0000ff;
}

.box-4 {
  background-color: #008000;
}

.box-5 {
  background-color: red;
}

.box-6 {
  background-color: orange;
}

.box-7 {
  background-color: #0000ff;
}

.box-8 {
  background-color: #008000;
}

.box-9 {
  background-color: red;
}