Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zzx_123123
zui
提交
0d2d7240
Z
zui
项目概览
zzx_123123
/
zui
与 Fork 源项目一致
Fork自
易企天创 / zui
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
0d2d7240
编写于
11月 05, 2013
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* update document files.
上级
29d0c895
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
179 addition
and
174 deletion
+179
-174
assets/css/doc.css
assets/css/doc.css
+1
-0
examples/buttons.html
examples/buttons.html
+178
-174
未找到文件。
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录