Skip to content

Z
zui

易企天创 / zui
大约 1 年 前同步成功

通知 6
Star 0
Fork 1
Z
zui

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
view-list.md 27.0 KB
Newer Older
C
* convert html to markdown.  
Catouse 已提交
1 2 
section: view
id: list
C
* update list view document.  
Catouse 已提交
3 
description: 包含图文内容的列表
C
* convert html to markdown.  
Catouse 已提交
4 5 6 7 8 9 
icon: icon-list
filter: liebiao lb
---

# 列表
C
* update list view document.  
Catouse 已提交
10 
列表视图用于展示一组包含图文的内容。
C
* convert html to markdown.  
Catouse 已提交
11
C
* update list view document.  
Catouse 已提交
12 13 14 
## 结构

列表使用 `.list` 作为父级容器，并使用如下特殊类标记子容器：
C
* convert html to markdown.  
Catouse 已提交
15 16 17 18 

<table class="table">
  <tbody>
    <tr>
C
* update list view document.  
Catouse 已提交
19 20 21 
      <td style="width: 100px">`<header>`</td>
      <td style="width: 80px">头部</td>
      <td>标题等信息</td>
C
* convert html to markdown.  
Catouse 已提交
22 23 
    </tr>
    <tr>
C
* update list view document.  
Catouse 已提交
24 25 26 
      <td>`.items`</td>
      <td>列表项组</td>
      <td>可以在 `.list` 内堆叠多个列表项组。</td>
C
* convert html to markdown.  
Catouse 已提交
27 28 
    </tr>
    <tr>
C
* update list view document.  
Catouse 已提交
29 
      <td>`<footer>`</td>
C
* convert html to markdown.  
Catouse 已提交
30 
      <td>底部</td>
C
* update list view document.  
Catouse 已提交
31 
      <td>显示分页信息等。</td>
C
* convert html to markdown.  
Catouse 已提交
32 33 34 35 
    </tr>
  </tbody>
</table>
C
* update list view document.  
Catouse 已提交
36 
一般 HTML 结构如下：
C
* convert html to markdown.  
Catouse 已提交
37
C
* update list view document.  
Catouse 已提交
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 
```html
<div class="list">
  <!-- 列表头部 -->
  <header>
    <h1>列表标题</h1>
  </header>
  <!-- 列表项组 -->
  <section class="items">
    <div class="item"></div>
    ...
  </section>
  <!-- 列表底部 -->
  <footer>
    <ul class="pager pager-justify">
      <li class="previous"><a href="#"><i class="icon-arrow-left"></i> 上一页</a></li>
      <li class="next disabled"><a href="#">没有下一页 <i class="icon-arrow-right"></i></a></li>
    </ul>
  </footer>
</div>
```

列表项组 `.items` 也可以脱离列表容器 `.list` 单独使用。

## 列表项

为用作列表项的元素添加 `.item` 类，所有列表项都必须作为列表项组（`.items`）的直接子元素。

列表项内可以包含以下特殊类：

 - `.item-heading`，作为列表项标题容器；
 - `.item-content`，作为列表附加内容容器；
 - `.item-footer`，作为列表底部信息容器；
 - `.media`，作为缩略图容器，通常放置在 `.item-content` 内，和 `.pull-left` 或 `.pull-right` 一起使用。

###

<example>
  <div class="items">
    <div class="item">
      <div class="item-heading">
        <div class="pull-right label label-success">维基</div>
        <h4><a href="###">HTML5 发展历史</a></h4>
C
* convert html to markdown.  
Catouse 已提交
80 
      </div>
C
* update list view document.  
Catouse 已提交
81 82 83 
      <div class="item-content">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
      <div class="item-footer">
        <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
C
* convert html to markdown.  
Catouse 已提交
84 
      </div>
C
* update list view document.  
Catouse 已提交
85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 
    </div>
  </div>
</example>

```html
<div class="items">
  <div class="item">
    <div class="item-heading">
      <div class="pull-right label label-success">维基</div>
      <h4><a href="###">HTML5 发展历史</a></h4>
    </div>
    <div class="item-content">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
    <div class="item-footer">
      <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
    </div>
  </div>
</div>
```

### 包含缩略图

在 `.item-content` 内使用 `.media` 包裹图片作为缩略图。

在 `.media` 上使用 `.pull-left` 或 `.pull-right` 来让缩略图居左或居右放置。此时默认情况下缩略图最大宽度为 `150px`，如果要更改缩略图大学，你可以手动为缩略图应用样式。

<example>
  <div class="items">
    <div class="item">
      <div class="item-heading">
        <div class="pull-right label label-success">维基</div>
        <h4><a href="###">HTML5 发展历史</a></h4>
C
* convert html to markdown.  
Catouse 已提交
116 
      </div>
C
* update list view document.  
Catouse 已提交
117 118 119 
      <div class="item-content">
        <div class="media pull-left"><img src="docs/img/img2.jpg" alt=""></div>
        <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
C
* convert html to markdown.  
Catouse 已提交
120 
      </div>
C
* update list view document.  
Catouse 已提交
121 122 
      <div class="item-footer">
        <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
C
* convert html to markdown.  
Catouse 已提交
123 
      </div>
C
* update list view document.  
Catouse 已提交
124 125 126 127 128 
    </div>
    <div class="item">
      <div class="item-heading">
        <div class="pull-right label label-success">维基</div>
        <h4><a href="###">HTML5 发展历史</a></h4>
C
* convert html to markdown.  
Catouse 已提交
129 
      </div>
C
* update list view document.  
Catouse 已提交
130 131 132 
      <div class="item-content">
        <div class="media pull-right"><img src="docs/img/img2.jpg" alt=""></div>
        <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
C
* convert html to markdown.  
Catouse 已提交
133 
      </div>
C
* update list view document.  
Catouse 已提交
134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 
      <div class="item-footer">
        <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
      </div>
    </div>
    <div class="item">
      <div class="item-heading">
        <div class="pull-right label label-success">维基</div>
        <h4><a href="###">HTML5 发展历史</a></h4>
      </div>
      <div class="item-content">
        <div class="media"><img src="docs/img/slide1.jpg" alt=""></div>
        <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
      </div>
      <div class="item-footer">
        <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
      </div>
    </div>
  </div>
</example>

<template class="pre-scrollable linenums"/>

```html
<div class="items">
  <div class="item">
    <div class="item-heading">
      <div class="pull-right label label-success">维基</div>
      <h4><a href="###">HTML5 发展历史</a></h4>
    </div>
    <div class="item-content">
      <div class="media pull-left"><img src="docs/img/img2.jpg" alt=""></div>
      <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
    </div>
    <div class="item-footer">
      <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
    </div>
  </div>
  <div class="item">
    <div class="item-heading">
      <div class="pull-right label label-success">维基</div>
      <h4><a href="###">HTML5 发展历史</a></h4>
    </div>
    <div class="item-content">
      <div class="media pull-right"><img src="docs/img/img2.jpg" alt=""></div>
      <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
    </div>
    <div class="item-footer">
      <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
    </div>
  </div>
  <div class="item">
    <div class="item-heading">
      <div class="pull-right label label-success">维基</div>
      <h4><a href="###">HTML5 发展历史</a></h4>
    </div>
    <div class="item-content">
      <div class="media"><img src="docs/img/slide1.jpg" alt=""></div>
      <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
    </div>
    <div class="item-footer">
      <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
    </div>
C
* convert html to markdown.  
Catouse 已提交
196 197 
  </div>
</div>
C
* update list view document.  
Catouse 已提交
198 
```
C
* convert html to markdown.  
Catouse 已提交
199
C
* update list view document.  
Catouse 已提交
200 
### 鼠标悬停效果
C
* convert html to markdown.  
Catouse 已提交
201
C
* update list view document.  
Catouse 已提交
202 203 204 205 206 207 208 209 
为 `.items` 添加  `.items-hover` 类可以为列表项添加鼠标悬停效果。

<example>
  <div class="items items-hover">
    <div class="item">
      <div class="item-heading">
        <div class="pull-right label label-success">维基</div>
        <h4><a href="###">HTML5 发展历史</a></h4>
C
* convert html to markdown.  
Catouse 已提交
210 
      </div>
C
* update list view document.  
Catouse 已提交
211 212 213 
      <div class="item-content">
        <div class="media pull-right"><img src="docs/img/img2.jpg" alt=""></div>
        <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
C
* convert html to markdown.  
Catouse 已提交
214 
      </div>
C
* update list view document.  
Catouse 已提交
215 216 
      <div class="item-footer">
        <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
C
* convert html to markdown.  
Catouse 已提交
217 
      </div>
C
* update list view document.  
Catouse 已提交
218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 
    </div>
  </div>
</example>

```html
<div class="items items-hover">
  <div class="item">
    <div class="item-heading">
      <div class="pull-right label label-success">维基</div>
      <h4><a href="###">HTML5 发展历史</a></h4>
    </div>
    <div class="item-content">
      <div class="media pull-right"><img src="docs/img/img2.jpg" alt=""></div>
      <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
    </div>
    <div class="item-footer">
      <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
    </div>
  </div>
</div>
```

## 综合示例

<example>
  <div class="list">
    <header>
      <h3><i class="icon-list-ul"></i> 最新动态 <small>更新 123 条</small></h3>
    </header>
    <div class="items items-hover">
C
* convert html to markdown.  
Catouse 已提交
248 249 
      <div class="item">
        <div class="item-heading">
C
* update list view document.  
Catouse 已提交
250 251 
          <div class="pull-right"><span class="text-muted">2013-11-11 16:14:37</span> &nbsp; <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a></div>
          <h4><a href="###">HTML5 发展历史</a></h4>
C
* convert html to markdown.  
Catouse 已提交
252 253 
        </div>
        <div class="item-content">
C
* update list view document.  
Catouse 已提交
254 
          <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
C
* convert html to markdown.  
Catouse 已提交
255 256 257 258 
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
C
* update list view document.  
Catouse 已提交
259 260 
          <div class="pull-right label label-success">维基</div>
          <h4><a href="###">HTML5 发展历史</a></h4>
C
* convert html to markdown.  
Catouse 已提交
261 262 
        </div>
        <div class="item-content">
C
* update list view document.  
Catouse 已提交
263 
          <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
C
* convert html to markdown.  
Catouse 已提交
264 265 
        </div>
        <div class="item-footer">
C
* update list view document.  
Catouse 已提交
266 
          <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
C
* convert html to markdown.  
Catouse 已提交
267 268 269 270 
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
C
* update list view document.  
Catouse 已提交
271 272 
          <div class="pull-right label label-success">维基</div>
          <h4><a href="###">HTML5 发展历史</a></h4>
C
* convert html to markdown.  
Catouse 已提交
273 274 
        </div>
        <div class="item-content">
C
* update list view document.  
Catouse 已提交
275 276 
          <div class="media pull-right"><img src="docs/img/img2.jpg" alt=""></div>
          <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
C
* convert html to markdown.  
Catouse 已提交
277 278 
        </div>
        <div class="item-footer">
C
* update list view document.  
Catouse 已提交
279 
          <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
C
* convert html to markdown.  
Catouse 已提交
280 281 282 283 
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
C
* update list view document.  
Catouse 已提交
284 285 
          <div class="pull-right"><a href="###"><i class="icon-pencil"></i> 编辑</a> &nbsp;<a href="#"><i class="icon-remove"></i> 删除</a></div>
          <h4><span class="label label-success">维基</span> <a href="###">HTML5 发展历史</a></h4>
C
* convert html to markdown.  
Catouse 已提交
286 287 
        </div>
        <div class="item-content">
C
* update list view document.  
Catouse 已提交
288 
          <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
C
* convert html to markdown.  
Catouse 已提交
289 290 
        </div>
        <div class="item-footer">
C
* update list view document.  
Catouse 已提交
291 
          <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
C
* convert html to markdown.  
Catouse 已提交
292 293 
        </div>
      </div>
C
* update list view document.  
Catouse 已提交
294 
    </div>
C
* convert html to markdown.  
Catouse 已提交
295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 
    <footer>
      <ul class="pager">
        <li class="previous"><a href="#">« 上一页</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">⋯</a></li>
        <li><a href="#">6</a></li>
        <li class="active"><a href="#">7</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
        <li><a href="#">⋯</a></li>
        <li><a href="#">12</a></li>
        <li class="next"><a href="#">下一页 »</a></li>
      </ul>
    </footer>
  </div>
C
* update list view document.  
Catouse 已提交
310 
</example>
C
* convert html to markdown.  
Catouse 已提交
311
C
* update list view document.  
Catouse 已提交
312 
<template class="pre-scrollable linenums"/>
C
* convert html to markdown.  
Catouse 已提交
313
C
* update list view document.  
Catouse 已提交
314 315 316 317 318 319 320 321 322 323 
```html
<div class="list">
  <header>
    <h3><i class="icon-list-ul"></i> 最新动态 <small>更新 123 条</small></h3>
  </header>
  <div class="items items-hover">
    <div class="item">
      <div class="item-heading">
        <div class="pull-right"><span class="text-muted">2013-11-11 16:14:37</span> &nbsp; <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a></div>
        <h4><a href="###">HTML5 发展历史</a></h4>
C
* convert html to markdown.  
Catouse 已提交
324 
      </div>
C
* update list view document.  
Catouse 已提交
325 326 
      <div class="item-content">
        <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
C
* convert html to markdown.  
Catouse 已提交
327 
      </div>
C
* update list view document.  
Catouse 已提交
328 329 330 331 332 333 334 335 336 337 338 
    </div>
    <div class="item">
      <div class="item-heading">
        <div class="pull-right label label-success">维基</div>
        <h4><a href="###">HTML5 发展历史</a></h4>
      </div>
      <div class="item-content">
        <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
      </div>
      <div class="item-footer">
        <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
C
* convert html to markdown.  
Catouse 已提交
339 
      </div>
C
* update list view document.  
Catouse 已提交
340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 
    </div>
    <div class="item">
      <div class="item-heading">
        <div class="pull-right label label-success">维基</div>
        <h4><a href="###">HTML5 发展历史</a></h4>
      </div>
      <div class="item-content">
        <div class="media pull-right"><img src="docs/img/img2.jpg" alt=""></div>
        <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
      </div>
      <div class="item-footer">
        <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
      </div>
    </div>
    <div class="item">
      <div class="item-heading">
        <div class="pull-right"><a href="###"><i class="icon-pencil"></i> 编辑</a> &nbsp;<a href="#"><i class="icon-remove"></i> 删除</a></div>
        <h4><span class="label label-success">维基</span> <a href="###">HTML5 发展历史</a></h4>
      </div>
      <div class="item-content">
        <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
      </div>
      <div class="item-footer">
        <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
      </div>
    </div>
  </div>
  <footer>
    <ul class="pager">
      <li class="previous"><a href="#">« 上一页</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">⋯</a></li>
      <li><a href="#">6</a></li>
      <li class="active"><a href="#">7</a></li>
      <li><a href="#">8</a></li>
      <li><a href="#">9</a></li>
      <li><a href="#">⋯</a></li>
      <li><a href="#">12</a></li>
      <li class="next"><a href="#">下一页 »</a></li>
    </ul>
  </footer>
</div>
```

## 更紧凑的列表

通过为 `.list` 添加 `list-condensed` 类来获得更加紧凑的列表视图，适合放置在没有内边距的容器内。

<example style="padding: 0">
  <div class="list list-condensed">
    <header>
      <h3><i class="icon-list-ul"></i> 最新动态 <small>更新 123 条</small></h3>
    </header>
    <div class="items items-hover">
C
* convert html to markdown.  
Catouse 已提交
394 395 
      <div class="item">
        <div class="item-heading">
C
* update list view document.  
Catouse 已提交
396 397 
          <div class="pull-right"><span class="text-muted">2013-11-11 16:14:37</span> &nbsp; <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a></div>
          <h4><a href="###">HTML5 发展历史</a></h4>
C
* convert html to markdown.  
Catouse 已提交
398 399 
        </div>
        <div class="item-content">
C
* update list view document.  
Catouse 已提交
400 
          <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
C
* convert html to markdown.  
Catouse 已提交
401 402 403 404 
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
C
* update list view document.  
Catouse 已提交
405 406 
          <div class="pull-right label label-success">维基</div>
          <h4><a href="###">HTML5 发展历史</a></h4>
C
* convert html to markdown.  
Catouse 已提交
407 408 
        </div>
        <div class="item-content">
C
* update list view document.  
Catouse 已提交
409 
          <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
C
* convert html to markdown.  
Catouse 已提交
410 411 
        </div>
        <div class="item-footer">
C
* update list view document.  
Catouse 已提交
412 
          <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
C
* convert html to markdown.  
Catouse 已提交
413 414 415 416 
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
C
* update list view document.  
Catouse 已提交
417 418 
          <div class="pull-right label label-success">维基</div>
          <h4><a href="###">HTML5 发展历史</a></h4>
C
* convert html to markdown.  
Catouse 已提交
419 420 
        </div>
        <div class="item-content">
C
* update list view document.  
Catouse 已提交
421 422 
          <div class="media pull-right"><img src="docs/img/img2.jpg" alt=""></div>
          <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
C
* convert html to markdown.  
Catouse 已提交
423 424 
        </div>
        <div class="item-footer">
C
* update list view document.  
Catouse 已提交
425 
          <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
C
* convert html to markdown.  
Catouse 已提交
426 427 428 429 
        </div>
      </div>
      <div class="item">
        <div class="item-heading">
C
* update list view document.  
Catouse 已提交
430 431 
          <div class="pull-right"><a href="###"><i class="icon-pencil"></i> 编辑</a> &nbsp;<a href="#"><i class="icon-remove"></i> 删除</a></div>
          <h4><span class="label label-success">维基</span> <a href="###">HTML5 发展历史</a></h4>
C
* convert html to markdown.  
Catouse 已提交
432 433 
        </div>
        <div class="item-content">
C
* update list view document.  
Catouse 已提交
434 
          <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
C
* convert html to markdown.  
Catouse 已提交
435 436 
        </div>
        <div class="item-footer">
C
* update list view document.  
Catouse 已提交
437 
          <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
C
* convert html to markdown.  
Catouse 已提交
438 439 
        </div>
      </div>
C
* update list view document.  
Catouse 已提交
440 
    </div>
C
* convert html to markdown.  
Catouse 已提交
441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 
    <footer>
      <ul class="pager">
        <li class="previous"><a href="#">« 上一页</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">⋯</a></li>
        <li><a href="#">6</a></li>
        <li class="active"><a href="#">7</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
        <li><a href="#">⋯</a></li>
        <li><a href="#">12</a></li>
        <li class="next"><a href="#">下一页 »</a></li>
      </ul>
    </footer>
  </div>
C
* update list view document.  
Catouse 已提交
456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 
</example>

<template class="pre-scrollable linenums"/>

```html
<div class="list list-condensed">
  <header>
    <h3><i class="icon-list-ul"></i> 最新动态 <small>更新 123 条</small></h3>
  </header>
  <div class="items items-hover">
    <div class="item">
      <div class="item-heading">
        <div class="pull-right"><span class="text-muted">2013-11-11 16:14:37</span> &nbsp; <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a></div>
        <h4><a href="###">HTML5 发展历史</a></h4>
      </div>
      <div class="item-content">
        <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
      </div>
    </div>
    <div class="item">
      <div class="item-heading">
        <div class="pull-right label label-success">维基</div>
        <h4><a href="###">HTML5 发展历史</a></h4>
      </div>
      <div class="item-content">
        <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
      </div>
      <div class="item-footer">
        <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
      </div>
    </div>
    <div class="item">
      <div class="item-heading">
        <div class="pull-right label label-success">维基</div>
        <h4><a href="###">HTML5 发展历史</a></h4>
      </div>
      <div class="item-content">
        <div class="media pull-right"><img src="docs/img/img2.jpg" alt=""></div>
        <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
      </div>
      <div class="item-footer">
        <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
      </div>
    </div>
    <div class="item">
      <div class="item-heading">
        <div class="pull-right"><a href="###"><i class="icon-pencil"></i> 编辑</a> &nbsp;<a href="#"><i class="icon-remove"></i> 删除</a></div>
        <h4><span class="label label-success">维基</span> <a href="###">HTML5 发展历史</a></h4>
      </div>
      <div class="item-content">
        <div class="text">HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出。2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。[8]目前Mozilla Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer（版本9以上）已支持HTML5技术。</div>
      </div>
      <div class="item-footer">
        <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a> &nbsp; <span class="text-muted">2013-11-11 16:14:37</span>
      </div>
    </div>
  </div>
  <footer>
    <ul class="pager">
      <li class="previous"><a href="#">« 上一页</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">⋯</a></li>
      <li><a href="#">6</a></li>
      <li class="active"><a href="#">7</a></li>
      <li><a href="#">8</a></li>
      <li><a href="#">9</a></li>
      <li><a href="#">⋯</a></li>
      <li><a href="#">12</a></li>
      <li class="next"><a href="#">下一页 »</a></li>
    </ul>
  </footer>
C
* convert html to markdown.  
Catouse 已提交
527 
</div>
C
* update list view document.  
Catouse 已提交
528 
```