向列表组添加自定义内容

我们可以向上面已添加链接的列表组添加任意的 HTML 内容。下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：向列表组添加内容</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>

<div style="padding:20px">
<div class="list-group">
<a href="#" class="list-group-item active" ><h2 class="list-group-item-heading">Html5</h2></a>
<a href="#" class="list-group-item"><h2 class="list-group-item-heading">Css3</h2><p class="list-group-item-text">Css3是html5前端必学的技术</p></a>
</div>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap历练实例：向列表组添加内容的更多相关文章

  1. Bootstrap历练实例：输入框组的大小

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. Bootstrap历练实例：按钮组大小

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. Bootstrap历练实例：向列表组添加链接

    向列表组添加链接 通过使用锚标签代替列表项,我们可以向列表组添加链接.我们需要使用 <div> 代替 <ul> 元素.下面的实例演示了这点: <!DOCTYPE html ...

  4. Bootstrap历练实例：默认的列表组

    Bootstrap 列表组 本章我们将讲解列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-grou ...

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

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

  6. Bootstrap历练实例：带徽章的列表组

    向列表组添加徽章 我们可以向任意的列表项添加徽章组件,它会自动定位到右边.只需要在 <li> 元素中添加 <span class="badge"> 即可.下 ...

  7. Bootstrap历练实例：基本输入框组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. bootstrap历练实例：复选框或单选按钮作为输入框组的前缀或后缀

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. bootstrap历练实例：按钮作为输入框组前缀或后缀

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. 洛谷P2169 正则表达式

    题目背景 小\(Z\)童鞋一日意外的看到小\(X\)写了一个正则表达式的高级程序,这个正则表达式程序仅仅由字符"\(0\)","\(1\)","\(. ...

  2. 如何杀死defunct进程

    原文: How to kill defunct process 译者: youngsterxyf defunct进程是指出错损坏的进程,父子进程之间不会再通信.有时,它们会演变成“僵尸进程”,存留在你 ...

  3. C# 数组之ArrayList

    一.引言 ArrayList类相当于一种高级的动态数组,是Array类的升级版本. 一般的Array,底层是数组实现的,对于数据的查找和修改十分高效.但是有2个大的缺点,其一为增删低效,其二为数组长度 ...

  4. storm maven-shade-plugin

      storm-core pom <plugin> <groupId>org.apache.maven.plugins</groupId> <artifact ...

  5. 爬虫（GET）——handler处理器和自定义opener

    工具:python3 解释:urlopen()不支持代理.cookie等其他的http/https高级功能,所以需要handler处理器创建特定功能的处理器对象,urllib.request.buli ...

  6. HTML——制作一个图片列表

    总结: 1)html有很多默认样式,然而实际应用中并不需要,因此要在制作样式之前清除掉默认样式. 2)注意清除margin-top塌陷 3)使用float:left后要使用clear:both清除其影 ...

  7. 转 DataGuard环境搭建 （一主一备一级联）

    DataGuard环境搭建 (一主一备一级联) http://blog.itpub.net/30130773/viewspace-2116985/ 1.--------- primary_role / ...

  8. java实现xml文件读取并保存到对象

    首先浅聊一下解析xml的四种方式: 1.DOM方式:有缺点但是这个缺点却也是他的优点.下面详细介绍: 以树形的层次结构组织节点或信息片断集合,可以获得同一个文档中的多处不同数据.使用起来简单. 优点是 ...

  9. JAVA 框架之面向对象设计原则

     面向对象设计原则:  单一职责原则 SRP :   一个类或者行为只做一件事 .  降低代码冗余,提高可重用性,可维护性,可扩展性,可读性 使用组合形式   里氏替换原则 LSP :  所有引用基类 ...

  10. check设置默认值但刷新后就会清空

    关于check设置默认值但刷新后就会清空的问题 可能是由于浏览器的问题 我这边就直接在ComponentDidMount里面加jq使得该radio的状态为选中,后边还发现一个问题就是在点击的时候多次点 ...