zui

section: basic id: utilities description: 一些使用的工具类 icon: icon-wrench filter: fuzhulei fzl --- # 辅助类在ZUI中提供了众多实用的辅助类。任何时候只需要加入对应的CSS类名即可。虽然辅助类使用起来非常方便，但也要避免滥用。使用之前应该了解以下要点。 * 尽量少用或不用辅助类，如果有对应的控件或组件使用。 * 当相同的场景需要大量使用辅助类时，这时应该考虑是否单独定义一个新的控件或组件。 ## 小字号文本使用标签``或者CSS类名`.small`来使得文本字号比正常情况小一号。 <div class="example"> 小字号文本，small text. </div> ```html 小字号文本，small text. ``` ## 文本颜色 <div class="example"> 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! </div> ```html ... ... ``` ```html ... ``` ```html ... ... ``` ```html ... ... ``` ```html ... ... ``` ```html ... ... ``` ```html ... ... ``` ```html ... ... ``` ## 文本背景高亮 <div class="example"> 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! </div> ```html ... ... ``` ```html ... ``` ```html ... ... ``` ```html ... ... ``` ```html ... ... ``` ```html ... ... ``` ```html ... ... ``` ```html ... ... ``` ## 文本背景色 <div class="example"> 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! </div> ```html ... ... ``` ```html ... ``` ```html ... ... ``` ```html ... ... ``` ```html ... ... ``` ```html ... ... ``` ```html ... ... ``` ```html ... ... ``` ## 禁用文本换行使所有文本在一行显示。超出的部分将会被隐藏。只需要使用`.text-nowrap`或者`.nobr`。 ```html <h2 class="text-nowrap">...</h2> ``` ## 文本超出省略使所有文本在一行显示。超出的部分会被截断，并且在文本末尾添加省略号。使用`.text-ellipsis`。 ```html <h2 class="text-ellipsis">...</h2> ``` <div class="alert alert-warning"> 并不是所有浏览器都支持此选项。 </div> ## 内容边距在内容元素内添加内边距，使得元素更易于阅读。使用`.with-padding`。内容边距和文本背景一起使用的例子。 <div class="example"> 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! </div> ```html ... ... ... ... ... ... ... ... ``` 移除元素内的所有边距使用 `.no-padding`。 ```css .no-padding {padding: 0!important;} ``` ## 关闭按钮通常用来关闭消息框或者模态框。 <div class="example"> <button type="button" class="close" style="float:none">×Close</button> </div> ```html <button type="button" class="close">×Close</button> ``` ## 三角符号 <div class="example"></div> ```html ``` ## 浮动强制使得一个元素向左或者向右浮动。 ```html <div class="pull-left"></div> <div class="pull-right"></div> ``` 对应的CSS代码： ```css .pull-right { float: right !important; } .pull-left { float: left !important; } ``` ## 清除浮动只需要一个CSS类名即可使得内部浮动元素也具备高度等特性。 ```html <div class="clearfix">...</div> ``` ## 块居中使得一个具备固定宽度的能够在父级容器中居中显示。 ```html <div class="center-block">...</div> ``` 对应的CSS代码： ```css .center-block { display: block; margin-left: auto; margin-right: auto; } ``` ## 隐藏文本隐藏文本能够使得标签内的文本不显示，通常用于图片代替文本。 ```html <h1 class="text-hide">此处文本不会显示</h1> ``` ## 显示或隐藏元素提供多个辅助类来帮助切换内容显示。 ```css .hide { display: none; } .hidden { display: none!important; } .show { display: block; } .showing { display: block!important; } .invisible { visibility: hidden; } ``` `.hidden` 和 `.showing`具备更高的优先级，防止其他规则重写。`.invisible` 仅仅隐藏元素，但元素内容所占的空间并不会清除。