10.面板.徽章.辅助

学习要点：
1.面板
2.徽章
3.辅助
本节课我们来开始了解 Layui 的三个元素：面板、徽章、辅助。
一．面板
1. 卡片面板：layui-card；
<div class="layui-card">
<div class="layui-card-header">面板标题</div>
<div class="layui-card-body">
面板内容...
</div>
</div>
PS：如果背景是白色基调，这个面板，基本看不出东西；
2. 折叠面板：layui-collapse；
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">标题 1</h2>
<div class="layui-colla-content layui-show">内容 1</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">标题 2</h2>
<div class="layui-colla-content">内容 2</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">标题 3</h2>
<div class="layui-colla-content">内容 3</div>
</div>
</div>
PS：手风琴式的面板，直接加属性：lay-accordion
<div class="layui-collapse" lay-accordion>【十天精品课堂系列】 主讲：李炎恢
二．徽章
1. 徽章是一种提示：小圆点、椭圆体和边框体，一共 7 种颜色；
<span class="layui-badge">7</span>
<span class="layui-badge layui-bg-blue">8</span>
<span class="layui-badge layui-bg-orange">9</span>
PS：默认是椭圆体，可以输入嵌入值；小圆点不能嵌入；
<span class="layui-badge-dot layui-bg-green"></span>
<span class="layui-badge-rim layui-bg-green">1</span>
三．辅助
1. 引用辅组：layui-elem-quote；
<blokquote class="layui-elem-quote">引用区域</blokquote>
<blokquote class="layui-elem-quote layui-quote-nm">引用区域</blokquote>
2. 字段集区块：layui-elem-field；
<fieldset class="layui-elem-field">
<legend>字段集引用</legend>
<div class="layui-field-box">
内容区域
</div>
</fieldset>
PS：也可以直接一行；
<fieldset class="layui-elem-field layui-field-title">
3. 横线--水平线；
<hr class="layui-bg-green">