向列表组添加徽章

我们可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 <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. 字符环（openjudge 2755）

    字符环 总时间限制: 1000ms   内存限制: 65536kB 描述 有两个由字符构成的环.请写一个程序,计算这两个字符环上最长连续公共字符串的长度.例如,字符串“ABCEFAGADEGKABUV ...

  2. 第一个Three.js程序——加入相机

  3. jave （java的ffmpeg框架）简单使用

    引入文件( jave-native-win64 windows 64位系统jave-native-linux64 linux 64位系统按自己服务器系统来替换 ) <dependency> ...

  4. 链家H5项目总结

    在此次项目中,使用的是高度百分比.对于适配这一块确实少了很多. 1.如果是用高度百分比的话.则img需要写成这样的样式. img{ width:auto; height:100%; display: ...

  5. [Java]HashSet的工作原理

    概述 This class implements the Set interface, backed by a hash table (actually a HashMap instance). It ...

  6. P1829 [国家集训队]Crash的数字表格 / JZPTAB 莫比乌斯反演

    又一道...分数和取模次数成正比$qwq$ 求:$\sum_{i=1}^N\sum_{j=1}^Mlcm(i,j)$ 原式 $=\sum_{i=1}^N\sum_{j=1}^M\frac{i*j}{g ...

  7. eShopOnContainers（一）

    微软微服务架构eShopOnContainers(一) 为了推广.Net Core,微软为我们提供了一个开源Demo-eShopOnContainers,这是一个使用Net Core框架开发的,跨平台 ...

  8. windows live writer 安装失败 0x80190194 解决方法

    windows live writer已经停止更新,部分安装包无法下载. 改安装windows软件包即可,其中包含windows live writer的安装. 参考: http://jingyan. ...

  9. 复习KMP

    KMP刚学的时候,看不懂. 再看,哇!原来是这样! 用的时候,忘了. 为了不再跌倒,我决定,记住吧... 在我看来,KMP一般用于字符串匹配时的防超时优化. 他的精髓就是,利用已经匹配的信息,简化这之 ...

  10. 关于Identityserver4和IdentityServer3 授权不兼容的问题

    使用IdentityServer3 作为授权服务器,如果没有设置证书,而且client又没有设置AccessTokenType = AccessTokenType.Reference,则获取token ...