响应式布局是怎样工作的?

响应式布局配置有宽度不同的块,并且包含偏移属性,可以自定义设置多种宽度的块布局,更多参数进入响应式布局中查询

width:25%的块,视窗在任何像素下都保持原有宽度

任何像素

.box25
.box25
.box25
.box25

添加class="box-m50",视窗像素小于1200px则转换为width:50%

0-1200px

.box25 .box-m50
.box25 .box-m50
.box25 .box-m50
.box25 .box-m50

再添加class="box-s100",视窗像素小于750px则转换为width:100%

0-750px

.box25 .box-m50 .box-s100
.box25 .box-m50 .box-s100
.box25 .box-m50 .box-s100
.box25 .box-m50 .box-s100

什么是预定义排列?

预定义排列是针对宽度相同的块进行快速布局,利用其预定义的设定尽可能地减少HTML代码,更多参数进入预定义排列中查询

以下结构就可以快速获得3个宽度相等的块

<ul class="box-advance list3">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

预定义可以快速设定响应式排列,例如以下添加class="list-m2 list-s1",即中等屏幕转换为每行2个,小屏幕转换为每行1个

<ul class="box-advance list3 list-m2 list-s1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

预定义的序列组,视窗在任何像素下都保持设定的的每行个数

任何像素

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

添加class="list-m2",视窗像素小于1200px则显示每行2个

0-1200px

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

再添加class="list-s1",视窗像素小于750px则显示每行1个

0-750px

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

如何自定义组件的风格?

如果你具备一定CSS基础,想创建自己的风格,欢迎你修改组件原生的CSS代码,或是使用在线自定义组件风格工具

我们不建议你在框架的CSS文件上作修改,你可以通过创建私有CSS文件来重定义组件的风格样式,以下为例,这是一个原生样式的下拉菜单

<div class="menu drop">
    <div><a href="#">Home</a></div>
    <div><a>Clothing</a>
        <ul>
            <li><a href="#">T-Shirts</a></li>
            <li><a href="#">Long Sleeve Shirts</a></li>
        </ul>
    </div>
    <div><a>Accessories</a>
        <ul>
            <li><a href="#">Watches</a></li>
            <li><a href="#">Hats</a></li>
        </ul>
    </div>
</div>

添加自定义组件的class命名

<div class="menu drop mystyle">
    ...
</div>

从框架中获取组件的CSS代码

/**--drop--**/
.menu.drop>div {position:relative;float:left;border-right:1px solid #dfdfdf;}
.menu.drop>div:last-of-type {border-right:0;}
.menu.drop>div>a {display:block;padding:1.125rem 1rem;background-color:#f1f2f4;color:#666;font-size:1.25rem;line-height:1.25;}
.menu.drop>div>a>i.arrow {display:inline-block;margin-left:.75rem;width:10px;height:10px;background-image:url('../img/arrow.png');background-position:-1px -28px;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-transform:rotate(90deg);transform:rotate(90deg);}

.menu.drop>div>ul {position:absolute;top:50%;left:0;z-index:100;visibility:hidden;padding:.5rem 0;min-width:10rem;background-color:#333;opacity:0;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;filter:Alpha(Opacity =0);}
.menu.drop>div>ul>li>a {display:block;padding:.25rem 1rem;color:#ccc;text-align:left;white-space:nowrap;font-size:1rem;line-height:1.5;}
.menu.drop>div>ul>li:hover>a,
.menu.drop>div>ul>li.active>a {background-color:#222;color:#fff;}

.menu.drop>div:hover>a,
.menu.drop>div.active>a {background-color:#333;color:#fff;}
.menu.drop>div:hover>ul {top:99.9999%;visibility:visible;opacity:0.95;filter:Alpha(Opacity =95);}

将其CSS修改并创建在文件中,获得以下自定义风格的下拉菜单

/**--drop--**/
.menu.drop.mystyle>div {border-right:1px solid #000;}
.menu.drop.mystyle>div:last-of-type {border-right:0;}
.menu.drop.mystyle>div>a {padding:1.3rem 1.5rem;background-color:#333;color:#fff;font-size:1.3rem;}
.menu.drop.mystyle>div>a>i.arrow {background-position:-1px -41px;}

.menu.drop.mystyle>div>ul {background-color:#fff;box-shadow:.1rem .1rem .125rem rgba(0,0,0,0.2);}
.menu.drop.mystyle>div>ul>li>a {color:#333;}
.menu.drop.mystyle>div>ul>li:hover>a,
.menu.drop.mystyle>div>ul>li.active>a {background-color:#f1f2f4;color:#3f51b5;}

.menu.drop.mystyle>div:hover>a,
.menu.drop.mystyle>div.active>a {background-color:#3f51b5;color:#fff;}

自定义容器时需要注意什么?

类名与选择器的选取

为了降低学习成本,使结构更具易读性,我们尽可能地减少了HTML代码,例如下拉框组件我们给予的结构是:

<div class="dropmenu">
    <span>dropmenu:<small>all</small></span>
    <ul>
        <li><a href="#">Text1</a></li>
        <li><a href="#">Text2</a></li>
        <li><a href="#">Text3</a></li>
    </ul>
</div>

而不是:

<div class="dropmenu">
    <span class="dropmenu-title">dropmenu:<small class="dropmenu-title-small">all</small></span>
    <ul class="dropmenu-list">
        <li class="dropmenu-list-item"><a href="#">Text1</a></li>
        <li class="dropmenu-list-item"><a href="#">Text2</a></li>
        <li class="dropmenu-list-item"><a href="#">Text3</a></li>
    </ul>
</div>

这意味着你在自定义容器时,类名与选择器的选取需要更加地严谨,例如创建一个ul父容器

<ul class="mystyle">
    <li>
        <div class="dropmenu">
            <span>dropmenu:<small>all</small></span>
            <ul>
                <li><a href="#">Text1</a></li>
                <li><a href="#">Text2</a></li>
                <li><a href="#">Text3</a></li>
            </ul>
        </div>
    </li>
</ul>

定义CSS时请选用.mystyle>li,而不是.mystyle li,这样的编写方式更加标准化,避免了元素总是在抵消继承的属性

Correct:
.mystyle>li {}

Error:
.mystyle li {}