在ZUI中提供了众多实用的辅助类。任何时候只需要加入对应的CSS类名即可。虽然辅助类使用起来非常方便,但也要避免滥用。使用之前应该了解以下要点。
- 尽量少用或不用辅助类,如果有对应的控件或组件使用。
- 当相同的场景需要大量使用辅助类时,这时应该考虑是否单独定义一个新的控件或组件。
在ZUI中提供了众多实用的辅助类。任何时候只需要加入对应的CSS类名即可。虽然辅助类使用起来非常方便,但也要避免滥用。使用之前应该了解以下要点。
使用标签<small>
或者CSS类名.small
来使得文本字号比正常情况小一号。
<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
仅仅隐藏元素,但元素内容所占的空间并不会清除。