块序列List

不必对子元素进行宽度设定,轻松实现排列

类名 设定值 权重 小屏幕 (0-750px) 中等屏幕 (0-1200px) 大屏幕 (>1200px)
.list 1~12 默认 保持设定值 保持设定值 保持设定值
.list-m 1~12 高于.list 触发设定值 触发设定值 不触发
.list-s 1~12 高于.list及.list-m 触发设定值 不触发 不触发
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
<ul class="box-advance list3">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    ...
</ul>

响应式布局Responsive layout

通过预定义的class="list"、class="list-m"、class="list-s"来对中、小屏幕作排列调整
例:添加class="list3 list-s1",即列表元素默认为一行3个,视窗像素小于750px则转换为一行1个

<ul class="box-advance list3 list-s1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    ...
</ul>

class="list-m"、class="list-s"可以同时叠加,在不同视窗大小时按权重执行设定值

<ul class="box-advance list5 list-m3 list-s1">
    ...
</ul>

间距Padding

添加class="plr"使块元素填充左右内间距padding-left:0.75rem;padding-right:0.75rem

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
<ul class="box-advance list3 plr">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    ...
</ul>