备注：最新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--组件-列表组的更多相关文章

Bootstrap 学习笔记6 列表组面板嵌入组件
列表组组件: 面板组件:
详解Bootstrap列表组组件
列表组可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码: LESS:list-group.le ...
Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
Bootstrap历练实例：带列表组的面板
带列表组的面板我们可以在任何面板中包含列表组,通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板,并在面板中添加列表组.您可以从列表组一章中 ...
Bootstrap学习笔记面板(Panels)
本文将讲解Bootstrap面板(Panels).面板组件用于把DOM组件插入到一个盒子中.创建一个基本的面板,只需要向div元素添加class .panel和 panel-default即可,如下面 ...
Bootstrap学习笔记（三）
三.组件 1.图标字体图标字体本质是文字,而不是图形!可以无限放大或修改颜色. 使用方式:<span class="glyphicon glyphicon-XXX"> ...
Bootstrap学习之路（3）---列表组件
列表是几乎所有网站都会用到的一个组件,正好bootstrap也给我们提供了这个组件的样式,下面我给大家简单介绍一下bootstrap中的列表组件的用法! 首先,重提一下引用bootstrap的核心文件 ...
第二百四十二节，Bootstrap列表组面板和嵌入组件
Bootstrap列表组面板和嵌入组件学习要点: 1.列表组组件 2.面板组件 3.响应式嵌入组件本节课我们主要学习一下 Bootstrap 的三个组件功能:列表组组件.面板组件. 响应式嵌入组 ...
Bootstrap入门（二十二）组件16：列表组
Bootstrap入门(二十二)组件16:列表组列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容. 1.默认样式列表组 2.加入徽章 3.链接 4.禁用的列表组 5. ...

随机推荐

urllib urllib2
#-*-coding:utf-8-*- import urllib import urllib2 import cookielib ##urllib url="http://www.qq.c ...
vi 替换操作
举例一: ,$s/// 从第一行到最后一行 147都替换为150 举例二: 例:替换当前文件中所有old为new :%s/old/new/g #%表示替换说有行,g表示替换一行中所有匹配点. 举例三: ...
HDU-1047-Integer Inquiry(Java大数水题 && 格式恶心)
Integer Inquiry Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
android中依据不同分辨率dp和px的相互转算
public class PxAndDp { /** * 依据手机的分辨率从 dp 的单位转成为 px(像素) */ public static int dip2px(Context context ...
杂(三)-The type java.lang.Object cannot be resolved It is indirectly referenced ...
The type java.lang.Object cannot be resolved. It is indirectly referenced from required .class files ...
GB28181出内网
最近关注GB28181的朋友很多,昨天有位朋友问到GB28181出内网的问题,希望我花5分钟的时间讲讲如何通过GB28181协议将内网的摄像机视频推送到公网.要说清楚这个问题,5分钟的时间应该不够 ...
MyReport报表引擎2.7.8.8公布
支持嵌套子报表直接编辑保存,多个子报表同一时候存储在一个报表格式文件中,设计更简便,避免了嵌套报表的多个报表格式载入. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5 ...
[C++设计模式] singleton 单例模式
这个设计模式主要目的是想在整个系统中仅仅能出现一个类的实例.这样做当然是有必定的.比方你的软件的全局配置信息,或者是一个Factory,或是一个主控类,等等. 你希望这个类在整个系统中仅仅能出现一个实 ...
STM32 寄存器库和固件库
寄存器和固件库开发的差别和联系固件库就是函数的集合,固件库函数的作用是向下负责与寄存器直接打交道.向上提供用户函数调用的接口(API). 在 51 的开发中我们经常的作法是直接操作寄存器,比方要控制 ...
iOS SDWebImage Error Domain=NSURLErrorDomain Code=-1202 “此服务器的证书无效
sdwebImage 加载网络图片的时候,如果使用的https证书未经过认证,或者证书有问题,会出现Error Domain=NSURLErrorDomain Code=-1202 "此服务 ...