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. ...
随机推荐
- Asp.net Mvc使用PagedList分页
git:https://github.com/troygoode/PagedList 1. Nuget 安装package watermark/2/text/aHR0cDovL2Jsb2cuY3Nkb ...
- react-native flex 布局 详解
而在React Native中,有4个容器属性,2个项目属性,分别是: 容器属性:flexDirection flexWrap justifyContent alignItems 项目属性( ...
- C# : 资源文件(多用于处理国际化)
1.建立Resource文件夹,添加资源文件 处理国际化的问题,我们可以添加多个资源文件,如下就是添加一个中文的,一个英文的. 2.向其中添加键值对. 3.取值 CultureInfo uiCultu ...
- shell脚本检测网络是否畅通
shell初始化安装脚本执行时,需从网络上安装一些rpm包,所有需要先检测网络的畅通性, 代码 #检测网络链接&&ftp上传数据 function networkAndFtp() { ...
- Python GUI之tkinter窗口视窗教程大集合（看这篇就够了） JAVA日志的前世今生 .NET MVC采用SignalR更新在线用户数 C#多线程编程系列（五）- 使用任务并行库 C#多线程编程系列（三）- 线程同步 C#多线程编程系列（二）- 线程基础 C#多线程编程系列（一）- 简介
Python GUI之tkinter窗口视窗教程大集合(看这篇就够了) 一.前言 由于本篇文章较长,所以下面给出内容目录方便跳转阅读,当然也可以用博客页面最右侧的文章目录导航栏进行跳转查阅. 一.前言 ...
- mysql中的for update
Select…For Update语句的语法与select语句相同,只是在select语句的后面加FOR UPDATE [NOWAIT]子句. 该语句用来锁定特定的行(如果有where子句,就是满足w ...
- 华为nova3超级慢动作酷玩抖音，没有办法我就是这么强大！
华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大! 在华为最新发布的nova 3手机上,抖音通过华为himedia SDK集成了60fps.超级慢动作等华为媒体开放能力,在加持这些能力后,抖音 ...
- (1)安装kvm
我的环境是redhat虚拟机,版本信息如下: [root@localhost ~]# cat /etc/issue Red Hat Enterprise Linux Server release 6. ...
- 启用nginx报错80端口被占用
最近在本机跑nginx,启动后报错,怀疑80端口被占用 netstat -ano|findstr 尝试一:查看后发现端口被一个System pid 为4的一个程序占用.我在资源管理器中尝试将Syste ...
- Android BroadcastReceiver介绍 (转)
原文地址:http://www.cnblogs.com/trinea/archive/2012/11/09/2763182.html 本文主要介绍BroadcastReceiver的概念.使用.生命周 ...