Bootstrap学习2--组件-列表组
备注：最新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. ...
随机推荐
- modal html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- WebGL 启动载入触发更新流程分析
WebGL 启动载入触发更新流程分析 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载 ...
- C语言中使用库函数解析命令行参数
在编写需要命令行参数的C程序的时候,往往我们需要先解析命令行参数,然后根据这些参数来启动我们的程序. C的库函数中提供了两个函数可以用来帮助我们解析命令行参数:getopt.getopt_long. ...
- AOP切面编程在android上的应用
代码地址如下:http://www.demodashi.com/demo/12563.html 前言 切面编程一直是一个热点的话题,这篇文章讲讲一个第三方aop库在android上的应用.第三方AOP ...
- 清除掉AD的相关属性！
今天有朋友问我怎么清除掉AD 的相关属性,由于他们的用户都设置了登录到属性,这样我们的用户就仅仅能登陆他须要设置的计算机.对于兴许规则的变更的时候,我们的管理员配置起来就比較复杂.他须要非常长的时间去 ...
- Android NDK开发篇(四)：Java与原生代码通信(原生方法声明与定义与数据类型)
Java与原生代码通信涉及到原生方法声明与定义.数据类型.引用数据类型操作.NIO操作.訪问域.异常处理.原生线程 1.原生方法声明与定义 关于原生方法的声明与定义在上一篇已经讲一点了,这次具体分析一 ...
- vim 标签页管理
一.打开关闭标签页 1. :tabnew 新建标签页 2. :tabc 关闭当前标签页 3. :tabo 关闭其他标签页保留当前标签页 4. :tabe file 在新标签页中打开 ...
- VSCode调试.net core 2.0 输出窗口乱码
Q:输出窗口乱码 A:修改.vscode文件夹下,tasks.json文件,具体内容见图
- pip安装错误，用镜像
Retrying (Retry(total=4, connect=None, read=None, redirect=None)) after connection broken by 'Connec ...
- 在Ubuntu下利用Eclipse调试FFmpeg
[编辑]第一步:准备编译环境 .tar.bz2 -2245/ ./configure -linux-i586.tar.gz 解压后得到jre1.7.0_17目录 最后通过java -version检查 ...