一、列表 / List
列表使用有一点值得注意的是 .list-item-badge 被设置了 pointer-events:none，即不可点的。需要可点的情况比较少，如果有需要，可以使用 pointer-events:auto。结构如下：
<ul class="list"> <li class="list-item"> <a href="#">Item 1</a> <cite class="list-item-badge">12</cite> </li> <li class="list-item active"> <a href="###">Item 2</a> </li> </ul>
二、Alert
支持 3 种样式，默认添加
.alert 即可。绿色和红色的分别为.alert-ok 和 .alert-error。可以添加 .close(data-dismiss="alert") 来关闭这个提示。<div class="alert"> <i class="icon-info"></i> 戲分漸樹不認許了際筆願前一風遠公師再實調致興家事在的 <a class="close" data-dismiss="alert">×</a> </div>
戲分漸樹不認許了際筆願前一風遠公師再實調致興家事在的×
戲分漸樹不認許了際筆願前一風遠公師再實調致興家事在的
如果这是一个标题
戲分漸樹不認許了際筆願前一風遠公師再實調致興家事在的三、Modal
Modal 的使用可以点击这个 Modal Demo 试试。使用的时候，只要在一个触发点（如一个链接）指定一下
data-toggle="modal" 来指定这个触发点触发的是 Modal，用href="#TARGET_ID" 或 data-target="#TARGET_ID" 来指定这个
modal 指定的显示框。本操作需要您先注册百姓网
×本操作需要您先注册百姓网
×<a href="#myModal" data-toggle="modal">Modal Demo</a> <div id="myModal" class="modal fade hide in"> <h4 class="modal-title">本操作需要您先注册百姓网</h4> <a href="###" data-dismiss="modal" class="close">×</a> <div class="modal-content"> Lorem ipsum dolor sit amet, </div> </div>
四、Tab
CSS 和 JS 分开的，通过 data-toggle="tab" 来指定元素本身是一个 tab 标签。通过 href="#TARGET_ID" 或者data-target="#TARGET_ID" 来指定 tab 显示的内容。
<div class="tab"> <ul class="tab-title clearfix"> <li class="tab-title-item"><a href="#" data-toggle="tab">全部</a></li> <li class="tab-title-item active"><a href="#" data-toggle="tab">个人</a></li> </ul> </div>
五、Head / Search
Topbar 为全局顶部导航，直接使用
.head 这个 class。包含了标识和搜索。搜索的宽度可以自定义，在百姓网中主要有两种长度，一种用于顶部的 250px，一种用于 Listing 的是 180px。用于首页的如上例，使用 class
.search 用的 Listing 的使用 class .search.search-short ：<form class="search search-short"> <input class="input" placeholder="搜索二级类目"> <i class="icon-search"></i> <input type="submit" class="search-trigger" title="搜索" value=""> </form>
六、Button
这里需要注意的是，在 disabled 的状态，Button 的鼠标事件是没有的。不可点。下面为 <a/> 链接按钮：
<a class="button" href="#"> <i class="icon-post"></i> 免费发布信息 </a>
<input/> 和 <button/> 需要在排版的时候高度保持一致或者居中。
<input class="button" type="button" value="HelloWorld" />
| size= | 对应 class | 实际长度 |
|---|---|---|
| auto | .form-input-auto | 自适应 |
| smallest | .form-input-50 | 50px |
| smaller | .form-input-90 | 90px |
| small | .form-input-110 | 110px |
| medium | .form-input-250 | 150px |
| large | .form-input-230 | 400px |
| larger | .form-input-400 | 400px |
| largest | .form-input-460 | 600px |
七、Form
Form 表单，一般的 input:file 和 select 参见 Typography。而发布表单上多长度的配置，可以参见 Github Wiki 上的 Fabu 输入框大小配置对照表。另外 textarea 也可以使用input 标签的
class。
八、Media
Media 是一个灵活的列表。
出售进口雷克萨斯GS430一键启动最高配置或置换5月21日13:14 查看 31109 次
青浦 - 徐泾 - 沪青平公路1920号
21.8万元 / 2006年 / 9.3万公里
出售进口雷克萨斯GS430一键启动最高配置或置换5月21日13:14 查看 31109 次
青浦 - 徐泾 - 沪青平公路1920号
21.8万元 / 2006年 / 9.3万公里
出售进口雷克萨斯GS430一键启动最高配置或置换5月21日13:14 查看 31109 次
青浦 - 徐泾 - 沪青平公路1920号
21.8万元 / 2006年 / 9.3万公里
戲分漸樹不認許了際筆願前一風遠公師再實調致興家事在的
九、Page Navigator
十、Box
.box 的宽度可以自定义。比如 class="box grid grid-6"。标题 Heading
戲分漸樹不認許了際筆願前一風遠公師再實調致興家事在的。戲分漸樹不認許了際筆願前一風遠公師再實調致興家事在的。戲分漸樹不認許了際筆願前一風遠公師再實調致興家事在的。
<div class="box"> <div class="box-title">标题 Heading</div> <div class="box-body"> <div class="typo-p">戲分漸樹不認許了際筆願前一風遠公師再實調致興家事在的。戲分漸樹不認許了際筆願前一風遠公師再實調致興家事在的。戲分漸樹不認許了際筆願前一風遠公師再實調致興家事在的。</div> <form> <div class="label"> <input type="text" class="input" placeholder="Normal..."> <input type="submit"class="input button" value="提交"> </div> <div class="label"> <label><input type="checkbox">Hello</label> <label><input type="checkbox" checked="">World</label> </div> </form> </div> </div>
十一、Note
类目名称 (1234)
<h3 class="note"> <i class="note-cap icon-clock"></i> 类目名称 <small>(1234)</small> </h3>
