Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
易企天创
zui
提交
90e66d51
Z
zui
项目概览
易企天创
/
zui
11 个月 前同步成功
通知
6
Star
0
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
37
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
37
Issue
37
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
90e66d51
编写于
11月 04, 2013
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* change document files.
上级
074e5912
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
101 addition
and
97 deletion
+101
-97
assets/css/doc.css
assets/css/doc.css
+4
-0
examples/buttons.html
examples/buttons.html
+4
-8
examples/header.html
examples/header.html
+93
-89
未找到文件。
assets/css/doc.css
浏览文件 @
90e66d51
article
{
padding
:
20px
;
}
\ No newline at end of file
examples/buttons.html
浏览文件 @
90e66d51
...
...
@@ -21,7 +21,7 @@
<p>
按钮根据表现形式有如下类型:
</p>
<table
class=
"table"
>
<tr>
<th
class=
"col-md-4"
>
按钮
</th>
<th>
按钮
</th>
<th>
描述
</th>
</tr>
<tr>
...
...
@@ -50,7 +50,7 @@
<h3>
按钮的大小
</h3>
<table
class=
"table"
>
<tr>
<th
class=
"col-md-6"
>
实例
</th>
<th>
实例
</th>
<th>
描述
</th>
</tr>
<tr>
...
...
@@ -92,7 +92,7 @@
<h3>
按钮的不同状态
</h3>
<table
class=
"table"
>
<tr>
<th
class=
"col-md-4"
>
实例
</th>
<th>
实例
</th>
<th>
描述
</th>
</tr>
<tr>
...
...
@@ -157,7 +157,7 @@
<p>
按钮的颜色赋予按钮以感情色彩能够在视觉上首当其冲的体现按钮的功能意向。例如重要按钮和标准按钮的颜色不同而体现其重要程度。使用更多的颜色来使得目的更加明确,与用户期望一致。
</p>
<table
class=
"table"
>
<tr>
<th
class=
"col-md-3"
>
实例
</th>
<th>
实例
</th>
<th>
描述
</th>
</tr>
<tr>
...
...
@@ -184,10 +184,6 @@
<td><button
type=
"button"
class=
"btn btn-danger"
>
危险
</button></td>
<td>
表示这个动作危险或存在危险
</td>
</tr>
<tr>
<td><button
type=
"button"
class=
"btn btn-inverse"
>
反向
</button></td>
<td>
备用的暗灰色按钮,不依赖于语义和用途
</td>
</tr>
</table>
</section>
</body>
...
...
examples/header.html
浏览文件 @
90e66d51
...
...
@@ -10,106 +10,110 @@
<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"
>
<h1>
Headers
</h1>
</div>
<article>
<section
id=
"buttons"
class=
"page-section"
>
<div
class=
"page-header"
>
<h1>
Headers
</h1>
</div>
<h2>
类型
</h2>
<h2>
类型
</h2>
<h3>
标准内容标题
</h3>
<p>
内容标题用来对一段内容进行总结。内容标题有1-6个级别,用html中的
<code>
h1
</code>
、
<code>
h2
</code>
...
<code>
h6
</code>
来应用样式
</p>
<table
class=
"table"
>
<thead>
<tr>
<th
style=
"width:30%"
>
元素
</th>
<th>
标签
</th>
<th>
像素大小
</th>
<th>
说明
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h1>
Heading1 一级标题
</h1>
</td>
<td><code>
<
h1
>
</code></td>
<td>
36px
</td>
<td>
在一个页面(或在
<code>
hgroup
</code>
标记的范围内)只有一个页面标题。
</td>
</tr>
<tr>
<td><h2>
Heading2 二级标题
</h2></td>
<td><code>
<
h2
>
</code></td>
<td>
30px
</td>
<td>
作为页面第二级标题,可能在一个页面中使用到多个二级标题。
</td>
</tr>
<tr>
<td><h3>
Heading3 三级标题
</h3></td>
<td><code>
<
h3
>
</code></td>
<td>
24px 粗体
</td>
<td>
页面第三级标题,嵌套在二级标题下使用。
</td>
</tr>
<tr>
<td><h4>
Heading4 四级标题
</h4></td>
<td><code>
<
h4
>
</code></td>
<td>
18px 粗体
</td>
<td>
页面第四级标题,嵌套在三级标题下使用。
</td>
</tr>
<tr>
<td><h5>
Heading5 五级标题
</h5></td>
<td><code>
<
h5
>
</code></td>
<td>
14px 粗体 颜色灰色
</td>
<td>
页面第五级标题,嵌套在四级标题下使用。
</td>
</tr>
<tr>
<td><h6>
Heading6 六级标题
</h6></td>
<td><code>
<
h6
>
</code></td>
<td>
12px 粗体 颜色灰色
</td>
<td>
页面第六级标题,嵌套在五级标题下使用。
</td>
</tr>
</tbody>
</table>
<h3>
标准内容标题
</h3>
<p>
内容标题用来对一段内容进行总结。内容标题有1-6个级别,用html中的
<code>
h1
</code>
、
<code>
h2
</code>
...
<code>
h6
</code>
来应用样式
</p>
<table
class=
"table"
>
<thead>
<tr>
<th
style=
"width:30%"
>
元素
</th>
<th>
标签
</th>
<th>
像素大小
</th>
<th>
说明
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h1>
Heading1 一级标题
</h1>
</td>
<td><code>
<
h1
>
</code></td>
<td>
36px
</td>
<td>
在一个页面(或在
<code>
hgroup
</code>
标记的范围内)只有一个页面标题。
</td>
</tr>
<tr>
<td><h2>
Heading2 二级标题
</h2></td>
<td><code>
<
h2
>
</code></td>
<td>
30px
</td>
<td>
作为页面第二级标题,可能在一个页面中使用到多个二级标题。
</td>
</tr>
<tr>
<td><h3>
Heading3 三级标题
</h3></td>
<td><code>
<
h3
>
</code></td>
<td>
24px 粗体
</td>
<td>
页面第三级标题,嵌套在二级标题下使用。
</td>
</tr>
<tr>
<td><h4>
Heading4 四级标题
</h4></td>
<td><code>
<
h4
>
</code></td>
<td>
18px 粗体
</td>
<td>
页面第四级标题,嵌套在三级标题下使用。
</td>
</tr>
<tr>
<td><h5>
Heading5 五级标题
</h5></td>
<td><code>
<
h5
>
</code></td>
<td>
14px 粗体 颜色灰色
</td>
<td>
页面第五级标题,嵌套在四级标题下使用。
</td>
</tr>
<tr>
<td><h6>
Heading6 六级标题
</h6></td>
<td><code>
<
h6
>
</code></td>
<td>
12px 粗体 颜色灰色
</td>
<td>
页面第六级标题,嵌套在五级标题下使用。
</td>
</tr>
</tbody>
</table>
<h3>
带额外内容的标题
</h3>
<p>
标题中可以加入解释性的文本,这些文本通过一个
<code>
small
</code>
标签加入。
</p>
<div
class=
"segment"
>
<h1>
Heading1 标题1
<small>
额外的标题 secondary headings
</small></h1>
<h2>
Heading2 标题2
<small>
额外的标题 secondary headings
</small></h2>
<h3>
Heading3 标题3
<small>
额外的标题 secondary headings
</small></h3>
<h4>
Heading4 标题4
<small>
额外的标题 secondary headings
</small></h4>
<h5>
Heading5 标题5
<small>
额外的标题 secondary headings
</small></h5>
<h6>
Heading6 标题6
<small>
额外的标题 secondary headings
</small></h6>
</div>
<h3>
带额外内容的标题
</h3>
<p>
标题中可以加入解释性的文本,这些文本通过一个
<code>
small
</code>
标签加入。
</p>
<div
class=
"segment"
>
<h1>
Heading1 标题1
<small>
额外的标题 secondary headings
</small></h1>
<h2>
Heading2 标题2
<small>
额外的标题 secondary headings
</small></h2>
<h3>
Heading3 标题3
<small>
额外的标题 secondary headings
</small></h3>
<h4>
Heading4 标题4
<small>
额外的标题 secondary headings
</small></h4>
<h5>
Heading5 标题5
<small>
额外的标题 secondary headings
</small></h5>
<h6>
Heading6 标题6
<small>
额外的标题 secondary headings
</small></h6>
</div>
<h3>
单独一行的解释性文本
</h3>
<div
class=
"segment"
>
<h2>
Heading1 标题1
<small
class=
"block"
>
这是关于标题的解释性文本 secondary headings
</small></h2>
</div>
<h3>
单独一行的解释性文本
</h3>
<div
class=
"segment"
>
<h2>
Heading1 标题1
<small
class=
"block"
>
这是关于标题的解释性文本 secondary headings
</small></h2>
</div>
<h3>
带图标的标题
</h3>
<p>
页面标题使用额外的
<code>
div.header
</code>
来为页面内容提供更多的样式控制,与其他控件完美整合在一起。
</p>
<div
class=
"segment"
>
<h2><i
class=
"icon icon-film"
></i>
带图标的标题
</h2>
</div>
<h3>
带图标的标题
</h3>
<p>
页面标题使用额外的
<code>
div.header
</code>
来为页面内容提供更多的样式控制,与其他控件完美整合在一起。
</p>
<div
class=
"segment"
>
<h2><i
class=
"icon icon-film"
></i>
带图标的标题
</h2>
</div>
<h2>
参数
</h2>
<h2>
参数
</h2>
<h3><code>
.header-block
</code></h3>
<p>
带背景颜色的标题。
</p>
<div
class=
"segment"
>
<h3
class=
"header-block"
>
标题
</h3>
</div>
<h3><code>
.header-block
</code></h3>
<p>
带背景颜色的标题。
</p>
<div
class=
"segment"
>
<h3
class=
"header-block"
>
标题
</h3>
</div>
<h3><code>
.header-dividing
</code></h3>
<p>
带底部水平分隔线的标题
</p>
<div
class=
"segment"
>
<h3
class=
"header-dividing"
>
标题
</h3>
</div>
<h3><code>
.header-dividing
</code></h3>
<p>
带底部水平分隔线的标题
</p>
<div
class=
"segment"
>
<h3
class=
"header-dividing"
>
标题
</h3>
</div>
<br><br>
</section>
</article>
<br><br>
</section>
</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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录