layui框架（徽章和选项卡）

一、徽章
徽章是一个修饰性的元素，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬，而显得十分和谐。
先来看效果图：

1、小圆点徽章介绍：
小圆点，通过 layui-badge-dot 来定义，里面不能加文字；

小圆点实现代码：

	<blockquote class="layui-elem-quote layui-quote-nm">
			小圆点：
			<span class="layui-badge-dot"></span>
			<span class="layui-badge-dot layui-bg-black"></span>
			<span class="layui-badge-dot layui-bg-blue"></span>
			<span class="layui-badge-dot layui-bg-cyan"></span>
			<span class="layui-badge-dot layui-bg-gray"></span>
			<span class="layui-badge-dot layui-bg-green"></span>
			<span class="layui-badge-dot layui-bg-orange"></span>
		</blockquote>

2、椭圆体和边框体介绍：
椭圆体，通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式；
边框体，通过 layui-badge-rim 来定义
椭圆体和边框体代码实现：

		<blockquote class="layui-elem-quote layui-quote-nm">
			常规弧形徽章：
			<span class="layui-badge">99+</span>
			<span class="layui-badge layui-bg-black">45</span>
			<span class="layui-badge layui-bg-blue">6</span>
			<span class="layui-badge layui-bg-cyan">12</span>
			<span class="layui-badge layui-bg-gray">15</span>
			<span class="layui-badge layui-bg-green">24</span>
			<span class="layui-badge layui-bg-orange">56</span>
			<br/>
			边框徽章：
			<span class="layui-badge-rim">88</span>
			<span class="layui-badge-rim">66</span>
		</blockquote>

3、其他元素搭配

		<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
		<button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>

二、选项卡
导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。
依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用，详见：内置组件 - 常用元素操作）。

实现效果图：

代码展示：
js代码：

<script>
			layui.use(["element"], function() {
				var $ = layui.jquery,
					element = layui.element;
			});
</script>

1、默认选项卡：
最外层div的class属性：layui-tab；
ul的class属性：layui-tab-title；
内层存放内容的div的class属性：layui-tab-content；
每段内容的div的class属性：layui-tab-item；
（注意： 值得注意的是，如果存在 layui-tab-item 的内容区域，在切换时自动定位到对应内容。如果不存在内容区域，则不会定位到对应内容。你通常需要设置过滤器，通过 element模块的监听tab事件来进行切换操作。）

<div class="layui-tab" style="width: 380px;margin: 0 auto;"  lay-filter="test">
			<ul class="layui-tab-title">
				<li class="layui-this" lay-id="11">首页</li>
				<li lay-id="22">热门</li>
				<li lay-id="33">新闻</li>
				<li lay-id="44">视频</li>
			</ul>
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show">
					1. 高度默认自适应，也可以随意固宽。<br /> 2. Tab进行了响应式处理，所以无需担心数量多少。
				</div>

				<div class="layui-tab-item">
					内容2
				</div>

				<div class="layui-tab-item">
					内容3
				</div>

				<div class="layui-tab-item">
					内容4
				</div>
			</div>
		</div>

2、简约风格的选项卡
div的class外层通过追加class：layui-tab-brief 来设定简洁风格。
实现效果图：

3、卡片风格
外层div的class通过追加class：layui-tab-card来设定卡片风格。
实现效果图：

4、Tab响应式
当容器的宽度不足以显示全部的选项时，即会自动出现展开图标，如下以卡片风格为例（注意：所有Tab风格都支持响应式）：

5、待删除的选项卡
你可以对父层容器设置属性 lay-allowClose=“true” 来允许Tab选项卡被删除
效果图如下：

代码展示：

<div class="layui-tab" lay-allowclose="true"></div>