layui framework (buttons and navigation bars usage style)

First, usage style button
1, button style

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

Renderings:

Other theme style:

Rounded button style, added: layui-btn-radius

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

FIG rounded button effects:

2 butcons

<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>

FIG icon button effects:

3, a combination of button
attributes: 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>

FIG button combined effect:

replace an attribute layui-btn-group is layui-btn-container, may be added to the spacing between the button combination, as follows:

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

Button combination renderings after replacement:

Second, use the navigation bar style
navigation bar dependent element module, otherwise it can not function line operation

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

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

1, to achieve horizontal navigation bar
to achieve specific properties of the navigation bar:

HTML code to achieve:

<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>

FIG achieve results as follows:

Other colors relating to the navigation bar:

2, to achieve vertical navigation bar
attributes: layui-nav-tree

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

3, the side navigation bar to achieve
attributes: "layui-nav-tree layui -nav-side"

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