Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
易企天创
zui
提交
1174f01b
Z
zui
项目概览
易企天创
/
zui
12 个月 前同步成功
通知
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,发现更多精彩内容 >>
提交
1174f01b
编写于
11月 05, 2013
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
+ add 'code.less'.
上级
03eaa5ea
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
239 addition
and
4 deletion
+239
-4
dist/css/zui.css
dist/css/zui.css
+86
-0
examples/code.html
examples/code.html
+44
-0
examples/header.html
examples/header.html
+1
-3
src/less/basic/variables.less
src/less/basic/variables.less
+12
-1
src/less/components/code.less
src/less/components/code.less
+95
-0
src/less/zui.less
src/less/zui.less
+1
-0
未找到文件。
dist/css/zui.css
浏览文件 @
1174f01b
...
...
@@ -2422,6 +2422,92 @@ a.list-group-item:focus {
.alert-danger
.alert-link
{
color
:
#a82824
;
}
code
,
kdb
,
pre
,
samp
{
font-family
:
Monaco
,
Menlo
,
Consolas
,
"Courier New"
,
monospace
;
}
code
{
padding
:
2px
4px
;
font-size
:
90%
;
color
:
#c7254e
;
background-color
:
#f9f2f4
;
white-space
:
nowrap
;
border-radius
:
2px
;
}
pre
{
display
:
block
;
padding
:
9.5px
;
margin
:
0
0
10px
;
font-size
:
13px
;
line-height
:
1.428571429
;
word-break
:
break-all
;
word-wrap
:
break-word
;
color
:
#707070
;
background-color
:
#f5f5f5
;
border
:
1px
solid
#cccccc
;
border-radius
:
2px
;
}
pre
code
{
padding
:
0
;
font-size
:
inherit
;
color
:
inherit
;
white-space
:
pre-wrap
;
background-color
:
transparent
;
border
:
0
;
}
.pre-scrollable
{
max-height
:
340px
;
overflow-y
:
scroll
;
}
.com
{
color
:
#93a1a1
;
}
.lit
{
color
:
#195f91
;
}
.pun
,
.opn
,
.clo
{
color
:
#93a1a1
;
}
.fun
{
color
:
#dc322f
;
}
.str
,
.atv
{
color
:
#D14
;
}
.kwd
,
.prettyprint
.tag
{
color
:
#1e347b
;
}
.typ
,
.atn
,
.dec
,
.var
{
color
:
teal
;
}
.pln
{
color
:
#48484c
;
}
.prettyprint
{
padding
:
8px
;
background-color
:
#f7f7f9
;
}
.prettyprint.linenums
{
-webkit-box-shadow
:
inset
40px
0
0
#fbfbfc
,
inset
41px
0
0
#ececf0
;
-moz-box-shadow
:
inset
40px
0
0
#fbfbfc
,
inset
41px
0
0
#ececf0
;
box-shadow
:
inset
40px
0
0
#fbfbfc
,
inset
41px
0
0
#ececf0
;
}
/* Specify class=linenums on a pre to get line numbering */
ol
.linenums
li
{
padding-left
:
12px
;
color
:
#bebec5
;
line-height
:
20px
;
text-shadow
:
0
1px
0
#fff
;
}
/*!
* Font Awesome 3.2.1
* the iconic font designed for Bootstrap
...
...
examples/code.html
0 → 100644
浏览文件 @
1174f01b
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"utf-8"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<meta
name=
"description"
content=
"ZUI,一个简单吸引人的前端框架。"
>
<meta
name=
"author"
content=
"Zentao"
>
<title>
ZUI
</title>
<link
href=
"../dist/css/zui.css"
rel=
"stylesheet"
>
<link
href=
"../assets/css/doc.css"
rel=
"stylesheet"
>
<script
src=
"../assets/js/google-code-prettify/prettify.js"
></script>
</head>
<body
onload=
"prettyPrint()"
>
<article>
<section
id=
"buttons"
class=
"page-section"
>
<h1
class=
"header-dividing"
>
代码
</h1>
<h2>
类型
</h2>
<h3>
内联代码
</h3>
<div
class=
"segment"
>
<p>
通过
<code>
<
code
>
</code>
标签内嵌一小段代码。
</p>
</div>
<h3>
基本代码块
</h3>
<div
class=
"segment"
>
<pre>
<
p
>
Sample text here...
<
/p
>
</pre>
</div>
<p>
还可以使用
<code>
.pre-scrollable
</code>
class,其作用是设置max-height为350px,并在垂直方向展示滚动条。
</p>
</section>
<h3>
代码高亮
</h3>
<p>
代码高亮是通过根据代码语言语法给代码中的单词、字符标记为不同颜色来显示的方法。代码高亮能大大提高代码的查阅体验。在web界面加上代码高亮非常容易,在产品中如需要向用户展现代码应该使用代码高亮。
</p>
<p>
这里推荐的方案是
<a
href=
"https://code.google.com/p/google-code-prettify/"
target=
"_blank"
>
Google Code Prettify
</a>
实现代码高亮。
</p>
<p>
下面是一个php文件的示例:
</p>
<div
class=
"segment"
>
<pre
class=
"prettyprint linenums"
><code>
<
!doctype html
> <
html lang="en"
>
<
head
>
<
title
>
Zentao Design Guidelines
<
/title
>
<
/head
>
<
body
>
<
?php
echo "hello, world!";
?
>
<
/body
> <
/html
>
</code></pre>
</div>
</article>
</body>
</html>
\ No newline at end of file
examples/header.html
浏览文件 @
1174f01b
...
...
@@ -16,9 +16,7 @@
<body>
<article>
<section
id=
"buttons"
class=
"page-section"
>
<div
class=
"page-header"
>
<h1>
Headers
</h1>
</div>
<h1
class=
"header-dividing"
>
Headers
</h1>
<h2>
类型
</h2>
...
...
src/less/basic/variables.less
浏览文件 @
1174f01b
...
...
@@ -403,4 +403,15 @@
@animation-speed-fast: 0.1s;
@animation-speed-slow: 0.5s;
@animation-type: ease-in;
\ No newline at end of file
@animation-type: ease-in;
// Code
// ------------------------
@code-color: #c7254e;
@code-bg: #f9f2f4;
@pre-bg: #f5f5f5;
@pre-color: @gray-dark;
@pre-border-color: #ccc;
@pre-scrollable-max-height: 340px;
\ No newline at end of file
src/less/components/code.less
0 → 100644
浏览文件 @
1174f01b
//
// Code (inline and blocK)
// --------------------------------------------------
// Inline and block code styles
code,
kdb,
pre,
samp
{
font-family: @font-family-monospace;
}
// Inline code
code
{
padding: 2px 4px;
font-size: 90%;
color: @code-color;
background-color: @code-bg;
white-space: nowrap;
border-radius: @border-radius-base;
}
// Blocks of code
pre
{
display: block;
padding: ((@line-height-computed - 1) / 2);
margin: 0 0 (@line-height-computed / 2);
font-size: (@font-size-base - 1); // 14px to 13px
line-height: @line-height-base;
word-break: break-all;
word-wrap: break-word;
color: @pre-color;
background-color: @pre-bg;
border: 1px solid @pre-border-color;
border-radius: @border-radius-base;
// Account for some code outputs that place code tags in pre tags
code
{
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border: 0;
}
}
// Enable scrollable blocks of code
.pre-scrollable
{
max-height: @pre-scrollable-max-height;
overflow-y: scroll;
}
// prettify.css
// ----------------------
.com { color: #93a1a1; }
.lit { color: #195f91; }
.pun, .opn, .clo { color: #93a1a1; }
.fun { color: #dc322f; }
.str, .atv { color: #D14; }
.kwd, .prettyprint .tag { color: #1e347b; }
.typ, .atn, .dec, .var { color: teal; }
.pln { color: #48484c; }
.prettyprint
{
padding: 8px;
background-color: #f7f7f9;
}
.prettyprint.linenums
{
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
}
/* Specify class=linenums on a pre to get line numbering */
// ol.linenums
// {
// margin: 0 0 0 33px; /* IE indents via margin-left */
// }
ol.linenums li
{
padding-left: 12px;
color: #bebec5;
line-height: 20px;
text-shadow: 0 1px 0 #fff;
}
\ No newline at end of file
src/less/zui.less
浏览文件 @
1174f01b
...
...
@@ -46,6 +46,7 @@
@import "components/list-group.less";
@import "components/panels.less";
@import "components/alerts.less";
@import "components/code.less";
//
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录