向列表组添加自定义内容

我们可以向上面已添加链接的列表组添加任意的 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. bzoj 3671: [Noi2014]随机数生成器【模拟+贪心】

    降智好题 前面随机部分按照题意模拟,然后字典序贪心,也就是记录每个值的位置从1~nm依次看能不能取,能取的话更新行的取值范围(它上面的行一定取的列小于等于这个数取的列,下面行大于等于) #includ ...

  2. IT兄弟连 Java语法教程 Java的发展历程

    只有少数几种编程语言对程序设计带来过根本性的影响.其中,Java的影响由于迅速和广泛而格外突出.可以毫不夸张的说,1995年Sun公司发布的Java1.0给计算机程序设计领域带来了一场变革.这场变革迅 ...

  3. SpringBoot进阶教程(五十九)整合Codis

    上一篇博文<详解Codis安装与部署>中,详细介绍了codis的安装与部署,这篇文章主要介绍介绍springboot整合codis.如果之前看过<SpringBoot进阶教程(五十二 ...

  4. 基于IDEA实现SSM整合框架的搭建配置流程

    1.创建数据库表,以员工信息表为例子: DROP TABLE IF EXISTS `em_info`; CREATE TABLE `em_info` ( `em_id` INT(50) NOT NUL ...

  5. python 合并两个文件并将合并内容保存在另一个文件中

    简单地文件合并方法 思路如下: 分别读取两个文件中的内容,并将其保存在一个列表中,将列表通过join()函数转为字符,并将新字符保存在新的文件中. 其中,test1.txt中的内容为: test2.t ...

  6. SublimeText3 snippet 编写总结

    SublimeText3 snippet 编写总结 SublimeText的snippet定义功能也十分强大, 类似VAssist. 在菜单tool->New Snippet中定义.  打开后显 ...

  7. codeforcesRound378C-dfs+树状数组

    分成K个块,每个块内部dfs解决,然后用树状数组统计第i个元素前面有多少怪物已经消失,来计算当前的下标 #include<bits/stdc++.h> #define inf 0x3f3f ...

  8. NET CORE 基础

    NET CORE 基础管理系统 [SF]开源的.NET CORE 基础管理系统 - 安装篇   [SF]开源的.NET CORE 基础管理系统 -系列导航 1.开发必备工具 IDE:VS2017 运行 ...

  9. org.apache.ibatis.binding.BindingException【原因汇总】

    这个问题整整纠结了我四个多小时,心好累啊...不废话... 背景:Spring整合Mybatis 报错:org.apache.ibatis.binding.BindingException: Inva ...

  10. Spark Mllib里如何将如温度、湿度和风速等数值特征字段用除以***进行标准化（图文详解）

    不多说,直接上干货! 具体,见 Hadoop+Spark大数据巨量分析与机器学习整合开发实战的第18章 决策树回归分类Bike Sharing数据集