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>

<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="">挪动模块</a></dd>
            <dd><a href="">后盾模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li>
</ul>

垂直/侧边导航

<ul class="layui-nav layui-nav-tree" >
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">默认开展</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">选项1</a></dd>
      <dd><a href="javascript:;">选项2</a></dd>
      <dd><a href="">跳转</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</a>
    <dl class="layui-nav-child">
      <dd><a href="">挪动模块</a></dd>
      <dd><a href="">后盾模版</a></dd>
      <dd><a href="">电商平台</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">产品</a></li>
  <li class="layui-nav-item"><a href="">大数据</a></li>
</ul>

程度、垂直、侧边三个导航的HTML构造是齐全一样的，不同的是：

程度导航：layui-nav
垂直导航须要追加class：layui-nav-tree
侧边导航须要追加class：layui-nav-tree layui-nav-side

导航主题

通过对导航追加CSS背景类，让导航出现不同的主题色

<!-- 如定义一个墨绿背景色的导航 -->
<ul class="layui-nav layui-bg-move" >
  …
</ul>

程度导航反对的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航反对的其它背景主题有：layui-bg-cyan（藏青）

面包屑

<span class="layui-breadcrumb">
  <a href="">首页</a>
  <a href="">国内新闻</a>
  <a href="">亚太地区</a>
  <a><cite>注释</cite></a>
</span>

你还能够通过设置属性 lay-separator=”” 来自定义分隔符。例如：

<span class="layui-breadcrumb" lay-separator="-">
  <a href="">首页</a>
  <a href="">国内新闻</a>
  <a href="">亚太地区</a>
  <a><cite>注释</cite></a>
</span>

选项卡

导航菜单可利用于头部和侧边，反对响应式，反对删除选项卡等性能。

<font color=”red”>依赖加载模块：element</font>

实现步骤

引入的资源

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

依赖加载模块

<script type="text/javascript">
    // 留神：选项卡 依赖 element 模块，否则无奈进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

    });
</script>

加载HTML

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户治理</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 class="layui-tab-item">内容5</div>
  </div>
</div>

选项卡格调

默认格调：layui-tab
简洁格调须要追加class：layui-tab-brief
卡片格调须要追加class：layui-tab-card

带删除的选项卡

能够对父层容器设置属性 lay-allowClose=”true” 来容许Tab选项卡被删除

<div class="layui-tab" lay-allowClose="true">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户治理</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 class="layui-tab-item">内容5</div>
  </div>
</div>

表格

惯例用法

<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>昵称</th>
      <th>退出工夫</th>
      <th>签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行</td>
    </tr>
    <tr>
      <td>许闲心</td>
      <td>2016-11-28</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，工夫的无涯的荒野里…</td>
    </tr>
  </tbody>
</table>

根底属性

属性名	属性值	备注
lay-even	无	用于开启隔行背景，可与其它属性一起应用
lay-skin=”属性值”	line （行边框格调） row （列边框格调） nob （无边框格调）	若应用默认格调不设置该属性即可
lay-size=”属性值”	sm （小尺寸） lg （大尺寸）	若应用默认尺寸不设置该属性即可

你所须要的根底属性写在table标签上，例如：

<!-- 一个带有隔行背景，且行边框格调的大尺寸表格 -->
<table class="layui-table" lay-even lay-size="lg" lay-skin="row">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>昵称</th>
      <th>退出工夫</th>
      <th>签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行</td>
    </tr>
    <tr>
      <td>许闲心</td>
      <td>2016-11-28</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，工夫的无涯的荒野里…</td>
    </tr>
  </tbody>
</table>

表单

<font color=”red”>依赖加载模块：form </font>

在一个容器中设定 class=”layui-form” 来标识一个表单元素块
```
<form class="layui-form" action="">
    
</form>
```

根本的行区块构造，它提供了响应式的反对。能够换成其余构造，但必须要在外层容器中定义class=”layui-form”，form模块能力失常工作。

<div class="layui-form-item">
      <label class="layui-form-label">标签区域</label>
      <div class="layui-input-block">
        原始表单元素区域
      </div>
</div>

输入框

<input type="text" name="title" required lay-verify="required" placeholder="请输出题目" autocomplete="off" class="layui-input" />

required：注册浏览器所规定的必填字段
lay-verify：注册form模块须要验证的类型
class=”layui-input”：layui.css提供的通用CSS类

下拉抉择框

<select name="city" lay-verify="">
  <option value="">请抉择一个城市</option>
  <option value="010">北京</option>
  <option value="021">上海</option>
  <option value="0571">杭州</option>
</select>

属性selected可设定默认项
属性disabled开启禁用，select和option标签都反对

<select name="city" lay-verify="">
  <option value="010">北京</option>
  <option value="021" disabled>上海（禁用成果）</option>
  <option value="0571" selected>杭州</option>
</select>

能够通过 optgroup 标签给select分组

<select name="quiz">
  <option value="">请抉择</option>
  <optgroup label="城市记忆">
    <option value="你工作的第一个城市">你工作的第一个城市？</option>
  </optgroup>
  <optgroup label="学生时代">
    <option value="你的工号">你的工号？</option>
    <option value="你最喜爱的老师">你最喜爱的老师？</option>
  </optgroup>
</select>

通过设定属性 lay-search 来开启搜寻匹配性能

<select name="city" lay-verify="" lay-search>
  <option value="010">layer</option>
  <option value="021">form</option>
  <option value="0571" selected>layim</option>
</select>

复选框

<h2>默认格调：</h2>
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发愣"> 
<input type="checkbox" name="" title="禁用" disabled> 
 
<h2>原始格调：</h2>
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发愣" lay-skin="primary"> 
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>

属性title可自定义文本（舒适提醒：如果只想显示复选框，能够不必设置title）
属性checked可设定默认选中
属性lay-skin可设置复选框的格调（原始格调：lay-skin=”primary”）
设置value=”1″可自定义值，否则选中时返回的就是默认的on

开关

将复选框checkbox，通过设定 lay-skin=”switch” 造成了开关格调

<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|敞开">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>

属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本（两种文本用 “|” 隔开）
设置value=”1″可自定义值，否则选中时返回的就是默认的on

单选框

<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>

属性title可自定义文本
属性disabled开启禁用
设置value=”xxx”可自定义值，否则选中时返回的就是默认的on

文本域

<textarea name="remark" required lay-verify="required" placeholder="请输出集体介绍" class="layui-textarea"></textarea>

class=”layui-textarea”：layui.css提供的通用CSS类

组装行内表单

<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">范畴</label>
        <div class="layui-input-inline" style="width: 100px;">
          <input type="text" name="price_min" placeholder="￥" 
                 autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline" style="width: 100px;">
          <input type="text" name="price_max" placeholder="￥" 
                 autocomplete="off" class="layui-input">
        </div>
    </div>
</div>

class=”layui-inline”：定义外层行内
class=”layui-input-inline”：定义内层行内

疏忽丑化渲染

能够对表单元素减少属性 lay-ignore 设置后，将不会对该标签进行丑化渲染，即保留零碎格调。

<input type="radio" name="sex" value="nan" title="男" lay-ignore>

表单方框格调

通过追加 layui-form-pane 的class，来设定表单的方框格调。

<form class="layui-form layui-form-pane" action="">
  <!-- 
        内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该格调下须要额定增加 pane属性（否则        会看起来比拟顺当），如： 
  -->
  <div class="layui-form-item" pane>
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
</form>

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

根本元素

按钮

用法

主题

尺寸

圆角

图标

导航

程度导航

垂直/侧边导航

导航主题

面包屑

选项卡

实现步骤

选项卡格调

带删除的选项卡

表格

惯例用法

根底属性

表单

输入框

下拉抉择框

复选框

开关

单选框

文本域

组装行内表单

疏忽丑化渲染

表单方框格调

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

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

根本元素

按钮

用法

主题

尺寸

圆角

图标

导航

程度导航

垂直/侧边导航

导航主题

面包屑

选项卡

实现步骤

选项卡格调

带删除的选项卡

表格

惯例用法

根底属性

表单

输入框

下拉抉择框

复选框

开关

单选框

文本域

组装行内表单

疏忽丑化渲染

表单方框格调

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复