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>