layui框架(按钮和导航栏的用法风格)

一、按钮的用法风格
1、按钮样式

<button class="layui-btn layui-btn-primary">原始按钮</button>
<button class="layui-btn">默认按钮</button>

效果图:
在这里插入图片描述
其他主题风格:
按钮的主题风格
圆角按钮样式,追加:layui-btn-radius

<button class="layui-btn layui-btn-radius">圆形按钮</button>

圆角按钮效果图:
圆角按钮
2、图标按钮

<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon">&#xe603;</i></button>
<button type="button" class="layui-btn"><i class="layui-icon">&#xe602;</i></button>
<button type="button" class="layui-btn"><i class="layui-icon">&#xe640;</i></button>
<button type="button" class="layui-btn"><i class="layui-icon">&#xe641;</i></button>
<button type="button" class="layui-btn"><i class="layui-icon">&#xe642;</i></button>
<button type="button" class="layui-btn"><i class="layui-icon">&#xe64c;</i></button>
<button type="button" class="layui-btn"><i class="layui-icon">&#xe770;</i></button>

图标按钮效果图:
图标按钮效果图
3、按钮组合
属性:layui-btn-group

<div class="layui-btn-group">
	<button type="button" class="layui-btn">增加</button>
	<button type="button" class="layui-btn">编辑</button>
	<button type="button" class="layui-btn">删除</button>
</div>

按钮组合效果图:
在这里插入图片描述
替换属性layui-btn-group为layui-btn-container,可以给按钮组合之间添加间隔,代码如下:

<div class="layui-btn-container">
	<button class="layui-btn">按钮一</button>
	<button class="layui-btn">按钮二</button>
	<button class="layui-btn">按钮三</button>
</div>

替换后的按钮组合效果图:
替换后的按钮组合效果图
二、导航栏的用法风格
导航栏依赖element模块,否则无法进行功能行操作

		<script>
			layui.use(["element", "layer"], function() {
				var element = layui.element;

				//....
			});
		</script>

1、水平导航栏的实现
实现导航栏的具体属性:
实现导航栏的具体属性
html代码实现:

<div style="width: 600px;margin: 10px auto;">
			<ul class="layui-nav layui-inline layui-bg-cyan" lay-filter="demo">
				<li class="layui-nav-item">
					<a>最新活动</a>
				</li>
				
				<li class="layui-nav-item layui-this">
					<a>新闻</a>
					<dl class="layui-nav-child">
						<dd>
							<a>突发性新闻</a>
						</dd>
						<dd class="layui-this">
							<a>持续性新闻</a>
						</dd>
						<dd>
							<a>周期性新闻</a>
						</dd>
					</dl>
				</li>
				
				<li class="layui-nav-item">
					<a>热门书籍</a>
				</li>

				<li class="layui-nav-item">
					<a href="#">日积月累</a>
					<dl class="layui-nav-child">
						<dd>
							<a>jQuery知识点</a>
						</dd>
						<dd class="layui-this">
							<a>音乐商城</a>
						</dd>
						<dd>
							<a>layui</a>
						</dd>
					</dl>
				</li>
			</ul>
		</div>

实现效果图如下:
导航栏效果图
导航栏的其他主题颜色:
导航栏的其他主题颜色
2、垂直导航栏的实现
属性:layui-nav-tree

<ul class="layui-nav layui-inline layui-bg-cyan layui-nav-tree" lay-filter="demo"></ul>

3、侧边导航栏实现
属性:“layui-nav-tree layui-nav-side”

<ul class="layui-nav layui-inline layui-bg-cyan layui-nav-side" lay-filter="demo"></ul>
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值