本文将介绍列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下:

向元素ul 添加class list-group

向li添加class list-group-item

下面的示例演示了这点:

HTML

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

向列表组中添加徽章

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

HTML

<h2>添加徽章</h2>
<ul class="list-group">
<li class="list-group-item">免费注册域名</li>
<li class="list-group-item">免费windows空间托管</li>
<li class="list-group-item">托管的数量</li>
<li class="list-group-item">24*7 支持</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>

向列表组添加链接

通过用锚标签代替列表项,我们可以向列表组添加链接。我们需要使用div代替ul元素。下面的示例和效果演示了这一点:

先看效果:

HTML

<h4>列表组中的链接</h4>
<div>
<a href="#" class="list-group-item">免费域名注册</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>
</div>

向列表组添加自定义内容

我们可以向上面添加链接的列表任意的html内容。下面的示例演示了这点:

效果:

html

<h4>列表组中的自定义内容</h4>
<ul class="list-group">
<li class="list-group-item active">
<h4 class="list-group-item-heading">入门网站包</h4>
<p>你将通过网页进行免费域名注册</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">24*7 支持</h4>
<p>我们提供24*7 支持</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">商务网站包
</h4>
</li>
<li class="list-group-item">托管的数量</li>
</ul>

本节完。

bootstrap学习笔记 Bootstrap 列表组的更多相关文章

  1. Bootstrap 学习笔记6 列表组面板嵌入组件

    列表组组件: 面板组件:

  2. Bootstrap学习2--组件-列表组

    备注:最新Bootstrap手册:http://www.jqhtml.com/bootstraps-syntaxhigh/index.html 1.列表组 列表组是Bootstrap框架新增的一个组件 ...

  3. bootstrap学习笔记--bootstrap组件

    前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...

  4. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

  5. bootstrap学习笔记--bootstrap排版类的使用

    标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式,这个和一般的html没啥区别.请看下面的实例: <h1>测试1 h1</h1> <h2& ...

  6. bootstrap学习笔记--bootstrap布局方式

    Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备.平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑.台式电脑)上的组件和网格. 移动设备优 ...

  7. bootstrap学习笔记--bootstrap网格系统

    移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备. 现在不一 ...

  8. bootstrap学习笔记--bootstrap概览

    HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 B ...

  9. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

随机推荐

  1. [Arc062] Painting Graphs with AtCoDeer

    [Arc062] Painting Graphs with AtCoDeer Description 给定一张N点M边的无向图,每条边要染一个编号在1到K的颜色.你可以对一张染色了的图进行若干次操作, ...

  2. 【SAM】BZOJ2882-工艺

    [题目大意] 求一个循环数列的最小表示法. [思路] 最小表示法的正解:★ SAM乱搞,和前面的POJ那道一样.然而MLE了,当作学习一下map的用法^ ^ map的使用方法(来源:☆) 一.map的 ...

  3. 【Trie模板】HDU1251-统计难题

    [题意] n统计出以某个字符串为前缀的单词数量(单词本身也是自己的前缀). [思路] 裸题,不过G++好像会超内存,C++就不会. #include<iostream> #include& ...

  4. 分页器与form表单

    分页器 分页器对象 from django.core.paginator import Paginator Paginator对象: paginator = Paginator(user_list, ...

  5. NHibernate官方文档中文版--ISessionFactory的配置(ISessionFactory Configuration)

    由于NHibernate是被设计应用在许多不同环境中的,因此它存在很多配置参数.幸运的是,这些参数大多都有合理的默认值,而且NHibernate发布的时候伴随着一个App.config 例子(可在sr ...

  6. Win32 error code message

    http://fit.c2.com/fit/files/LispPlatform/lisp/clisp-2.28/src/errwin32.d # Calls a function, passing ...

  7. 轻量级web服务器lighttpd的编译及配置(for x86-linux)

    转自:http://blog.163.com/ljf_gzhu/blog/static/131553440201211522317367/ 备注: PC Linux:Ubuntu-10.10 Linu ...

  8. PostgreSQL配置文件--QUERY TUNING

    5 QUERY TUNING 5.1 Planner Method Configuration. 下列参数控制查询优化器是否使用特定的存取方法.除非对优化器特别了解,一般情况下,使用它们默认值即可. ...

  9. logback中打印sql语句

    To log SQL statements for particular mybatis mapper set DEBUG (TRACE to see query parameters and res ...

  10. [转]Understanding Integration Services Package Configurations

    本文转自:http://msdn.microsoft.com/en-us/library/cc895212.aspx Introduction With the 2008 release, SQL S ...