LayUI入门基础篇2（乐字节架构、大数据）

基本元素

            
              如果需要更多资料点击下方图片加好友领取⬇（注明来意）
                   

按钮

用法

​ 向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。

<!-- 基础按钮 -->
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
<div class="layui-btn">一个按钮</div>

主题

名称	组合
原始	class=“layui-btn layui-btn-primary”
默认	class=“layui-btn”
百搭	class=“layui-btn layui-btn-normal”
暖色	class=“layui-btn layui-btn-warm”
警告	class=“layui-btn layui-btn-danger”
禁用	class=“layui-btn layui-btn-disabled”

示例：

<!-- 不同主题的按钮 -->
<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-primary">原始按钮</button> 
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>

尺寸

尺寸	组合
大型	class=“layui-btn layui-btn-lg”
默认	class=“layui-btn”
小型	class=“layui-btn layui-btn-sm”
迷你	class=“layui-btn layui-btn-xs”

<!-- 不同尺寸的按钮 -->
<button class="layui-btn layui-btn-primary layui-btn-lg">大型</button> 
<button class="layui-btn">默认</button>
<button class="layui-btn layui-btn-sm layui-btn-danger">小型</button>
<button class="layui-btn layui-btn-xs">迷你</button>

圆角

layui-btn-radius

<button class="layui-btn layui-btn-radius">默认按钮</button>
<button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button> 
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
<button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>

图标

<button type="button" class="layui-btn">
    <i class="layui-icon">&#xe608;</i> 添加
</button>

<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
    <i class="layui-icon">&#x1002;</i> 刷新
</button>

导航

​ 导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边。面包屑结构简单，支持自定义分隔符。

​ 依赖加载模块：element

实现步骤：

1. 引入的资源

   <link rel="stylesheet" href="layui/css/layui.css">
   <script src="layui/layui.js"></script>

2. 依赖加载模块

   <script type="text/javascript">
       // 注意：导航 依赖 element 模块，否则无法进行功能性操作
       layui.use('element', function(){
         
           var element = layui.element;
   
       });
   </script>

3. 显示指定类型的导航

水平导航

<ul class="layui-nav">
	<li class="layui-nav-item"><a href="">最新活动</a></li>
    <li class="layui-nav-item layui-this"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd><a href="