向列表组添加徽章

我们可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 <li> 元素中添加 <span class="badge"> 即可。下面的实例演示了这点：

<!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">
<ul class="list-group">
<li class="list-group-item">Html5</li>
<li class="list-group-item">Css3</li>
<li class="list-group-item">Bootstrap<span class="badge">3.3.5</span></li>
<li class="list-group-item">Javascript</li>
<li class="list-group-item">jQuery<span class="badge">2.1.4</span></li>
<li class="list-group-item">jQueryUI</li>
<li class="list-group-item">C#.Net</li>
<li class="list-group-item">MsSql</li>
</ul>
</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历练实例：默认的列表组

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

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

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

  3. Bootstrap历练实例：垂直的按钮组

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

  4. Bootstrap历练实例：基本按钮群组

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

  5. Bootstrap 警告、进度条、列表组、面板

    摘要:该部分包括警告.进度条.列表组.面板等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success ...

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

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

  7. Bootstrap历练实例：向列表组添加内容

    向列表组添加自定义内容 我们可以向上面已添加链接的列表组添加任意的 HTML 内容.下面的实例演示了这点: <!DOCTYPE html><html><head>& ...

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

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

  9. Bootstrap历练实例：带表格的面板

    带表格的面板 为了在面板中创建一个无边框的表格,我们可以在面板中使用 class .table.假设有个 <div> 包含 .panel-body,我们可以向表格的顶部添加额外的边框用来分 ...

随机推荐

  1. bzoj 4788: [CERC2016]Bipartite Blanket【hall定理+状压】

    考虑当前合法的一个点集s,如果他合法,那么一定有一个完备匹配的点集包含这个点集,也就是两边都满足hall定理的话这两边拼起来的点集也满足要求 所以分别状压两边点集用hall定理转移判断当前点集是否合法 ...

  2. Fire (poj 2152 树形dp)

    Fire (poj 2152 树形dp) 给定一棵n个结点的树(1<n<=1000).现在要选择某些点,使得整棵树都被覆盖到.当选择第i个点的时候,可以覆盖和它距离在d[i]之内的结点,同 ...

  3. 剑指Offer的学习笔记（C#篇）-- 构建乘积数组

    题目描述 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1].不 ...

  4. HTTP/2之旅 (翻译)

    Journey to HTTP/2 HTTP/2 距离我上一次通过博客写作以来, 经过了很长的一段安静的时间. 因为一直没有足够的时间投入其中. 直到现在有了一些空闲的时间, 我想利用他们写一些HTT ...

  5. 线程池（3）Executors.newCachedThreadPool

    例子: ExecutorService es = Executors.newCachedThreadPool(); try { for (int i = 0; i < 20; i++) { Ru ...

  6. NET Core 模块化，多租户框架

    NET Core 模块化,多租户框架 Orchard Core Framework:ASP.NET Core 模块化,多租户框架 上一篇编写Orchard Core一分钟搭建ASP.NET Core ...

  7. setTimout( , 0) 详解

    setTimout( , 0) 一.前言 前端工程师们工作久了,一般都会在某些地方看见过这样的代码: setTimeout(function(){ // TODO }, 0); 举个实例,移动端我们经 ...

  8. Unity3d网格合并

    几个不同的物体,在Unity3d中可以将网格合并在一起,用于优化. 在Unity3d中构建临时场景如下:建一C#脚本名为"CombineMeshes",挂在Cube上. Combi ...

  9. Java基础：（八）异常

    Throwable可以用来表示任何可以作为异常抛出的类,分为两种:Error和Exception.其中Error用来表示JVM无法处理的错误, Exception又分为两种: 受检异常:需要用try. ...

  10. 基本类型包装类、System类、Math类、Arrays类、大数据运算

    1 基本类型包装类 Java中想对8种基本数据类型进行复杂操作很困难. 实际程序界面上用户输入的数据都是以字符串类型进行存储的. 程序开发中,需要把字符串转换成指定的基本数据类型. 1.1基本数据类型 ...