09.选项卡和进度条
学习要点：
1.选项卡
2.进度条
本节课我们来开始了解 Layui 的选项卡和进度条元素。
一．选项卡
1. 先创建一个简单的选项卡元素；
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>关于系统</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容 1</div>
<div class="layui-tab-item">内容 2</div>
<div class="layui-tab-item">内容 3</div>
<div class="layui-tab-item">内容 4</div>
</div>
</div>
PS：定义首选内容：layui-show；注意：layui-show 和 layui-this 保持一致；
2. Tab 简约风格：layui-tab-brief；
<div class="layui-tab layui-tab-brief">
3. Tab 卡片风格：layui-tab-card；
<div class="layui-tab layui-tab-card">
PS：所有 Tab 风格都是响应式的，当浏览器屏幕不足时会产生响应式效果；
4. 带删除的 Tab，使用属性：lay-allowClose="true"
<div class="layui-tab layui-tab-card" lay-allowClose="true">
PS：选项卡元素依赖：element 模块；【十天精品课堂系列】
主讲：李炎恢
二．进度条
1. 先创建一个简单的进度条元素；
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="10%"></div>
</div>
PS：进度条定义：layui-progress、进度条进度定义：layui-progress-bar；
PS：百分比定义：lay-percent="10%"；
2. lay-showPercent 可以指定是否显示比例，比如也可以用分数；
<div class="layui-progress" lay-showPercent="true">
<div class="layui-progress-bar" lay-percent="1/3"></div>
</div>
PS：开启显示 true 或任意值，关闭就删除即可；
3. layui-progress-big 样式可以设置大号进度条；
<div class="layui-progress layui-progress-big" lay-showPercent="true">
<div class="layui-progress-bar layui-bg-blue" lay-percent="1/3"></div>
</div>
PS：可以设置进度条进度颜色；
