向列表组添加徽章

我们可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 <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. 在VS2008中使用Qt编程(转)

    http://www.cnblogs.com/JohnShao/archive/2012/07/25/2608561.html     一.安装所需软件            1.   下载安装VS2 ...

  2. Django + Vue cli 3.0 访问静态资源问题

    [问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...

  3. thinkphp5部署到LAMP服务器显示Access denied.

    问题:thinkphp5部署到LAMP服务器,首页正常访问,其余页面访问显示Access denied 解决:1.先把文件夹权限改为777 2. 进入服务器,改文件.将php.ini的值改成1

  4. npm、webpack、vue-cli 快速上手

    npm+webpack+vue-cli快速上手   Node.js   npm 什么是Node.js  以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome ...

  5. Django-Rest-Framework的序列化之serializers 序列化组件

    Django-Rest-Framework的序列化之serializers 序列化组件 restful framework 正常的序列化 from django.http import HttpRes ...

  6. 关于JS点击button之灵活替换改变内容方法

    <p id="demo">JavaScript 能改变 HTML 元素的内容.</p> <script>function myFunction( ...

  7. 长春理工大学第十四届程序设计竞赛（重现赛）J.Printout

    链接:https://ac.nowcoder.com/acm/contest/912/J 题意: 小r为了打校赛,他打算去打字社打印一份包含世界上所有算法的模板. 到了打字社,小r一看价格:总打印页数 ...

  8. GYM 101933K（二项式反演、排列组合）

    方法一 设\(f_i\)为最多使用\(i\)种颜色的涂色方案,\(g_i\)为恰好只使用\(i\)种颜色的涂色方案.可知此题答案为\(g_k\). 根据排列组合的知识不难得到\(f_k = \sum_ ...

  9. canvas前端压缩图片

    参考网上的用法,下面是利用canvas进行的图片压缩 <!DOCTYPE html> <html> <head> <meta charset="ut ...

  10. Zookeeper+websocket实现对分布式服务器的实时监控（附源码下载）

    ​ 我就是个封面 Zookeeper简介 Zookeeper是Hadoop的一个子项目,它是分布式系统中的协调系统. 简单来说就是一个Zookeeper注册同步中心,内部结构为一个树形目录,每个节点上 ...