备注：最新Bootstrap手册：http://www.jqhtml.com/bootstraps-syntaxhigh/index.html

1、列表组

列表组是Bootstrap框架新增的一个组件，可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。由于其在Bootstrap是一个独立的组件，所以也对应有自己独立源码：

☑ LESS版本：对应的源码文件 list-group.less

☑ Sass版本：对应的源码文件是 _list-group.scss

☑ 编译出的Bootstrap版本：对应的源码bootstrap.css文件第4820行～第4994行

2、列表组–基础列表组

基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分：

☑ list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素

☑ list-group-item：列表项，常用的是li元素，当然也可以是div元素

3、列表组–事例

1） 基本列表组    
2） 徽记    
3） 链接    
4） 按钮    
5） 颜色

  • 基本列表组

<!DOCTYPE html>

<script src="js/jquery/2.0.0/jquery.min.js"></script>

<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">

<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>

<ul class="list-group">

  <li class="list-group-item">回锅肉</li>

  <li class="list-group-item">烧烤</li>

  <li class="list-group-item">鱼香肉丝</li>

  <li class="list-group-item">麻婆豆腐</li>

  <li class="list-group-item">夫妻肺片</li>

</ul>
  • 徽记(class="badge")

<!DOCTYPE html>

<script src="js/jquery/2.0.0/jquery.min.js"></script>

<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">

<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>

<ul class="list-group">

  <li class="list-group-item"><span class="badge">3</span>回锅肉</li>

  <li class="list-group-item"><span class="badge">14</span>烧烤</li>

  <li class="list-group-item"><span class="badge">15</span>鱼香肉丝</li>

  <li class="list-group-item"><span class="badge">92</span>麻婆豆腐</li>

  <li class="list-group-item"><span class="badge">6</span>夫妻肺片</li>

</ul>
  • 链接(<a href="#"></a>)("<class="active">:激活状态)

<!DOCTYPE html>

<script src="js/jquery/2.0.0/jquery.min.js"></script>

<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">

<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>

<div class="list-group">

  <a href="#" class="list-group-item active">

    回锅肉

  </a>

  <a href="#" class="list-group-item">烧烤</a>

  <a href="#" class="list-group-item">鱼香肉丝</a>

  <a href="#" class="list-group-item">麻婆豆腐</a>

  <a href="#" class="list-group-item">夫妻肺片</a>

</div>
  • 按钮

<!DOCTYPE html>

<script src="js/jquery/2.0.0/jquery.min.js"></script>

<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">

<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>

<div class="list-group">

  <button type="button" class="list-group-item active">

    回锅肉

  </button>

  <button type="button" class="list-group-item">烧烤</button>

  <button type="button" class="list-group-item">鱼香肉丝</button>

  <button type="button" class="list-group-item">麻婆豆腐</button>

  <button type="button" class="list-group-item">夫妻肺片</button>

</div>
  • 颜色

<!DOCTYPE html>

<script src="js/jquery/2.0.0/jquery.min.js"></script>

<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">

<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>

<div class="list-group">

  <a href="#" class="list-group-item active">

    回锅肉

  </a>

  <a href="#" class="list-group-item list-group-item-success">烧烤</a>

  <a href="#" class="list-group-item list-group-item-info">鱼香肉丝</a>

  <a href="#" class="list-group-item list-group-item-warning">麻婆豆腐</a>

  <a href="#" class="list-group-item list-group-item-danger">夫妻肺片</a>

</div>

Bootstrap学习2--组件-列表组的更多相关文章

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

    列表组组件: 面板组件:

  2. 详解Bootstrap列表组组件

    列表组可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码: LESS:list-group.le ...

  3. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  4. Bootstrap历练实例：带列表组的面板

    带列表组的面板 我们可以在任何面板中包含列表组,通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板,并在面板中添加列表组.您可以从 列表组 一章中 ...

  5. Bootstrap学习笔记面板(Panels)

    本文将讲解Bootstrap面板(Panels).面板组件用于把DOM组件插入到一个盒子中.创建一个基本的面板,只需要向div元素添加class .panel和 panel-default即可,如下面 ...

  6. Bootstrap学习笔记（三）

    三.组件 1.图标字体 图标字体本质是文字,而不是图形!可以无限放大或修改颜色. 使用方式:<span class="glyphicon glyphicon-XXX"> ...

  7. Bootstrap学习之路（3）---列表组件

    列表是几乎所有网站都会用到的一个组件,正好bootstrap也给我们提供了这个组件的样式,下面我给大家简单介绍一下bootstrap中的列表组件的用法! 首先,重提一下引用bootstrap的核心文件 ...

  8. 第二百四十二节，Bootstrap列表组面板和嵌入组件

    Bootstrap列表组面板和嵌入组件 学习要点: 1.列表组组件 2.面板组件 3.响应式嵌入组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:列表组组件.面板组件. 响应 式嵌入组 ...

  9. Bootstrap入门（二十二）组件16：列表组

    Bootstrap入门(二十二)组件16:列表组 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容. 1.默认样式列表组 2.加入徽章 3.链接 4.禁用的列表组 5. ...

随机推荐

  1. Android学习（二十）Notification通知栏

    一.通知栏的内容 1.图标 2.标题 3.内容 4.时间 5.点击后的相应 二.如何实现通知栏 1.获取NotificationManager. 2.显示通知栏:notify(id,notificat ...

  2. Oracle 隐式游标 存储过程

    --隐式游标 注意变量赋值用(:=) 连接符用(||)而不是加号(+) DECLARE v_pk T_PLAT_KEYWORD.ID%TYPE; --主键 v_amount_message T_PLA ...

  3. [1-6] 把时间当做朋友（李笑来）Chapter 6 【更多思考】 摘录

    记住,你不可能百分之百地有效率,至少不可能总是百分之百地有效率. 他们的效率很差.根源在于,他们其实只做简单的事情,而回避那些有难度的工作. 好像丢钱包的人都不是“故意”丢的一样,办事拖拉的人大多并非 ...

  4. java精确除法计算，四舍五入 Java问题通用解决代码

    主要用java.math.BigDecimal工具类实现,想要了解BigDecimal类可以看java api   正式版:        public static Double divide() ...

  5. Objective-C中的关联（objc_setAssociatedObject,objc_getAssociatedObject,objc_removeAssociatedObjects）

    关联的概念 所谓的关联,字面意思是把两个相关的对象放在一起,实际也是如此.把两个对象相互关联起来,使得其中的一个对象成为另外一个对象的一部分,这就是关联. 关联的作用 使用Category,我们可以给 ...

  6. 02-1设置第一启动项--电脑怎么进入BIOS的方法集合

    电脑怎么进入BIOS的方法集合 很多时候为了对电脑进行相关设置,我们必须进入电脑的bios界面,但是不同的电脑进入bios的方法各不相同,小编今天就在这儿将各种电脑进入bios的方法汇总一下,希望对你 ...

  7. sql2000实现row_number

    一.以PersonID,classid,dt_ClassData为条件进行分组,每个小组加序号,row_number在sql2005中不可用 方法一.sql2000及以上版本--以PersonID,c ...

  8. 500 lines or less

    今天碰到一本书 <500 lines or less>突然就想在博客上记录一下自己的阅读经历了. 现在记录一下这本书的地址 http://aosabook.org/en/index.htm ...

  9. Spring Security三种认证

    Spring Security: 1.用户名+密码认证 2.手机号+短信认证 Spring Social: 1.第三方认证, QQ登录等 Spring Security OAuth: 1.把认证之后的 ...

  10. linux 登陆key生成

    1.登录A机器 2.ssh-keygen -t rsa,将会生成密钥文件和私钥文件 id_rsa,id_rsa.pub或id_dsa,id_dsa.pub Generating public/priv ...