Skip to content

Z
zui

zzx_123123 / zui
与 Fork 源项目一致

Fork自 易企天创 / zui

通知 1
Star 0
Fork 0
Z
zui

体验新版 GitCode，发现更多精彩内容 >>

提交 0d2d7240 编写于 作者: C Catouse
浏览文件
操作

* update document files.

上级 29d0c895
隐藏空白更改
内联 并排
Showing with 179 addition and 174 deletion
assets/css/doc.css
浏览文件 @ 0d2d7240
......@@ -9,6 +9,7 @@ article
margin: 30px auto;
background-color: #fff;
border:1px solid #ddd;
-moz-box-shadow:1px 1px 20px rgba(0,0,0,0.1); -webkit-box-shadow:1px 1px 20px rgba(0,0,0,0.1); box-shadow:1px 1px 20px rgba(0,0,0,0.1);
}
.segment
{
......
examples/buttons.html
浏览文件 @ 0d2d7240
......@@ -10,181 +10,185 @@
<title>ZUI</title>
<link href="../dist/css/zui.css" rel="stylesheet">
<link href="../assets/css/doc.css" rel="stylesheet">
</head>
<body>
<section id="buttons" class="page-section">
<div class="page-header">
<h2>按钮</h2>
</div>
<p>按钮是用来触发一些动作。通常用在表单、对话框、菜单上面。好的按钮设计能够引导用户高效的达到目的。</p>
<h3>按钮的类型</h3>
<p>按钮根据表现形式有如下类型：</p>
<table class="table">
<tr>
<th>按钮</th>
<th>描述</th>
</tr>
<tr>
<td><button class="btn btn-primary">主要按钮</button></td>
<td>指示用户完成当前页面主要操作，例如提交表单，搜索，确认选择等。通常在一个页面里面仅包含一个主要按钮。</td>
</tr>
<tr>
<td><button class="btn btn-default">标准按钮</button></td>
<td>页面上的普通按钮，例如取消表单、重置输入等。</td>
</tr>
<tr>
<td><button class="btn btn-link">链接按钮</button></td>
<td>链接按钮的外观和超链接一样，所不同的是用户点击时不是导向超链接指示的地址，而是触发一个操作。链接按钮通常用于页面上的次要操作，例如取消表单。</td>
</tr>
<tr>
<td>
<div class="btn-group">
<button class="btn btn-default">按钮组</button>
<button class="btn btn-default">第二个</button>
<button class="btn btn-default">第三个</button>
</div>
</td>
<td>按钮组能够将相关的按钮并排展示，并且紧密相邻体现某些共同之处。通常会使用图标来代替按钮上的文字。</td>
</tr>
</table>
<h3>按钮的大小</h3>
<table class="table">
<tr>
<th>实例</th>
<th>描述</th>
</tr>
<tr>
<td>
<button class="btn btn-large btn-primary" type="button">较大的按钮</button>
<button class="btn btn-large" type="button">较大的按钮</button>
</td>
<td>较大的按钮，通常用在英雄页面或者大屏幕中。</td>
</tr>
<tr>
<td>
<button class="btn btn-primary" type="button">默认大小</button>
<button class="btn btn-default" type="button">默认大小</button>
</td>
<td>默认大小</td>
</tr>
<tr>
<td>
<button class="btn btn-small btn-primary" type="button">较小的按钮</button>
<button class="btn btn-small" type="button">较小的按钮</button>
</td>
<td>较小的按钮</td>
</tr>
<tr>
<td>
<button class="btn btn-mini btn-primary" type="button">迷你按钮</button>
<button class="btn btn-mini" type="button">迷你按钮</button>
</td>
<td></td>
</tr>
<tr>
<td>
<button class="btn btn-large btn-block btn-primary" type="button">块状按钮</button>
<button class="btn btn-large btn-block btn-default" type="button">块状按钮</button>
</td>
<td>块状按钮会占据整个水平宽度，适合较窄面板中的重要操作。</td>
</tr>
</table>
<h3>按钮的不同状态</h3>
<table class="table">
<tr>
<th>实例</th>
<th>描述</th>
</tr>
<tr>
<td>
<button class="btn btn-default"><i class="icon-edit"></i> 带图标的按钮</button>
</td>
<td>在按钮上使用图标有时能起到点睛之笔的效果。</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-primary active" data-toggle="button">状态切换按钮</button>
</td>
<td>
状态切换按钮提供一个类似复选框的机制，当点击后切换为选中状态，再次点击取消选中状态。
</td>
</tr>
<tr>
<td>
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</td>
<td>当多个状态切换按钮组成一个按钮组时也就组成了一个状态切换组。其机制同于表单中的多项选择控件（复选框）。</td>
</tr>
<tr>
<td>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</td>
<td>当同一组中的状态切换按钮设置为仅允许有一个按钮为选中状态则组成一个互斥的状态切换组。其机制同于表单中的单项选择控件。</td>
</tr>
<tr>
<td>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-default"><i class="icon-align-left"></i></button>
<button type="button" class="btn btn-default"><i class="icon-align-center"></i></button>
<button type="button" class="btn btn-default"><i class="icon-align-right"></i></button>
</div>
</td>
<td>在互斥的状态切换组中使用图标更加简洁明了。</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-primary" data-loading-text="正在加载...">加载状态</button>
</td>
<td>当一个操作需要花费一定时间时，使用加载按钮会在用户触发后按钮文本更换"正在加载"，直至操作完成。</td>
</tr>
<tr>
<td>
<a href="#" class="btn btn-primary disabled">已禁用的操作</a>
<a href="#" class="btn disabled">禁用的操作</a>
</td>
<td>当按钮指代的操作在某些情景下不可用时这时就要给按钮切换到禁用状态，让用户知道按钮不可点击。</td>
</tr>
</table>
<h3>按钮的颜色</h3>
<p>按钮的颜色赋予按钮以感情色彩能够在视觉上首当其冲的体现按钮的功能意向。例如重要按钮和标准按钮的颜色不同而体现其重要程度。使用更多的颜色来使得目的更加明确，与用户期望一致。</p>
<table class="table">
<tr>
<th>实例</th>
<th>描述</th>
</tr>
<tr>
<td><button type="button" class="btn btn-default">默认</button></td>
<td>带渐变的标准灰色按钮</td>
</tr>
<tr>
<td><button type="button" class="btn btn-primary">主要</button></td>
<td>提供额外的视觉感, 可在一系列的按钮中指出主要操作</td>
</tr>
<tr>
<td><button type="button" class="btn btn-info">信息</button></td>
<td>默认样式的替代样式</td>
</tr>
<tr>
<td><button type="button" class="btn btn-success">成功</button></td>
<td>表示成功或积极的动作</td>
</tr>
<tr>
<td><button type="button" class="btn btn-warning">警告</button></td>
<td>提醒应该谨慎采取这个动作</td>
</tr>
<tr>
<td><button type="button" class="btn btn-danger">危险</button></td>
<td>表示这个动作危险或存在危险</td>
</tr>
</table>
</section>
<article>
<section id="buttons" class="page-section">
<div class="page-header">
<h2>按钮</h2>
</div>
<p>按钮是用来触发一些动作。通常用在表单、对话框、菜单上面。好的按钮设计能够引导用户高效的达到目的。</p>
<h3>按钮的类型</h3>
<p>按钮根据表现形式有如下类型：</p>
<table class="table">
<tr>
<th class="col-md-4">按钮</th>
<th>描述</th>
</tr>
<tr>
<td><button class="btn btn-primary">主要按钮</button></td>
<td>指示用户完成当前页面主要操作，例如提交表单，搜索，确认选择等。通常在一个页面里面仅包含一个主要按钮。</td>
</tr>
<tr>
<td><button class="btn btn-default">标准按钮</button></td>
<td>页面上的普通按钮，例如取消表单、重置输入等。</td>
</tr>
<tr>
<td><button class="btn btn-link">链接按钮</button></td>
<td>链接按钮的外观和超链接一样，所不同的是用户点击时不是导向超链接指示的地址，而是触发一个操作。链接按钮通常用于页面上的次要操作，例如取消表单。</td>
</tr>
<tr>
<td>
<div class="btn-group">
<button class="btn btn-default">按钮组</button>
<button class="btn btn-default">第二个</button>
<button class="btn btn-default">第三个</button>
</div>
</td>
<td>按钮组能够将相关的按钮并排展示，并且紧密相邻体现某些共同之处。通常会使用图标来代替按钮上的文字。</td>
</tr>
</table>
<h3>按钮的大小</h3>
<table class="table">
<tr>
<th>实例</th>
<th>描述</th>
</tr>
<tr>
<td>
<button class="btn btn-large btn-primary" type="button">较大的按钮</button>
<button class="btn btn-large" type="button">较大的按钮</button>
</td>
<td>较大的按钮，通常用在英雄页面或者大屏幕中。</td>
</tr>
<tr>
<td>
<button class="btn btn-primary" type="button">默认大小</button>
<button class="btn btn-default" type="button">默认大小</button>
</td>
<td>默认大小</td>
</tr>
<tr>
<td>
<button class="btn btn-small btn-primary" type="button">较小的按钮</button>
<button class="btn btn-small" type="button">较小的按钮</button>
</td>
<td>较小的按钮</td>
</tr>
<tr>
<td>
<button class="btn btn-mini btn-primary" type="button">迷你按钮</button>
<button class="btn btn-mini" type="button">迷你按钮</button>
</td>
<td></td>
</tr>
<tr>
<td>
<button class="btn btn-large btn-block btn-primary" type="button">块状按钮</button>
<button class="btn btn-large btn-block btn-default" type="button">块状按钮</button>
</td>
<td>块状按钮会占据整个水平宽度，适合较窄面板中的重要操作。</td>
</tr>
</table>
<h3>按钮的不同状态</h3>
<table class="table">
<tr>
<th>实例</th>
<th>描述</th>
</tr>
<tr>
<td>
<button class="btn btn-default"><i class="icon-edit"></i> 带图标的按钮</button>
</td>
<td>在按钮上使用图标有时能起到点睛之笔的效果。</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-primary active" data-toggle="button">状态切换按钮</button>
</td>
<td>
状态切换按钮提供一个类似复选框的机制，当点击后切换为选中状态，再次点击取消选中状态。
</td>
</tr>
<tr>
<td>
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</td>
<td>当多个状态切换按钮组成一个按钮组时也就组成了一个状态切换组。其机制同于表单中的多项选择控件（复选框）。</td>
</tr>
<tr>
<td>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</td>
<td>当同一组中的状态切换按钮设置为仅允许有一个按钮为选中状态则组成一个互斥的状态切换组。其机制同于表单中的单项选择控件。</td>
</tr>
<tr>
<td>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-default"><i class="icon-align-left"></i></button>
<button type="button" class="btn btn-default"><i class="icon-align-center"></i></button>
<button type="button" class="btn btn-default"><i class="icon-align-right"></i></button>
</div>
</td>
<td>在互斥的状态切换组中使用图标更加简洁明了。</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-primary" data-loading-text="正在加载...">加载状态</button>
</td>
<td>当一个操作需要花费一定时间时，使用加载按钮会在用户触发后按钮文本更换"正在加载"，直至操作完成。</td>
</tr>
<tr>
<td>
<a href="#" class="btn btn-primary disabled">已禁用的操作</a>
<a href="#" class="btn disabled">禁用的操作</a>
</td>
<td>当按钮指代的操作在某些情景下不可用时这时就要给按钮切换到禁用状态，让用户知道按钮不可点击。</td>
</tr>
</table>
<h3>按钮的颜色</h3>
<p>按钮的颜色赋予按钮以感情色彩能够在视觉上首当其冲的体现按钮的功能意向。例如重要按钮和标准按钮的颜色不同而体现其重要程度。使用更多的颜色来使得目的更加明确，与用户期望一致。</p>
<table class="table">
<tr>
<th>实例</th>
<th>描述</th>
</tr>
<tr>
<td><button type="button" class="btn btn-default">默认</button></td>
<td>带渐变的标准灰色按钮</td>
</tr>
<tr>
<td><button type="button" class="btn btn-primary">主要</button></td>
<td>提供额外的视觉感, 可在一系列的按钮中指出主要操作</td>
</tr>
<tr>
<td><button type="button" class="btn btn-info">信息</button></td>
<td>默认样式的替代样式</td>
</tr>
<tr>
<td><button type="button" class="btn btn-success">成功</button></td>
<td>表示成功或积极的动作</td>
</tr>
<tr>
<td><button type="button" class="btn btn-warning">警告</button></td>
<td>提醒应该谨慎采取这个动作</td>
</tr>
<tr>
<td><button type="button" class="btn btn-danger">危险</button></td>
<td>表示这个动作危险或存在危险</td>
</tr>
</table>
</section>
</article>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或