基本元素

文本

为 HTML 中不同的标题标签定制了大小，可使用<h1>到<h6>或.dxy-h1到.dxy-h2类。正文提供了不同语境的样式，可用于<p>标签或其他文字标签中。

标题1加粗

标题1

标题2

标题3

标题4

标题5

标题6

这是常规正文段落

这是强调内容段落

这是引用段落

多行的引用段落
多行的引用段落

这是提示文本

<h1 class="dxy-h-bold">标题1加粗</h1>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p class="dxy-text">这是常规正文段落</p>
<p class="dxy-text-strong">这是强调内容段落</p>
<p class="dxy-text-quote">这是引用段落</p>
<p class="dxy-text-quote">多行的引用段落<br />多行的引用段落</p>
<p><span class="dxy-text-tip">这是提示文本</span></p>

查看代码

和原生列表不同，基本列表是去除样式的。

大学教授
同声翻译官
软件工程师
自由职业者

<ul class="dxy-ul">
	<li>大学教授</li>
	<li>同声翻译官</li>
	<li>软件工程师</li>
	<li>自由职业者</li>
</ul>

查看代码

水平列表

所有列表项放置在一行的列表。

大学教授
同声翻译官
软件工程师
自由职业者

<ul class="dxy-ul dxy-ul-horizon">
  <li>大学教授</li>
  <li>同声翻译官</li>
  <li>软件工程师</li>
  <li>自由职业者</li>
</ul>

查看代码

实心符号列表

左侧带实心圆符号的列表。

大学教授
同声翻译官
软件工程师
自由职业者

<ul class="dxy-ul dxy-ul-dot">
  <li>大学教授</li>
  <li>同声翻译官</li>
  <li>软件工程师</li>
  <li>自由职业者</li>
</ul>

查看代码

空心符号列表

左侧带空心圆圈的列表。

大学教授
同声翻译官
软件工程师
自由职业者

<ul class="dxy-ul dxy-ul-circle">
  <li>大学教授</li>
  <li>同声翻译官</li>
  <li>软件工程师</li>
  <li>自由职业者</li>
</ul>

查看代码

短语列表

为<dl>提供的样式，适用于短语后有对应定义或长句的情况。

Wi-Fi: 一个创建于IEEE 802.11标准的无线局域网技术
电子计算机: 一种利用电子学原理，根据一系列指令对资料进行处理的工具

<dl class="dxy-dl">
  <dt>Wi-Fi</dt>
  <dd>一个创建于IEEE 802.11标准的无线局域网技术</dd>
  <dt>电子计算机</dt>
  <dd>一种利用电子学原理，根据一系列指令对资料进行处理的工具</dd>
</dl>

查看代码

水平短语列表

短语和定义放置在一行的列表。

Wi-Fi: 一个创建于IEEE 802.11标准的无线局域网技术
电子计算机: 一种利用电子学原理，根据一系列指令对資料进行处理的工具

<dl class="dxy-dl dxy-dl-horizon">
  <dt>Wi-Fi</dt>
  <dd>一个创建于IEEE 802.11标准的无线局域网技术</dd>
  <dt>电子计算机</dt>
  <dd>一种利用电子学原理，根据一系列指令对資料进行处理的工具</dd>
</dl>

查看代码

参考了Bootstrap，把容器分为12栏，提供.dxy-col-1到.dxy-col-12类，数字代表占用的栏数。栅格容器使用.dxy-container类，在不同屏幕宽度时会有相应合适的最大宽度。如果要使用100%的宽度，可以使用.dxy-container-fluid。

dxy-col-12

dxy-col-1

dxy-col-2

dxy-col-3

dxy-col-5

dxy-col-7

<div class="dxy-container">
  <div class="dxy-row">
    <div class="dxy-col-12">dxy-col-12</div>
  </div>
  <div class="dxy-row">
    <div class="dxy-col-1">dxy-col-1</div>
    <div class="dxy-col-1">dxy-col-1</div>
    <div class="dxy-col-1">dxy-col-1</div>
    <div class="dxy-col-1">dxy-col-1</div>
    <div class="dxy-col-1">dxy-col-1</div>
    <div class="dxy-col-1">dxy-col-1</div>
    <div class="dxy-col-1">dxy-col-1</div>
    <div class="dxy-col-1">dxy-col-1</div>
    <div class="dxy-col-1">dxy-col-1</div>
    <div class="dxy-col-1">dxy-col-1</div>
    <div class="dxy-col-1">dxy-col-1</div>
    <div class="dxy-col-1">dxy-col-1</div>
  </div>
  <div class="dxy-row">
    <div class="dxy-col-2">dxy-col-2</div>
    <div class="dxy-col-3">dxy-col-3</div>
    <div class="dxy-col-5">dxy-col-5</div>
    <div class="dxy-col-7">dxy-col-7</div>
  </div>
</div>

查看代码

组合

我们按尺寸划分不同的屏幕设备，提供对应的栅格栏，对照如下：
.dxy-col-*: 无
.dxy-col-sm-*: @media (min-width: 576px)
.dxy-col-md-*: @media (min-width: 768px)
.dxy-col-lg-*: @media (min-width: 992px)
以上可组合使用，以适配不同大小的屏幕设备。

dxy-col-12
dxy-col-lg-3
dxy-col-md-4
dxy-col-sm-1

dxy-col-12
dxy-col-lg-3
dxy-col-md-3
dxy-col-sm-2

dxy-col-12
dxy-col-lg-3
dxy-col-md-2
dxy-col-sm-3

dxy-col-12
dxy-col-lg-3
dxy-col-md-1
dxy-col-sm-4

<div class="dxy-container">
  <div class="dxy-row">
    <div class="dxy-col-12 dxy-col-lg-3 dxy-col-md-5 dxy-col-sm-1">
      dxy-col-12<br>dxy-col-lg-3<br>dxy-col-md-4<br>dxy-col-sm-1
    </div>
    <div class="dxy-col-12 dxy-col-lg-3 dxy-col-md-4 dxy-col-sm-2">
      dxy-col-12<br>dxy-col-lg-3<br>dxy-col-md-3<br>dxy-col-sm-2
    </div>
    <div class="dxy-col-12 dxy-col-lg-3 dxy-col-md-2 dxy-col-sm-4">
      dxy-col-12<br>dxy-col-lg-3<br>dxy-col-md-2<br>dxy-col-sm-3
    </div>
    <div class="dxy-col-12 dxy-col-lg-3 dxy-col-md-1 dxy-col-sm-5">
      dxy-col-12<br>dxy-col-lg-3<br>dxy-col-md-1<br>dxy-col-sm-4
    </div>
  </div>
</div>

查看代码

填充

可使用.dxy-col来填充一行（.dxy-row）中剩余的空间。

dxy-col

dxy-col-1

dxy-col

dxy-col-2

dxy-col-4

<div class="dxy-container">
  <div class="dxy-row">
    <div class="dxy-col">dxy-col</div>
    <div class="dxy-col">dxy-col</div>
    <div class="dxy-col">dxy-col</div>
    <div class="dxy-col">dxy-col</div>
  </div>
  <div class="dxy-row">
    <div class="dxy-col-1">dxy-col-1</div>
    <div class="dxy-col-1">dxy-col-1</div>
    <div class="dxy-col">dxy-col</div>
  </div>
  <div class="dxy-row">
    <div class="dxy-col">dxy-col</div>
    <div class="dxy-col-2">dxy-col-2</div>
    <div class="dxy-col-4">dxy-col-4</div>
  </div>
</div>

查看代码

列偏移

使用.dxy-offset-*、.dxy-offset-sm-*、.dxy-offset-md-*、.dxy-offset-lg-*类可以将列向右侧偏移 n 列。

dxy-col-2

dxy-col-2
dxy-offset-3

dxy-col-2
dxy-offset-2

dxy-col-md-1

dxy-col-md-3
dxy-offset-md-3

<div class="dxy-container">
  <div class="dxy-row">
    <div class="dxy-col-2">dxy-col-2</div>
    <div class="dxy-col-2 dxy-offset-3">dxy-col-2<br>dxy-offset-3</div>
    <div class="dxy-col-2 dxy-offset-2">dxy-col-2<br>dxy-offset-2</div>
  </div>
  <div class="dxy-row">
    <div class="dxy-col-md-3">dxy-col-md-1</div>
    <div class="dxy-col-md-3 dxy-offset-md-3">dxy-col-md-3<br>dxy-offset-md-3</div>
  </div>
</div>

查看代码

提供按钮样式，可用在<button>、<input>和<a>标签。

链接

<button type="button" class="dxy-btn">按钮</button>
<input type="button" value="提交" class="dxy-btn">
<a href="#" class="dxy-btn">链接</a>

查看代码

多个尺寸

提供其他尺寸的按钮样式，使用lg、sm和xs区分。

<button type="button" class="dxy-btn dxy-btn-lg">大按钮</button>
<button type="button" class="dxy-btn">普通按钮</button>
<button type="button" class="dxy-btn dxy-btn-sm">小按钮</button>
<button type="button" class="dxy-btn dxy-btn-xs">超小按钮</button>

查看代码

情景色

提供在不同情景下的按钮样式。

<button type="button" class="dxy-btn dxy-btn-primary">主要按钮</button>
<button type="button" class="dxy-btn dxy-btn-success">成功</button>
<button type="button" class="dxy-btn dxy-btn-info">一般信息</button>
<button type="button" class="dxy-btn dxy-btn-warning">警告</button>
<button type="button" class="dxy-btn dxy-btn-danger">危险</button>

查看代码

链接/文字

当按钮是链接或文字时可用无边框和文字颜色突出的按钮。如果不想使用按钮的形态，去掉.dxy-btn类即可，只使用.dxy-btn-link。

只是链接
链接按钮

<a href="#" class="dxy-btn-link">只是链接</a>
<br>
<button type="button" class="dxy-btn dxy-btn-link">文字按钮</button>
<a href="#" class="dxy-btn dxy-btn-link">链接按钮</a>

查看代码

禁用状态

提供按钮或链接禁用的样式，支持.disabled或disabled属性。

链接

<button type="button" class="dxy-btn" disabled>基本按钮</button>
<button type="button" class="dxy-btn dxy-btn-danger" disabled>情景按钮</button>
<button type="button" class="dxy-btn dxy-btn-link" disabled>链接</button>
<a href="####" class="dxy-btn dxy-btn-link disabled">链接</a>

查看代码

基本表格是横线边框的样式。

ID	姓名	性别	兴趣
1	马克	mark	漫画
2	武冬至	dong	coding
3	夏夏	luna	算法

<table class="dxy-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>性别</th>
      <th>兴趣</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>马克</td>
      <td>mark</td>
      <td>漫画</td>
    </tr>
    <tr>
      <td>2</td>
      <td>武冬至</td>
      <td>dong</td>
      <td>coding</td>
    </tr>
    <tr>
      <td>3</td>
      <td>夏夏</td>
      <td>luna</td>
      <td>算法</td>
    </tr>
  </tbody>
</table>

查看代码

鼠标悬停

鼠标悬停时，表格的行会出现背景色。

ID	姓名	性别	兴趣
1	马克	mark	漫画
2	武冬至	dong	coding
3	夏夏	luna	算法

<table class="dxy-table dxy-hover">
  <thead>
  <tr>
    <th>ID</th>
    <th>姓名</th>
    <th>性别</th>
    <th>兴趣</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>马克</td>
    <td>mark</td>
    <td>漫画</td>
  </tr>
  <tr>
    <td>2</td>
    <td>武冬至</td>
    <td>dong</td>
    <td>coding</td>
  </tr>
  <tr>
    <td>3</td>
    <td>夏夏</td>
    <td>luna</td>
    <td>算法</td>
  </tr>
  </tbody>
</table>

查看代码

条纹状

间隔行有背景色，让每一行更有区分度。

ID	姓名	性别	兴趣
1	马克	mark	漫画
2	武冬至	dong	coding
3	夏夏	luna	算法

<table class="dxy-table dxy-striped">
  <thead>
  <tr>
    <th>ID</th>
    <th>姓名</th>
    <th>性别</th>
    <th>兴趣</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>马克</td>
    <td>mark</td>
    <td>漫画</td>
  </tr>
  <tr>
    <td>2</td>
    <td>武冬至</td>
    <td>dong</td>
    <td>coding</td>
  </tr>
  <tr>
    <td>3</td>
    <td>夏夏</td>
    <td>luna</td>
    <td>算法</td>
  </tr>
  </tbody>
</table>

查看代码

全边框

每个单元格都有边框的表格样式。

ID	姓名	性别	兴趣
1	马克	mark	漫画
2	武冬至	dong	coding
3	夏夏	luna	算法

<table class="dxy-table dxy-bordered">
  <thead>
  <tr>
    <th>ID</th>
    <th>姓名</th>
    <th>性别</th>
    <th>兴趣</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>马克</td>
    <td>mark</td>
    <td>漫画</td>
  </tr>
  <tr>
    <td>2</td>
    <td>武冬至</td>
    <td>dong</td>
    <td>coding</td>
  </tr>
  <tr>
    <td>3</td>
    <td>夏夏</td>
    <td>luna</td>
    <td>算法</td>
  </tr>
  </tbody>
</table>

查看代码

无边框

另外提供了无边框的表格，可用在某些布局场景。

ID	姓名	性别	兴趣
1	马克	mark	漫画
2	武冬至	dong	coding
3	夏夏	luna	算法

<table class="dxy-table dxy-no-border">
  <thead>
  <tr>
    <th>ID</th>
    <th>姓名</th>
    <th>性别</th>
    <th>兴趣</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>马克</td>
    <td>mark</td>
    <td>漫画</td>
  </tr>
  <tr>
    <td>2</td>
    <td>武冬至</td>
    <td>dong</td>
    <td>coding</td>
  </tr>
  <tr>
    <td>3</td>
    <td>夏夏</td>
    <td>luna</td>
    <td>算法</td>
  </tr>
  </tbody>
</table>

查看代码

给表单添加.dxy-form类，每一个表单项使用.dxy-form-group类，这样可以使每个表单项独占一行。

<form class="dxy-form">
  <div class="dxy-form-group">
    <label class="dxy-label">姓名</label>
    <div class="dxy-form-content">
      <input type="text" class="dxy-input" placeholder="姓名">
    </div>
  </div>
  <div class="dxy-form-group">
    <label class="dxy-label">性别</label>
    <div class="dxy-form-content">
      <select class="dxy-select">
        <option value="">请选择</option>
        <option value="male">男</option>
        <option value="female">女</option>
        <option value="other">其他</option>
      </select>
    </div>
  </div>
  <div class="dxy-form-group">
    <label class="dxy-label">个人简介</label>
    <div class="dxy-form-content">
      <textarea class="dxy-textarea" rows="3"></textarea>
    </div>
  </div>
</form>

查看代码

行内表单

给表单添加.dxy-form-inline类，使用.dxy-form-group类的表单项会变成inline-block。

<form class="dxy-form-inline">
  <div class="dxy-form-group">
    <label class="dxy-label">姓名</label>
    <div class="dxy-form-content">
      <input type="text" class="dxy-input" placeholder="姓名">
    </div>
  </div>
  <div class="dxy-form-group">
    <label class="dxy-label">性别</label>
    <div class="dxy-form-content">
      <input type="text" class="dxy-input">
    </div>
  </div>
</form>

查看代码

label

提供了行内标签和单行标签两种形式。

行内标签

单行标签

<div>
  <label class="dxy-label">行内标签</label>
  <div class="dxy-form-content justify">
    <input type="text" class="dxy-input" placeholder="内容">
  </div>
</div>
<div>
  <label class="dxy-label-block">单行标签</label>
  <input type="text" class="dxy-input justify" placeholder="内容">
</div>

查看代码

输入框

输入框有固定宽度和100%宽度两种样式，两者都有readonly和disabled状态。

<input class="dxy-input" placeholder="auto">
<input class="dxy-input justify" placeholder="justify">
<input class="dxy-input" placeholder="readonly" readonly>
<input class="dxy-input" placeholder="disabled" disabled>

查看代码

文本框

文本框和输入框类似，有两种宽度和readonly和disabled两种状态，用于多行文本输入，竖直方向可拉伸。

<textarea class="dxy-textarea" placeholder="auto"></textarea>
<textarea class="dxy-textarea justify" placeholder="justify"></textarea>
<textarea class="dxy-textarea" placeholder="readonly" readonly></textarea>
<textarea class="dxy-textarea" placeholder="disabled" disabled></textarea>

查看代码

单选框

美化了原生的单选框，提供行内和单行两种样式。

<form>
  <label class="dxy-radio">
    <input type="radio" name="test">
    <span>单选框</span>
  </label>
  <label class="dxy-radio">
    <input type="radio" checked name="test">
    <span>选中</span>
  </label>
  <label class="dxy-radio">
    <input type="radio" disabled>
    <span>禁用</span>
  </label>
  <label class="dxy-radio">
    <input type="radio" checked disabled>
    <span>选中&禁用</span>
  </label>
  <label class="dxy-radio-block">
    <input type="radio" name="test">
    <span>块级单选框</span>
  </label>
  <label class="dxy-radio-block">
    <input type="radio" name="test">
    <span>建议文字过长时使用 .dxy-radio-block，避免出现左边的间距。当文字过长需要换行时，单选框还是保持原来的位置，文字正常换行带缩进。当文字过长需要换行时，单选框还是保持原来的位置，文字正常换行带缩进。</span>
  </label>
</form>

<h4>配合表单label使用</h4>
<form class="dxy-form">
  <div class="dxy-form-group">
    <label class="dxy-label">性别</label>
    <div class="dxy-form-content">
      <label class="dxy-radio">
        <input type="radio" name="gender">
        <span>男</span>
      </label>
      <label class="dxy-radio">
        <input type="radio" name="gender">
        <span>女</span>
      </label>
    </div>
  </div>
  <div class="dxy-form-group">
    <label class="dxy-label">性别</label>
    <div class="dxy-form-content">
      <label class="dxy-radio-block">
        <input type="radio" name="gender">
        <span>男</span>
      </label>
      <label class="dxy-radio-block">
        <input type="radio" name="gender">
        <span>女</span>
      </label>
    </div>
  </div>
</form>

查看代码

复选框

美化了原生的复选框，提供行内和单行两种样式。

<form>
  <label class="dxy-checkbox">
    <input type="checkbox">
    <span>复选框</span>
  </label>
  <label class="dxy-checkbox">
    <input type="checkbox" checked>
    <span>选中</span>
  </label>
  <label class="dxy-checkbox">
    <input type="checkbox" disabled>
    <span>禁用</span>
  </label>
  <label class="dxy-checkbox">
    <input type="checkbox" checked disabled>
    <span>选中&禁用</span>
  </label>
  <label class="dxy-checkbox-block">
    <input type="checkbox">
    <span>块级复选框</span>
  </label>
  <label class="dxy-checkbox-block">
    <input type="checkbox">
    <span>建议文字过长时使用 .dxy-checkbox-block，避免出现左边的间距。当文字过长需要换行时，复选框还是保持原来的位置，文字正常换行带缩进。当文字过长需要换行时，复选框还是保持原来的位置，文字正常换行带缩进。</span>
  </label>
</form>

<h4>配合表单label使用</h4>
<form class="dxy-form">
  <div class="dxy-form-group">
    <label class="dxy-label">喜欢的水果</label>
    <div class="dxy-form-content">
      <label class="dxy-checkbox">
        <input type="checkbox">
        <span>苹果</span>
      </label>
      <label class="dxy-checkbox">
        <input type="checkbox">
        <span>西瓜</span>
      </label>
    </div>
  </div>
  <div class="dxy-form-group">
    <label class="dxy-label">喜欢的水果</label>
    <div class="dxy-form-content">
      <label class="dxy-checkbox-block">
        <input type="checkbox">
        <span>苹果</span>
      </label>
      <label class="dxy-checkbox-block">
        <input type="checkbox">
        <span>西瓜</span>
      </label>
    </div>
  </div>
</form>

查看代码

下拉框

美化了原生的select，包括有multiple属性的多选select。提供了自适应宽度和100%宽度。

单选下拉框

多选下拉框

<h4>单选下拉框</h4>
<select class="dxy-select">
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  <option>选项4</option>
  <option>选项5</option>
  <option>选项6</option>
</select>

<select class="dxy-select justify">
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  <option>选项4</option>
  <option>选项5</option>
  <option>选项6</option>
</select>

<h4>多选下拉框</h4>
<select class="dxy-select" multiple>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  <option>选项4</option>
  <option>选项5</option>
  <option>选项6</option>
</select>

<select class="dxy-select justify" multiple>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  <option>选项4</option>
  <option>选项5</option>
  <option>选项6</option>
</select>

查看代码

表单校验

提供表单校验错误的样式，结合.dxy-validate-error和提示文本.dxy-help-inline或.dxy-help-block使用。

<form class="dxy-form">
  <div class="dxy-form-group">
    <label class="dxy-label">姓名</label>
    <div class="dxy-form-content dxy-validate-error">
      <input type="text" id="dui-input" class="dxy-input">
      <span class="dxy-help-inline">请输入姓名</span>
    </div>
  </div>
  <div class="dxy-form-group">
    <label class="dxy-label">下拉框</label>
    <div class="dxy-form-content dxy-validate-error">
      <select class="dxy-select" multiple>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <option>选项4</option>
        <option>选项5</option>
        <option>选项6</option>
      </select>
      <span class="dxy-help-block">错误校验</span>
    </div>
  </div>
</form>

查看代码

辅助和修饰

高亮

中划线

下划线

对齐

文字靠左

文字居中

文字靠右

文字不加修饰：一段中文的测试文本一段中文的测试文本一段中文的测试文本。The common situation is that the words in the English sentence can not be aligned, so we test the situation in English. The common situation is that the words in the English sentence can not be aligned, so we test the situation in English.

文字两端对齐：一段中文的测试文本一段中文的测试文本一段中文的测试文本。The common situation is that the words in the English sentence can not be aligned, so we test the situation in English. The common situation is that the words in the English sentence can not be aligned, so we test the situation in English.

字母大小写

字母小写 HELLO WORD

字母大写 hello word

首字母大写 hello word

文字截断

截断文字(需要设定宽度)文字

<p class="dxy-highlight">高亮</p>
<p class="dxy-text-through">中划线</p>
<p class="dxy-text-underline">下划线</p>
<hr>
<h4>对齐</h4>
<p class="dxy-text-left">文字靠左</p>
<p class="dxy-text-center">文字居中</p>
<p class="dxy-text-right">文字靠右</p>
<p>文字不加修饰：一段中文的测试文本一段中文的测试文本一段中文的测试文本。The common situation is that the words in the English sentence can not be aligned, so we test the situation in English. The common situation is that the words in the English sentence can not be aligned, so we test the situation in English.</p>
<p class="dxy-text-justify">文字两端对齐：一段中文的测试文本一段中文的测试文本一段中文的测试文本。The common situation is that the words in the English sentence can not be aligned, so we test the situation in English. The common situation is that the words in the English sentence can not be aligned, so we test the situation in English.</p>
<hr>
<h4>字母大小写</h4>
<p class="dxy-lowercase">字母小写 HELLO WORD</p>
<p class="dxy-uppercase">字母大写 hello word</p>
<p class="dxy-capitalize">首字母大写 hello word</p>
<hr>
<h4>文字截断</h4>
<p class="dxy-overflow-ellipsis" style="width: 160px;">截断文字(需要设定宽度)文字</p>

查看代码

文字状态颜色

active

success

info

warning

danger

背景状态颜色

active

success

info

warning

danger

<h4>文字状态颜色</h4>
<p class="dxy-font-active">active</p>
<p class="dxy-font-success">success</p>
<p class="dxy-font-info">info</p>
<p class="dxy-font-warning">warning</p>
<p class="dxy-font-danger">danger</p>

<h4>背景状态颜色</h4>
<p class="dxy-bg-active">active</p>
<p class="dxy-bg-success">success</p>
<p class="dxy-bg-info">info</p>
<p class="dxy-bg-warning">warning</p>
<p class="dxy-bg-danger">danger</p>

查看代码

边框

上边框

右边框

下边框

左边框

<div class="dxy-border">边框</div>
<div class="dxy-border-top">上边框</div>
<div class="dxy-border-right">右边框</div>
<div class="dxy-border-bottom">下边框</div>
<div class="dxy-border-left">左边框</div>

查看代码

圆角

顶部圆角

右侧圆角

底部圆角

左侧圆角

<div class="dxy-border dxy-border-radius">圆角</div>
<div class="dxy-border dxy-border-top-radius">顶部圆角</div>
<div class="dxy-border dxy-border-right-radius">右侧圆角</div>
<div class="dxy-border dxy-border-bottom-radius">底部圆角</div>
<div class="dxy-border dxy-border-left-radius">左侧圆角</div>

查看代码

外边距 margin

提供了4组值的margin值，分别是10px、15px、20px、30px，包括top、right、bottom和left4个方向，使用dxy-mg10、dxy-mg10-top等类名，详见下例。

dxy-mg10

dxy-mg10-bottom

dxy-mg10-left

dxy-mg10-right

dxy-mg10-top

dxy-mg15

dxy-mg20

dxy-mg30

<div class="dxy-border">
  <div class="dxy-mg10">dxy-mg10</div>
  <div class="dxy-mg10-bottom">dxy-mg10-bottom</div>
  <div class="dxy-mg10-left">dxy-mg10-left</div>
  <div class="dxy-mg10-right">dxy-mg10-right</div>
  <div class="dxy-mg10-top">dxy-mg10-top</div>
  <div class="dxy-mg15">dxy-mg15</div>
  <div class="dxy-mg20">dxy-mg20</div>
  <div class="dxy-mg30">dxy-mg30</div>
</div>

查看代码

内边距 padding

提供了4组值的padding值，分别是10px、15px、20px、30px，包括top、right、bottom和left4个方向，使用dxy-pd10、dxy-pd10-top等类名，详见下例。

dxy-pd10

dxy-pd10-bottom

dxy-pd10-left

dxy-pd10-right 示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例

dxy-pd10-top

dxy-pd15

dxy-pd20

dxy-pd30

<div class="dxy-pd10">dxy-pd10</div>
<div class="dxy-pd10-bottom">dxy-pd10-bottom</div>
<div class="dxy-pd10-left">dxy-pd10-left</div>
<div class="dxy-pd10-right">dxy-pd10-right 示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例</div>
<div class="dxy-pd10-top">dxy-pd10-top</div>
<div class="dxy-pd15">dxy-pd15</div>
<div class="dxy-pd20">dxy-pd20</div>
<div class="dxy-pd30">dxy-pd30</div>

查看代码

提供左浮动和右浮动，分别使用.dxy-float-left、.dxy-float-right，在容器中使用.dxy-float-left类可以清除浮动。

左浮动

（左浮动后面的内容）

右浮动

（右浮动后面的内容）

左浮动

清除浮动了！

<div>
    <p class="dxy-float-left">左浮动</p>
    <p>（左浮动后面的内容）</p>
    <p class="dxy-float-right">右浮动</p>
    <p>（右浮动后面的内容）</p>
</div>
<div class="dxy-clear-fix">
    <p class="dxy-float-left">左浮动</p>
</div>
<p>清除浮动了！</p>

查看代码

组件

将按钮组合在同个容器内，自定义各个按钮的状态与功能。

<div class="dxy-btn-group">
	<button type="button" class="dxy-btn">Middle</button>
	<button type="button" class="dxy-btn ">Left</button>
</div>
<div class="dxy-btn-group">
	<button type="button" disabled class="dxy-btn">Middle</button>
	<button type="button" class="dxy-btn ">Left</button>
</div>
<div class="dxy-btn-group">
	<button type="button" class="dxy-btn">Middle</button>
	<button type="button" class="dxy-btn dxy-btn-primary">Left</button>
</div>
<div class="dxy-btn-group">
	<button type="button" disabled class="dxy-btn dxy-btn-primary">Left</button>
	<button type="button" class="dxy-btn dxy-btn-primary">Middle</button>
</div>
<div class="dxy-btn-group">
	<button type="button" class="dxy-btn dxy-btn-primary">Left</button>
	<button type="button" class="dxy-btn dxy-btn-primary">Middle</button>
</div>

查看代码

多个按钮

假设你需要，可以更改按钮数量。

<div class="dxy-btn-group">
	<button type="button" class="dxy-btn ">Left</button>
	<button type="button" disabled class="dxy-btn">Middle</button>
	<button type="button" class="dxy-btn ">Right</button>
</div>
<div class="dxy-btn-group">
	<button type="button" class="dxy-btn dxy-btn-primary">Left</button>
	<button type="button" disabled class="dxy-btn">Middle</button>
	<button type="button" class="dxy-btn dxy-btn-primary">Right</button>
</div>

<div class="dxy-btn-group">
	<button type="button" class="dxy-btn dxy-btn-primary">Left</button>
	<button type="button" class="dxy-btn dxy-btn-primary">Middle</button>
	<button type="button" class="dxy-btn dxy-btn-primary">Middle</button>
	<button type="button" class="dxy-btn dxy-btn-primary">Right</button>
</div>

查看代码

竖直方向

按钮数量，按钮状态一样可以自定义。

<div class="dxy-btn-group-vertical">
	<button type="button" class="dxy-btn dxy-btn-primary">Left</button>
	<button type="button" disabled class="dxy-btn dxy-btn-primary">Middle</button>
	<button type="button" class="dxy-btn ">Right</button>
</div>
<div class="dxy-btn-group-vertical">
	<button type="button" class="dxy-btn dxy-btn-primary">Left</button>
	<button type="button" disabled class="dxy-btn dxy-btn-primary">Middle</button>
	<button type="button" class="dxy-btn dxy-btn-primary">Middle</button>
	<button type="button" class="dxy-btn ">Right</button>
</div>

查看代码

对文本输入框进行扩展，添加所需要的文本标签或按钮。

.00

<div class="dxy-input-group">
	<span class="dxy-input-group-addon">$</span>
	<input type="text" class="dxy-input" />
</div>
<div class="dxy-input-group">
	<input type="text" class="dxy-input" />
	<span class="dxy-input-group-addon">.00</span>
</div>

查看代码

与按钮组合

按钮可以是<button>、<a>或<input>标签。

<div class="dxy-input-group">
    <input type="text" class="dxy-input"/>
    <span class="dxy-input-group-btn">
        <button class="dxy-btn dxy-btn-primary" type="button">搜索</button>
    </span>
</div>
<div class="dxy-input-group">
    <span class="dxy-input-group-btn">
        <input class="dxy-btn dxy-btn-primary" type="button" value="搜索">
    </span>
    <input type="text" class="dxy-input"/>
</div>

查看代码

多项组合

$.00

<div class="dxy-input-group">
    <span class="dxy-input-group-addon">$</span>
    <input type="text" class="dxy-input"/>
    <span class="dxy-input-group-btn">
        <input class="dxy-btn dxy-btn-primary" type="button" value="搜索">
    </span>
</div>
<div class="dxy-input-group">
    <span class="dxy-input-group-btn">
        <input class="dxy-btn dxy-btn-primary" type="button" value="搜索">
    </span>
    <input type="text" class="dxy-input"/>
    <span class="dxy-input-group-addon">$</span>
</div>
<div class="dxy-input-group">
    <span class="dxy-input-group-addon">$</span>
    <input type="text" class="dxy-input"/>
    <span class="dxy-input-group-addon">.00</span>
</div>

查看代码

具有搜索功能的下拉选择框，需结合JavaScript实现。

西瓜
苹果
梨子
香蕉
桔子
榴莲
葡萄
桃子

<div style="width: 150px">
    <div class="dxy-search-select">
        <input class="dxy-search-input" placeholder="请选择"/>
        <i class="dxy-search-input-icon dxy-icon dxy-icon-arrow-down-fill"></i>
        <ul class="dxy-select-list">
            <li>西瓜</li>
            <li class="dxy-active">苹果</li>
            <li>梨子</li>
            <li>香蕉</li>
            <li>桔子</li>
            <li>榴莲</li>
            <li>葡萄</li>
            <li>桃子</li>
        </ul>
    </div>
</div>

查看代码

多选

提供多选功能，已选中项以标签显示在搜索框上。

西瓜苹果香蕉桔子葡萄

西瓜
苹果
梨子
香蕉
桔子
榴莲
葡萄
桃子

<div style="width: 300px">
    <div class="dxy-search-select-multiple">
        <div class="dxy-search-input">
            <div class="dxy-tags">
                <span class="dxy-tag">西瓜<a class="dxy-icon dxy-icon-close"></a></span>
                <span class="dxy-tag">苹果<a class="dxy-icon dxy-icon-close"></a></span>
                <span class="dxy-tag">香蕉<a class="dxy-icon dxy-icon-close"></a></span>
                <span class="dxy-tag">桔子<a class="dxy-icon dxy-icon-close"></a></span>
                <span class="dxy-tag">葡萄<a class="dxy-icon dxy-icon-close"></a></span>
                <input type="text" class="dxy-cursor">
            </div>
        </div>
        <i class="dxy-search-input-icon"></i>
        <ul class="dxy-select-list">
            <li>西瓜</li>
            <li class="dxy-active">苹果</li>
            <li>梨子</li>
            <li>香蕉</li>
            <li>桔子</li>
            <li>榴莲</li>
            <li>葡萄</li>
            <li>桃子</li>
        </ul>
    </div>
</div>

查看代码

提供多种颜色。

C101C101C101C101C101

<label class="dxy-tag">C101</label>
<label class="dxy-tag dxy-tag-blue">C101</label>
<label class="dxy-tag dxy-tag-green">C101</label>
<label class="dxy-tag dxy-tag-orange">C101</label>
<label class="dxy-tag dxy-tag-red">C101</label>

查看代码

可删除

带删除按钮的标签。

C101C101C101C101C101

<label class="dxy-tag">C101<a class="dxy-icon dxy-icon-close"></a></label>
<label class="dxy-tag dxy-tag-blue">C101<a class="dxy-icon dxy-icon-close"></a></label>
<label class="dxy-tag dxy-tag-green">C101<a class="dxy-icon dxy-icon-close"></a></label>
<label class="dxy-tag dxy-tag-orange">C101<a class="dxy-icon dxy-icon-close"></a></label>
<label class="dxy-tag dxy-tag-red">C101<a class="dxy-icon dxy-icon-close"></a></label>

查看代码

徽章

使用醒目的颜色，可用于展示未读消息等。

288

<i class="dxy-badge">2</i>
<i class="dxy-badge">88</i>

查看代码

用于标记提示，提供四个方向可选择。

一个提示

<div class="dxy-tip left">一个提示</div>
<div class="dxy-tip right">一个提示</div>
<div class="dxy-tip top">一个提示</div>
<div class="dxy-tip bottom">一个提示</div>

查看代码

可以自定义内容，分为标题和主体内容。

标题

一段文字

标题

一段文字

标题

一段文字

标题

一段文字

标题

一段文字一段文字

<div class="dxy-pop">
	<h5 class="dxy-pop-head">标题</h5>
	<div class="dxy-pop-body">
		<p>一段文字</p>
	</div>
</div>
<div class="dxy-pop left">
	<h5 class="dxy-pop-head">标题</h5>
	<div class="dxy-pop-body">
		<p>一段文字</p>
	</div>
</div>
<div class="dxy-pop right">
	<h5 class="dxy-pop-head">标题</h5>
	<div class="dxy-pop-body">
		<p>一段文字</p>
	</div>
</div>
<div class="dxy-pop top">
	<h5 class="dxy-pop-head">标题</h5>
	<div class="dxy-pop-body">
		<p>一段文字</p>
		<p>一段文字</p>
	</div>
</div>
<div class="dxy-pop bottom">
	<h5 class="dxy-pop-head">标题</h5>
	<div class="dxy-pop-body">
		<p>一段文字一段文字</p>
		<p>一段文字一段文字</p>
	</div>
</div>

查看代码

一般用于代替浏览器原生的alert，提供四种色值在不同场景使用。

info text

success text

warning text

error text

<div class="dxy-alert-info">
	<span>info text</span>
</div>
<div class="dxy-alert-success">
	<span>success text</span></div>
<div class="dxy-alert-warning">
	<span>warning text</span>
</div>
<div class="dxy-alert-error">
	<span>error text</span>
</div>

查看代码

可关闭

info text

success text

warning text

error text

<div class="dxy-alert-info">
	<span>info text</span>
	<button class="dxy-icon dxy-icon-close close"></button>
</div>
<div class="dxy-alert-success">
	<span>success text</span>
	<button class="dxy-icon dxy-icon-close close"></button>
</div>
<div class="dxy-alert-warning">
	<span>warning text</span>
	<button class="dxy-icon dxy-icon-close close"></button>
</div>
<div class="dxy-alert-error">
	<span>error text</span>
	<button class="dxy-icon dxy-icon-close close"></button>
</div>

查看代码

带图标

info text

success text

warning text

error text

<div class="dxy-alert-info">
	<i class="dxy-icon dxy-icon-info"></i>
	<span>info text</span>
</div>
<div class="dxy-alert-success">
	<i class="dxy-icon dxy-icon-check-circle"></i>
	<span>success text</span>
</div>
<div class="dxy-alert-warning">
	<i class="dxy-icon dxy-icon-warning-circle"></i>
	<span>warning text</span>
</div>
<div class="dxy-alert-error">
	<i class="dxy-icon dxy-icon-close-circle"></i>
	<span>error text</span>
</div>

查看代码

带图标和关闭

info text

success text

warning text

error text

<div class="dxy-alert-info">
	<i class="dxy-icon dxy-icon-info"></i>
	<span>info text</span>
	<button class="dxy-icon dxy-icon-close close"></button>
</div>
<div class="dxy-alert-success">
	<i class="dxy-icon dxy-icon-check-circle"></i>
	<span>success text</span>
	<button class="dxy-icon dxy-icon-close close"></button>
</div>
<div class="dxy-alert-warning">
	<i class="dxy-icon dxy-icon-warning-circle"></i>
	<span>warning text</span>
	<button class="dxy-icon dxy-icon-close close"></button>
</div>
<div class="dxy-alert-error">
	<i class="dxy-icon dxy-icon-close-circle"></i>
	<span>error text</span>
	<button class="dxy-icon dxy-icon-close close"></button>
</div>

查看代码

一般用于代替浏览器原生的confirm，可添加标题与主体文案。可使用.dxy-mask添加背景遮罩层。

提示

是否确认离开该页面？

<div class="dxy-confirm">
	<div class="dxy-confirm-head">
		<h4>提示</h4>
		<button class="close"><i class="dxy-icon dxy-icon-close"></i></button>
	</div>
	<div class="dxy-confirm-body">
		是否确认离开该页面？
	</div>
	<div class="dxy-confirm-foot">
		<button class="dxy-btn">取消</button>
		<button class="dxy-btn dxy-btn-primary">确定</button>
	</div>
</div>
<div class="dxy-mask"></div>

查看代码

显示一块单独的内容，自定义标题与主体内容，主体内容可以是表单，表格等。可使用.dxy-mask添加背景遮罩层。

<div class="dxy-modal">
	<div class="dxy-modal-head">
		<h4>权限申请</h4>
		<button class="close"><i class="dxy-icon dxy-icon-close"></i></button>
	</div>
	<div class="dxy-modal-body">
		<p>这是一段内容...</p>
		<p>这是一段内容...</p>
		<p>这是一段内容...</p>
		<p>这是一段内容...</p>
	</div>
</div>

查看代码

基本导航栏样式较简单，所有项在一行。提供了多种形式的导航栏，还有面包屑和下拉菜单。

<ul class="dxy-nav">
  <li class="dxy-active"><a href="#">首页</a></li>
  <li><a href="#">推荐</a></li>
  <li><a href="#">帮助</a></li>
</ul>

查看代码

标签式

<ul class="dxy-nav dxy-nav-tab">
  <li class="dxy-active"><a href="#">首页</a></li>
  <li><a href="#">推荐</a></li>
  <li><a href="#">帮助</a></li>
</ul>

查看代码

胶囊式

<ul class="dxy-nav dxy-nav-pill">
  <li class="dxy-active"><a href="#">首页</a></li>
  <li><a href="#">推荐</a></li>
  <li><a href="#">帮助</a></li>
</ul>

查看代码

垂直胶囊式

<ul class="dxy-nav dxy-nav-pill-vertical">
  <li class="dxy-active"><a href="#">首页</a></li>
  <li><a href="#">推荐</a></li>
  <li><a href="#">帮助</a></li>
</ul>

查看代码

面包屑

<ul class="dxy-nav dxy-nav-crumb">
  <li class="dxy-active"><a href="#">首页</a></li>
  <li><a href="#">推荐</a></li>
  <li><a href="#">帮助</a></li>
</ul>

查看代码

下拉菜单

<ul class="dxy-nav dxy-nav-menu">
  <li class="dxy-active"><a href="#">首页</a></li>
  <li><a href="#">推荐</a></li>
  <li><a href="#">帮助</a></li>
</ul>

查看代码

提供带页码的翻页样式，需结合JavaScript实现功能。

1 2 3 4 ...9

<div>
	<div class="dxy-pagination">
		<a href="" class="dxy-pagination-btn"><i class="dxy-icon dxy-icon-arrow-left"></i></a>
		<a href="" class="dxy-pagination-btn">1</a>
		<a href="" class="dxy-pagination-btn dxy-pagination-cur">2</a>
		<a href="" class="dxy-pagination-btn">3</a>
		<a href="" class="dxy-pagination-btn">4</a>
		<a href="javascript:;" class="dxy-pagination-btn dxy-pagination-omit">...</a>
		<a href="" class="dxy-pagination-btn">9</a>
		<!--例：也可支持button标签-->
		<button class="dxy-pagination-btn" disabled>10</button>
		<a href="javascript:;" class="dxy-pagination-btn dxy-pagination-disabled" disabled><i class="dxy-icon dxy-icon-arrow-right"></i></a>
	</div>
</div>

查看代码

无页码

仅提供翻页按钮。

<div>
	<div class="dxy-pagination">
		<a href="" class="dxy-pagination-btn"><i class="dxy-icon dxy-icon-arrow-left"></i></a>
		<a href="" class="dxy-pagination-btn"><i class="dxy-icon dxy-icon-arrow-right"></i></a>
	</div>	
</div>
<div>
	<div class="dxy-pagination">
		<a href="" class="dxy-pagination-btn"><i class="dxy-icon dxy-icon-arrow-left"></i> 上一页</a>
		<a href="" class="dxy-pagination-btn">下一页 <i class="dxy-icon dxy-icon-arrow-right"></i></a>
	</div>	
</div>

查看代码

跳转

可自定义页码进行跳转。

<div>
	<div class="dxy-pagination">
		<div class="dxy-pagination-jump">
			<input type="text" class="dxy-pagination-input" name="" id="" value="" />
			<button class="dxy-pagination-btn dxy-pagination-btn-jump">GO</button>
		</div>
	</div>
</div>

查看代码

点击后返回顶部或指定位置的按钮，提供多个样式。

<a class="dxy-go-top" href="#">
	<i class="dxy-icon dxy-icon-arrow-up-fill"></i>
</a>

<a class="dxy-go-top" href="#">
	<i class="dxy-icon dxy-icon-arrow-up"></i>
</a>

<a class="dxy-go-top" href="#">
	<i class="dxy-icon dxy-icon-arrow-up-underline"></i>
</a>

查看代码

其它颜色/形状

<a class="dxy-go-top dxy-go-top-white" href="#">
	<i class="dxy-icon dxy-icon-arrow-up-underline"></i>
</a>

<a class="dxy-go-top dxy-go-top-square-white" href="#">
	<i class="dxy-icon dxy-icon-arrow-up"></i>
</a>

查看代码

等待数据加载时的动画效果。

被loading盖掉的内容

<div class="loading-box">
	<div class="dxy-loading">
		<div class="dxy-loading-inner">
			<i class="dxy-loading-img dxy-icon dxy-icon-loading"></i>
		</div>
	</div>
	<div>被loading盖掉的内容</div>
	<div class="red">被loading盖掉的内容</div>
</div>

查看代码

带文字

可添加自定义文字提示。

拼命加载中

被loading盖掉的内容

<div class="loading-box">
	<div class="dxy-loading">
		<div class="dxy-loading-inner">
			<i class="dxy-loading-img dxy-icon dxy-icon-loading"></i>
			<p class="dxy-loading-txt">拼命加载中</p>
		</div>
	</div>
	<div>被loading盖掉的内容</div>
	<div class="red">被loading盖掉的内容</div>
</div>

查看代码

为当前动作提供清晰的进度反馈。

70%

100%

80%

<div class="dxy-progress">
  <div class="dxy-progress-bar">
    <div class="dxy-progress-done" style="width: 0;"><span>0%</span></div>
  </div>
</div>

<div class="dxy-progress">
  <div class="dxy-progress-bar">
    <div class="dxy-progress-done" style="width: 70%;"><span>70%</span></div>
  </div>
</div>

<div class="dxy-progress dxy-progress-success">
  <div class="dxy-progress-bar">
    <div class="dxy-progress-done" style="width: 100%;"><span>100%</span></div>
  </div>
</div>

<div class="dxy-progress dxy-progress-fail">
  <div class="dxy-progress-bar">
    <div class="dxy-progress-done" style="width: 80%;"><span>80%</span></div>
  </div>
</div>

查看代码

更细的线条

70%

<div class="dxy-progress-sm">
  <div class="dxy-progress-bar">
    <div class="dxy-progress-done" style="width: 0;"></div>
  </div>
  <span class="dxy-progress-text">0%</span>
</div>

<div class="dxy-progress-sm">
  <div class="dxy-progress-bar">
    <div class="dxy-progress-done" style="width: 70%;"></div>
  </div>
  <span class="dxy-progress-text">70%</span>
</div>

<div class="dxy-progress-sm dxy-progress-success">
  <div class="dxy-progress-bar">
    <div class="dxy-progress-done" style="width: 100%;"></div>
  </div>
  <span class="dxy-progress-text">
    <i class="dxy-icon dxy-icon-check-circle"></i>
  </span>
</div>

<div class="dxy-progress-sm dxy-progress-fail">
  <div class="dxy-progress-bar">
    <div class="dxy-progress-done" style="width: 70%;"></div>
  </div>
  <span class="dxy-progress-text">
    <i class="dxy-icon dxy-icon-close-circle"></i>
  </span>
</div>

查看代码

用于步骤进度提示，或流程展示。

已完成

2进行中

3下一步

4最后一步

<div class="dxy-step-bar">
  <div class="dxy-step-item dxy-step-done">
    <span class="dxy-icon dxy-icon-check-thin"></span>
    已完成
  </div>
  <div class="dxy-step-item dxy-step-active">
    <span>2</span>
    进行中
  </div>
  <div class="dxy-step-item">
    <span>3</span>
    下一步
  </div>
  <div class="dxy-step-item">
    <span>4</span>
    最后一步
  </div>
</div>

查看代码

宽度撑满

步骤条两端撑满整个容器。

1已完成

2进行中

3下一步

4最后一步

<div class="dxy-step-bar-wide">
  <div class="dxy-step-item dxy-step-done">
    <span>1</span>
    已完成
  </div>
  <div class="dxy-step-item dxy-step-active">
    <span>2</span>
    进行中
  </div>
  <div class="dxy-step-item">
    <span>3</span>
    下一步
  </div>
  <div class="dxy-step-item">
    <span>4</span>
    最后一步
  </div>
</div>

查看代码

竖直方向

当步骤较多时，为了更好的观感可以使用竖直方向的步骤条。

1已完成

2进行中

3下一步

4最后一步

<div class="dxy-step-bar-vertical">
  <div class="dxy-step-item dxy-step-done">
    <span>1</span>
    已完成
  </div>
  <div class="dxy-step-item dxy-step-active">
    <span>2</span>
    进行中
  </div>
  <div class="dxy-step-item">
    <span>3</span>
    下一步
  </div>
  <div class="dxy-step-item">
    <span>4</span>
    最后一步
  </div>
</div>

查看代码

多层级的选项卡，自定义层级及内容。

<div class="dxy-tree">
  <div class="dxy-tree-node dxy-tree-expanded">
    <div class="dxy-tree-content">
      <span class="dxy-tree-expand-icon"></span>
      <label class="dxy-checkbox">
        <input type="checkbox" checked>
        <span>parent-1</span>
      </label>
    </div>
    <div class="dxy-tree-children">
      <div class="dxy-tree-node" disabled>
        <div class="dxy-tree-content">
          <span class="dxy-tree-expand-icon"></span>
          <label class="dxy-checkbox">
            <input type="checkbox" checked disabled>
            <span>child-1</span>
          </label>
        </div>
        <div class="dxy-tree-children">
          <div class="dxy-tree-node" disabled>
            <div class="dxy-tree-content">
            <label class="dxy-checkbox">
              <input type="checkbox" checked disabled>
              <span>child-1-1</span>
            </label>
            </div>
          </div>
          <div class="dxy-tree-node">
            <div class="dxy-tree-content">
              <label class="dxy-checkbox">
                <input type="checkbox" checked>
                <span>child-1-2</span>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="dxy-tree-node">
        <div class="dxy-tree-content">
          <label class="dxy-checkbox">
            <input type="checkbox">
            <span>child-2</span>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>

查看代码

文字展示

仅以文字展示关系的多级树。

parent-1

child-1

child-1-1

child-1-2

child-2

<div class="dxy-tree">
  <div class="dxy-tree-node dxy-tree-expanded">
    <div class="dxy-tree-content">
      <span class="dxy-tree-expand-icon"></span>
      <div>parent-1</div>
    </div>
    <div class="dxy-tree-children">
      <div class="dxy-tree-node">
        <div class="dxy-tree-content">
          <span class="dxy-tree-expand-icon"></span>
          <div>child-1</div>
        </div>
        <div class="dxy-tree-children">
            <div class="dxy-tree-node">
              <div class="dxy-tree-content">
                <div>child-1-1</div>
              </div>
            </div>
            <div class="dxy-tree-node">
              <div class="dxy-tree-content">
                <div>child-1-2</div>
              </div>
            </div>
        </div>
      </div>
      <div class="dxy-tree-node">
        <div class="dxy-tree-content">
          <div>child-2</div>
        </div>
      </div>
    </div>
  </div>
</div>

查看代码

基本元素

文本

标题1加粗

标题1

标题2

标题3

标题4

标题5

标题6

列表

水平列表

实心符号列表

空心符号列表

短语列表

水平短语列表

栅格系统

组合

填充

列偏移

按钮

多个尺寸

情景色

链接/文字

禁用状态

表格

鼠标悬停

条纹状

全边框

无边框

表单

行内表单

label

输入框

文本框

单选框

配合表单label使用

复选框

配合表单label使用

下拉框

单选下拉框

多选下拉框

表单校验

辅助和修饰

文本修饰

对齐

字母大小写

文字截断

情景色

文字状态颜色

背景状态颜色

外观

边框

圆角

外边距 margin

内边距 padding

浮动

组件

按钮组

多个按钮

竖直方向

输入框组

与按钮组合

多项组合

下拉选择框

多选

标签

可删除

徽章

气泡提示

内嵌 HTML

标题

标题

标题

标题

标题

警告框

可关闭

带图标

带图标和关闭

确认框