bootstrap学习笔记 Bootstrap 列表组
本文将介绍列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下:
向元素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 列表组的更多相关文章
- Bootstrap 学习笔记6 列表组面板嵌入组件
列表组组件: 面板组件:
- Bootstrap学习2--组件-列表组
备注:最新Bootstrap手册:http://www.jqhtml.com/bootstraps-syntaxhigh/index.html 1.列表组 列表组是Bootstrap框架新增的一个组件 ...
- bootstrap学习笔记--bootstrap组件
前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...
- bootstrap学习笔记--bootstrap安装环境
Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...
- bootstrap学习笔记--bootstrap排版类的使用
标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式,这个和一般的html没啥区别.请看下面的实例: <h1>测试1 h1</h1> <h2& ...
- bootstrap学习笔记--bootstrap布局方式
Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备.平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑.台式电脑)上的组件和网格. 移动设备优 ...
- bootstrap学习笔记--bootstrap网格系统
移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备. 现在不一 ...
- bootstrap学习笔记--bootstrap概览
HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 B ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
随机推荐
- [Arc062] Painting Graphs with AtCoDeer
[Arc062] Painting Graphs with AtCoDeer Description 给定一张N点M边的无向图,每条边要染一个编号在1到K的颜色.你可以对一张染色了的图进行若干次操作, ...
- 【SAM】BZOJ2882-工艺
[题目大意] 求一个循环数列的最小表示法. [思路] 最小表示法的正解:★ SAM乱搞,和前面的POJ那道一样.然而MLE了,当作学习一下map的用法^ ^ map的使用方法(来源:☆) 一.map的 ...
- 【Trie模板】HDU1251-统计难题
[题意] n统计出以某个字符串为前缀的单词数量(单词本身也是自己的前缀). [思路] 裸题,不过G++好像会超内存,C++就不会. #include<iostream> #include& ...
- 分页器与form表单
分页器 分页器对象 from django.core.paginator import Paginator Paginator对象: paginator = Paginator(user_list, ...
- NHibernate官方文档中文版--ISessionFactory的配置(ISessionFactory Configuration)
由于NHibernate是被设计应用在许多不同环境中的,因此它存在很多配置参数.幸运的是,这些参数大多都有合理的默认值,而且NHibernate发布的时候伴随着一个App.config 例子(可在sr ...
- Win32 error code message
http://fit.c2.com/fit/files/LispPlatform/lisp/clisp-2.28/src/errwin32.d # Calls a function, passing ...
- 轻量级web服务器lighttpd的编译及配置(for x86-linux)
转自:http://blog.163.com/ljf_gzhu/blog/static/131553440201211522317367/ 备注: PC Linux:Ubuntu-10.10 Linu ...
- PostgreSQL配置文件--QUERY TUNING
5 QUERY TUNING 5.1 Planner Method Configuration. 下列参数控制查询优化器是否使用特定的存取方法.除非对优化器特别了解,一般情况下,使用它们默认值即可. ...
- logback中打印sql语句
To log SQL statements for particular mybatis mapper set DEBUG (TRACE to see query parameters and res ...
- [转]Understanding Integration Services Package Configurations
本文转自:http://msdn.microsoft.com/en-us/library/cc895212.aspx Introduction With the 2008 release, SQL S ...