在ZUI中提供了众多实用的辅助类。任何时候只需要加入对应的CSS类名即可。虽然辅助类使用起来非常方便,但也要避免滥用。使用之前应该了解以下要点。

小字号文本

使用标签<small>或者CSS类名.small来使得文本字号比正常情况小一号。

小字号文本,small text.
<small>小字号文本,small text.</small>

文本颜色

Lorem ipsum dolor sit amet, consectetur.

Perferendis eveniet ipsa modi nesciunt, vel.

Molestias maxime perspiciatis saepe unde corporis.

Culpa eum modi assumenda, velit vitae.

Cumque consequuntur modi fugiat debitis dolorum.

Minus nisi consectetur dolorum temporibus architecto.

Tenetur ullam amet illo sint magni!

Sapiente voluptates debitis dolor ipsam libero!

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-danger">...</p>
<p class="text-success">...</p>
<p class="text-warning">...</p>
<p class="text-info">...</p>
<p class="text-important">...</p>
<p class="text-special">...</p>

文本背景高亮

Lorem ipsum dolor sit amet, consectetur.

Perferendis eveniet ipsa modi nesciunt, vel.

Molestias maxime perspiciatis saepe unde corporis.

Culpa eum modi assumenda, velit vitae.

Cumque consequuntur modi fugiat debitis dolorum.

Minus nisi consectetur dolorum temporibus architecto.

Tenetur ullam amet illo sint magni!

Sapiente voluptates debitis dolor ipsam libero!

<p class="highlight-default">...</p>
<p class="highlight-primary">...</p>
<p class="highlight-danger">...</p>
<p class="highlight-success">...</p>
<p class="highlight-warning">...</p>
<p class="highlight-info">...</p>
<p class="highlight-important">...</p>
<p class="highlight-special">...</p>

文本背景色

Lorem ipsum dolor sit amet, consectetur.

Perferendis eveniet ipsa modi nesciunt, vel.

Molestias maxime perspiciatis saepe unde corporis.

Culpa eum modi assumenda, velit vitae.

Cumque consequuntur modi fugiat debitis dolorum.

Minus nisi consectetur dolorum temporibus architecto.

Tenetur ullam amet illo sint magni!

Sapiente voluptates debitis dolor ipsam libero!

<p class="bg-default">...</p>
<p class="bg-primary">...</p>
<p class="bg-danger">...</p>
<p class="bg-success">...</p>
<p class="bg-warning">...</p>
<p class="bg-info">...</p>
<p class="bg-important">...</p>
<p class="bg-special">...</p>

禁用文本换行

使所有文本在一行显示。超出的部分将会被隐藏。只需要使用.text-nowrap或者.nobr

<h2 class="text-nowrap">...</h2>

文本超出省略

使所有文本在一行显示。超出的部分会被截断,并且在文本末尾添加省略号。使用.text-ellipsis

<h2 class="text-ellipsis">...</h2>

并不是所有浏览器都支持此选项。

内容边距

在内容元素内添加内边距,使得元素更易于阅读。使用.with-padding

内容边距和文本背景一起使用的例子。

Lorem ipsum dolor sit amet, consectetur.

Perferendis eveniet ipsa modi nesciunt, vel.

Molestias maxime perspiciatis saepe unde corporis.

Culpa eum modi assumenda, velit vitae.

Cumque consequuntur modi fugiat debitis dolorum.

Minus nisi consectetur dolorum temporibus architecto.

Tenetur ullam amet illo sint magni!

Sapiente voluptates debitis dolor ipsam libero!

<p class="with-padding bg-default">...</p>
<p class="with-padding bg-primary">...</p>
<p class="with-padding bg-danger">...</p>
<p class="with-padding bg-success">...</p>
<p class="with-padding bg-warning">...</p>
<p class="with-padding bg-info">...</p>
<p class="with-padding bg-important">...</p>
<p class="with-padding bg-special">...</p>

关闭按钮

通常用来关闭消息框或者模态框。

<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

三角符号

<span class="caret"></span>

浮动

强制使得一个元素向左或者向右浮动。

<div class="pull-left"></div>
<div class="pull-right"></div>

对应的CSS代码:

.pull-right
{
  float: right !important;
}
.pull-left
{
  float: left !important;
}

清除浮动

只需要一个CSS类名即可使得内部浮动元素也具备高度等特性。

<div class="clearfix">...</div>

块居中

使得一个具备固定宽度的能够在父级容器中居中显示。

<div class="center-block">...</div>

对应的CSS代码:

.center-block
{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

隐藏文本

隐藏文本能够使得标签内的文本不显示,通常用于图片代替文本。

<h1 class="text-hide">此处文本不会显示</h1>

显示或隐藏元素

提供多个辅助类来帮助切换内容显示。

.hide
{
  display: none;
}
.hidden
{
  display: none!important;
}
.show
{
  display: block;
}
.showing
{
  display: block!important;
}
.invisible
{
  visibility: hidden;
}

.hidden.showing具备更高的优先级,防止其他规则重写。.invisible仅仅隐藏元素,但元素内容所占的空间并不会清除。