组件 一些常用的组件，用于快速构建应用

消息框

消息框能够轻松展示一些需要引起用户注意的内容。

不同感情色彩的消息框

这里提供了5中色彩的消息框用于不同场合。

你好! 有一些内容你可能需要知道。
太好了! 一切已准备就绪。
Hi! 这条消息可能需要你注意。
注意! 看起来遇到一些问题。
不好了! 确实遇到了问题，请立即处理吧。

使用图标

在消息框中使用醒目的合适的图标能更容易让用户接收。

你好! 有一些内容你可能需要知道。
太好了! 一切已准备就绪。
Hi! 这条消息可能需要你注意。
注意! 看起来遇到一些问题。
不好了! 确实遇到了问题，请立即处理吧。

块级消息

块级消息框将没有外边距，适合用在页面顶部或者浮现在页面之上

太好了! 一切已准备就绪。

消息框中的链接

当消息框中包含链接时，推荐使用工具栏.alert-link来使得链接的样式与消息框类型保持一致。

你好! 有一些内容你可能需要知道。
太好了! 一切已准备就绪。
Hi! 这条消息可能需要你注意。
注意! 看起来遇到一些问题。
不好了! 确实遇到了问题，请立即处理吧。

可以关闭的消息框

可以用一个可选的.alert-dismissable和关闭按钮。

注意! 看起来遇到一些问题。

您可以点击右上角的 来关闭这条消息。

代码

内联代码

通过<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>

输入组

类型

基本类型

消除双边框

当按钮处于两个文本框中间时，需要在.input-group-addon上添加样式修复工具类.fix-border。

@gmail.com

@

@


连续分段的文本框

有时可能需要连续分段的文本框。这时需要在两个相邻的.form-control元素之间添加一个空的.input-group-addon，并同时添加工具栏

兼容IE浏览器

因为IE8不支持:empty选择器，为兼容IE8浏览器，需要在.input-group-addon上添加额外的样式修复工具类.fix-padding。

姓名

单选框和复选框

带按钮

消除双边框

当按钮处于两个文本框中间时，需要在.input-group-btn上添加样式修复工具类.fix-border。



带下拉菜单的按钮

使用Select

浏览器兼容性问题

通常并不推荐在输入框组中使用select元素。这样可能会带来难以处理的兼容性问题。推荐使用 Dropdown 或者 Chosen来代替下拉列表。

地址

分段按钮

列表组

类型

基本类型

链接

用div > a实现，实现整行点击 todo story task active bug case

变化

定制列表内容

我是包含在a标签里面的h4标签

我是包含在a标签里面的p标签，

我是包含在a标签里面的h4标签

我是包含在a标签里面的p标签，

我是包含在a标签里面的h4标签

我是包含在a标签里面的p标签，

分页条

各种分页导航

状态

禁用的导航


参数

圆角

.pager-pills


宽松的

.pager-loose

两端对齐

.pager-justify

面板

类型

基本类型

默认的.panel所做的只是提供基本的边界和内部，来包含内容。

带标题

面板标题
面板内容

带脚注

面板内容
面板脚注

变化

颜色

.panel-primary
面板内容
.panel-success
面板内容
.panel-warning
面板内容
.panel-danger
面板内容
.panel-info
面板内容

包含表格

Panel heading
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.

包含列表

Panel heading
  • todo
  • story
  • task
  • bug
  • case

面板组

面板标题
面板内容
面板脚注
面板标题
面板内容
面板脚注
面板标题
面板内容
面板脚注

表格

类型

名称 描述
表头 一般表格的第一行作为表头，用于描述表中每一列数据名称。为区别于表格其他行，表头具备不同的样式，例如字体加粗等。在垂直显示一组数据的表格中，表头也可能是垂直的第一列，而不是行。
内容 一般内容会在单元格内靠左对齐，对于数字可能靠右对齐比较好。在一些表格中，内容可以按单元格选择或者按行选择，选中的部分会以不同的样式区分。为了使得行与行便于区分，通常也会使得行交替使用不同的背景色。图片或其他控件也可以应用单元格中。
表尾 表位放置与表末尾提供与表相关补充数据或操作，不过并不常见。

参数

隔行交替样式的表

.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

按钮组

类型

一组按钮

通过div.btn-group包含多个button

多组按钮

通过div.btn-toolbar包含.div.btn-group

垂直按钮组

通过div.btn-group-vertical实现

变化

基本下拉按钮组

将.input-group放置于另一个.input-group中。

分裂式下拉按钮组

基本按钮组的变形，将第二个按钮改成图标即可。

上拉按钮组

通过div.dropup实现

大小

通过.btn-lg .btn-sm .btn-xs实现

颜色