组件
一些常用的组件,用于快速构建应用消息框 LITE
消息框能够轻松展示一些需要引起用户注意的内容。
不同感情色彩的消息框
这里提供了5中色彩的消息框用于不同场合。
<div class="alert">...</div> <div class="alert alert-danger">...</div> <div class="alert alert-success">...</div> <div class="alert alert-warning">...</div> <div class="alert alert-info">...</div>
使用图标
在消息框中使用醒目的合适的图标能更容易让用户接收。需要使.alert
配合.with-icon
参数一起使用。
<div class="alert alert-success with-icon"> <i class="icon-ok-sign"></i> <div class="content">...</div> </div>
块级消息
块级消息框将没有外边距,适合用在页面顶部或者浮现在页面之上
消息框中的链接
当消息框中包含链接时,推荐使用工具栏.alert-link
来使得链接的样式与消息框类型保持一致。
可以关闭的消息框
可以用一个可选的.alert-dismissable
和关闭按钮。
您可以点击右上角的 来关闭这条消息。
代码 LITE
内联代码
通过<code>
标签内嵌一小段代码。
基本代码块
基本代码块包含在<pre>
内。
<p>Sample text here...</p>
还可以使用.pre-scrollable
class,其作用是设置max-height为350px,并在垂直方向展示滚动条。
代码高亮
代码高亮是通过根据代码语言语法给代码中的单词、字符标记为不同颜色来显示的方法。代码高亮能大大提高代码的查阅体验。在web界面加上代码高亮非常容易,在产品中如需要向用户展现代码应该使用代码高亮。
这里推荐的方案是Google Code Prettify实现代码高亮。
下面是一个php文件的示例:
<!doctype html>
<html lang="en">
<head>
<title>Zentao Design Guidelines</title>
</head>
<body>
<?php
echo "hello, world!";
?>
</body>
</html>
输入组 LITE
类型
基本类型
消除双边框
当按钮处于两个文本框中间时,需要在.input-group-addon
上添加样式修复工具类.fix-border
。
连续分段的文本框
有时可能需要连续分段的文本框。这时需要在两个相邻的.form-control
元素之间添加一个空的.input-group-addon
,并同时添加工具栏
兼容IE浏览器
因为IE8不支持:empty
选择器,为兼容IE8浏览器,需要在.input-group-addon
上添加额外的样式修复工具类.fix-padding
。
单选框和复选框
带按钮
消除双边框
当按钮处于两个文本框中间时,需要在.input-group-btn
上添加样式修复工具类.fix-border
。
带下拉菜单的按钮
使用Select
浏览器兼容性问题
通常并不推荐在输入框组中使用select元素。这样可能会带来难以处理的兼容性问题。推荐使用 Dropdown 或者 Chosen来代替下拉列表。
分段按钮
列表组 LITE
类型
基本类型
- 用ul > li实现,点击区域只有文字
- todo
- story
- task
- bug
- case
链接
变化
定制列表内容
分页条 LITE
各种分页导航
状态
禁用的导航
参数
圆角
.pager-pills
宽松的
.pager-loose
两端对齐
.pager-justify
面板 LITE
类型
基本类型
带标题
带脚注
变化
颜色
包含表格
Lorem ipsum. | Repudiandae, harum! | Tenetur, corporis. | Perspiciatis, porro? |
---|---|---|---|
Lorem ipsum. | Officiis, non. | Molestias, qui. | Odit, ducimus. |
Lorem ipsum. | Repellendus, exercitationem! | Velit, eos. | Eius, officiis. |
Lorem ipsum. | Amet, esse! | Quis, pariatur! | Totam, quae. |
包含列表
- todo
- story
- task
- bug
- case
面板组
表格 LITE
类型
名称 | 描述 |
---|---|
表头 | 一般表格的第一行作为表头,用于描述表中每一列数据名称。为区别于表格其他行,表头具备不同的样式,例如字体加粗等。在垂直显示一组数据的表格中,表头也可能是垂直的第一列,而不是行。 |
内容 | 一般内容会在单元格内靠左对齐,对于数字可能靠右对齐比较好。在一些表格中,内容可以按单元格选择或者按行选择,选中的部分会以不同的样式区分。为了使得行与行便于区分,通常也会使得行交替使用不同的背景色。图片或其他控件也可以应用单元格中。 |
表尾 | 表位放置与表末尾提供与表相关补充数据或操作,不过并不常见。 |
参数
隔行交替样式的表
.table-striped
# | First Name | Last Name | Username |
---|---|---|---|
1 | Sunshine | Sunday | catouse |
4 | Sunday | Sunshine | catouse |
2 | catouse | azhi | zenUI |
3 | Lady Gaga | catouse |
响应鼠标悬停
.table-hover
# | First Name | Last Name | Username |
---|---|---|---|
1 | Sunshine | Sunday | catouse |
4 | Sunday | Sunshine | catouse |
2 | catouse | azhi | zenUI |
3 | Lady Gaga | catouse |
带所有边框的表格
.table-bordered
# | First Name | Last Name | Username |
---|---|---|---|
1 | Sunshine | Sunday | catouse |
4 | Sunday | Sunshine | catouse |
2 | catouse | azhi | zenUI |
3 | Lady Gaga | catouse |
更为紧凑的表格
.table-condensed
# | First Name | Last Name | Username |
---|---|---|---|
1 | catouse | hello | world |
2 | jay | thks | jajaja |
3 | JK row | thks | Pa |
色彩标记
可以根据语义标记整行或者某一单元格
# | 描述 | Payment Taken | Status |
---|---|---|---|
1 | 表示成功或积极的行为。 | 01/04/2012 | Approved |
2 | 表示一个危险或存有潜在危险的行为。 | 02/04/2012 | Declined |
3 | 表示警告,可能需要注意。 | 03/04/2012 | Pending |
4 | 标记为激活行。 | 04/04/2012 | Call in to confirm |