简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

directory search

Bootstrap 基础教程 Bootstrap 环境安装 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概览 Bootstrap 按钮 Bootstrap 表单 Bootstrap 表格 Bootstrap 代码 Bootstrap 辅助类 Bootstrap 排版 Bootstrap 图片 Bootstrap 网格系统 Bootstrap 网格系统实例：堆叠的水平 Bootstrap 网格系统实例：手机、平板电脑、台式电脑 Bootstrap 网格系统实例：中型和大型设备 Bootstrap 响应式实用工具 Bootstrap 布局组件 Bootstrap Well Bootstrap 按钮下拉菜单 Bootstrap 按钮组 Bootstrap 标签 Bootstrap 超大屏幕（Jumbotron） Bootstrap 导航栏 Bootstrap 导航元素 Bootstrap 多媒体对象（Media Object） Bootstrap 分页 Bootstrap 徽章（Badges） Bootstrap 进度条 Bootstrap 警告（Alerts） Bootstrap 列表组 Bootstrap 面板（Panels） Bootstrap 面包屑导航（Breadcrumbs） Bootstrap 输入框组 Bootstrap 缩略图 Bootstrap 下拉菜单（Dropdowns） Bootstrap 页面标题（Page Header） Bootstrap 字体图标(Glyphicons) Bootstrap 插件 Bootstrap 按钮（Button） Bootstrap 标签页（Tab） Bootstrap 插件概览 Bootstrap 弹出框（Popover） Bootstrap 附加导航（Affix） Bootstrap 滚动监听（Scrollspy） Bootstrap 过渡效果（Transition） Bootstrap 警告框（Alert） Bootstrap 轮播（Carousel） Bootstrap 模态框（Modal）插件 Bootstrap 提示工具（Tooltip） Bootstrap 下拉菜单（Dropdown） Bootstrap 折叠（Collapse） Bootstrap 附录 Bootstrap CSS编码规范 Bootstrap HTML编码规范 Bootstrap UI 编辑器

characters

Bootstrap 列表组

本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：

向元素 <ul> 添加 class .list-group。
向 <li> 添加 class .list-group-item。

下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 基本的列表组</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="list-group">
   <li class="list-group-item">免费域名注册</li>
   <li class="list-group-item">免费 Window 空间托管</li>
   <li class="list-group-item">图像的数量</li>
   <li class="list-group-item">24*7 支持</li>
   <li class="list-group-item">每年更新成本</li>
</ul>


</body>
</html>

结果如下所示：

向列表组添加徽章

我们可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 <li> 元素中添加 <span class="badge"> 即可。下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 向列表组添加徽章</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="list-group">
   <li class="list-group-item">免费域名注册</li>
   <li class="list-group-item">免费 Window 空间托管</li>
   <li class="list-group-item">图像的数量</li>
   <li class="list-group-item">
      <span class="badge">新</span>
      24*7 支持
   </li>
   <li class="list-group-item">每年更新成本</li>
   <li class="list-group-item">
      <span class="badge">新</span>
      折扣优惠
   </li>
</ul>


</body>
</html>

结果如下所示：

向列表组添加链接

通过使用锚标签代替列表项，我们可以向列表组添加链接。我们需要使用 <div> 代替 <ul> 元素。下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 向列表组添加链接</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<a href="#" class="list-group-item active">
   免费域名注册
</a>
<a href="#" class="list-group-item">24*7 支持</a>
<a href="#" class="list-group-item">免费 Window 空间托管</a>
<a href="#" class="list-group-item">图像的数量</a>
<a href="#" class="list-group-item">每年更新成本</a>


</body>
</html>

结果如下所示：

向列表组添加自定义内容

我们可以向上面已添加链接的列表组添加任意的 HTML 内容。下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 向列表组添加自定义内容</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="list-group">
   <a href="#" class="list-group-item active">
      <h4 class="list-group-item-heading">
         入门网站包
      </h4>
   </a>
   <a href="#" class="list-group-item">
      <h4 class="list-group-item-heading">
         免费域名注册
      </h4>
      <p class="list-group-item-text">
         您将通过网页进行免费域名注册。
      </p>
   </a>
   <a href="#" class="list-group-item">
      <h4 class="list-group-item-heading">
         24*7 支持
      </h4>
      <p class="list-group-item-text">
         我们提供 24*7 支持。
      </p>
   </a>
</div>
<div class="list-group">
   <a href="#" class="list-group-item active">
      <h4 class="list-group-item-heading">
         商务网站包
      </h4>
   </a>
   <a href="#" class="list-group-item">
      <h4 class="list-group-item-heading">
         免费域名注册
      </h4>
      <p class="list-group-item-text">
         您将通过网页进行免费域名注册。
      </p>
   </a>
   <a href="#" class="list-group-item">
      <h4 class="list-group-item-heading">24*7 支持</h4>
      <p class="list-group-item-text">我们提供 24*7 支持。</p>
   </a>
</div>


</body>
</html>

结果如下所示：

Previous article： Next article：