layui元素辅助--引用/字段集/横线

阅读须知:当前文档仅针对layui系列更新:2019-01-20 09:49:42 阅读量:3774 评论跟帖:0 文档整理编辑:Larry

在layui中提供了一些页面辅助元素,如引用块、字段集区块、横线等等,这些元素都无需依赖任何模块,有了这些简单元素可以为页面平添不少色彩

温馨提示: 关于Layui的使用问题可直接在 larryms社区layui专区交流,本文档系列在后续会开启用户评论交流
引用区域的文字

引用区域的文字

目前内置了上述两种风格

<blockquote class="layui-elem-quote">引用区域的文字</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>
      
字段集区块 - 默认风格
内容区域。

同样内置了两种风格,另一种风格即该文档的标题横线:字段集一行

<fieldset class="layui-elem-field">
  <legend>字段集区块 - 默认风格</legend>
  <div class="layui-field-box">
    内容区域
  </div>
</fieldset>
 
<fieldset class="layui-elem-field layui-field-title">
  <legend>字段集区块 - 横线风格</legend>
  <div class="layui-field-box">
    内容区域
  </div>
</fieldset>
你可以把它看作是一个有标题的横线
      
默认分割线
赤色分割线
橙色分割线
墨绿分割线
青色分割线
蓝色分割线
黑色分割线
灰色分割线
默认分割线
<hr>
 
赤色分割线
<hr class="layui-bg-red">
 
橙色分割线
<hr class="layui-bg-orange">
 
墨绿分割线
<hr class="layui-bg-green">
 
青色分割线
<hr class="layui-bg-cyan">
 
蓝色分割线
<hr class="layui-bg-blue">
 
黑色分割线
<hr class="layui-bg-black">
 
灰色分割线
<hr class="layui-bg-gray">