bootstrap-列表组--带徽章的列表组

1.运行效果如图所示

2.实现代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>列表组--带徽章的列表组</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
    crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
    crossorigin="anonymous">
</head>
<body>
    <ul class="list-group">
        <li class="list-group-item">
            <span class="badge">13</span>揭开CSS3的面
        </li>
        <li class="list-group-item">
            <span class="badge">456</span>CSS3选择器
        </li>
        <li class="list-group-item">
            <span class="badge">892</span>CSS3边框
        </li>
        <li class="list-group-item">
            <span class="badge">90</span>CSS3背景
        </li>
        <li class="list-group-item">
            <span class="badge">1290</span>CSS3文本
        </li>
    </ul>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"></script>
</body>
</html>

时间： 2024-08-28 13:29:01

bootstrap-列表组--带徽章的列表组的相关文章

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

向列表组添加徽章我们可以向任意的列表项添加徽章组件,它会自动定位到右边.只需要在 <li> 元素中添加 <span class="badge"> 即可.下面的实例演示了这点: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <

摘要:该部分包括警告.进度条等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success..alert-info..alert-danger..alert-warning.代码示例: 1 <div class="alert alert-success">成功</div> 2 <div class="alert alert-info">

Linux权限、组管理和访问控制列表(ACL)

一.用户组管理创建组 groupad命令: groupadd [OPTION]... group_name -g GID: 指明GID号:[GID_MIN,GID_MAX] -r: 创建系统组: CentOS 6: ID<500 CentOS 7:ID<1000 组属性修改 groupmod命令: groupmod [OPTION]... group_name -g:GID,改变组id -n:改变组名 groupmod -n mutest mysystem g

Android UI（五）云通讯录项目之联系人列表，带侧滑选择，带搜索框

作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节.交流QQ群:[编程之美 365234583]http://jq.qq.com/?_wv=1027&k=XVfBTo 要捐钱的就打支付宝吧:13958686678(泥瓦匠开个玩笑~) 一.前言继续AndroidUI系列,泥瓦匠又要开始扯淡了.哈哈今天在文章头加了个支付宝账号.我也真逗,至今没收到一笔是写博客的钱.或是分享的.泥瓦匠也就挂着逗逗乐

Android实现“是否退出”对话框和“带图标的列表”对话框

今天我们学习的内容是实现两种对话框(Dialog),第一种是询问是否退出对话框,另外一种是带图标的列表对话框,程序的执行效果是,我们点击button1的时候,弹出第一种对话框,我们点击button2的时候,弹出另外一种对话框. (1) 首先是布局方面,有三个xml文件,一个是Activity的布局文件,一个是Dialog的布局文件,一个是ListView的布局文件,内容分别例如以下: activity_main.xml <LinearLayout xmlns:android="http:

jquerymobile带过滤器的列表事例

<!DOCTYPE html> <html> <head> <title>带过滤器的列表</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" /> <script type="text/javascript" src="http:/

java构建树形列表（带children属性）

一些前端框架提供的树形表格需要手动构建树形列表(带children属性的对象数组),这种结构一般是需要在Java后台构建好. 构建的方式是通过id字段与父id字段做关联,通过递归构建children字段来达到构建树形列表的目的. /** * 树形表格工具类 * * @author yanggb */ public class TreeTableUtil {/** * 把列表转换为树结构 * * @param originalList 原始list数据 * @param idFieldName 作

Bootstrap <基础二十一>徽章（Badges）

Bootstrap 徽章(Badges).徽章与标签相似,主要的区别在于徽章的边角更加圆滑. 徽章(Badges)主要用于突出显示新的或未读的项.如需使用徽章,只需要把 <span class="badge"> 添加到链接.Bootstrap 导航等这些元素上即可. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 徽章(Badges)</ti

zimbra用zmprov命令创建群组并授权向群组发邮件

zmprov工具能够执行许多任务,比如创建账号,别名,域名,COS,列表和日历等对邮件管理员来说,在日常工作方面,zmporv是一个在CLI(command line interface)下强有力的工具,当然你也可以在管理员控制台执行这些操作 //邮件环境系统centos6.4,zimbra7 zimbra正常工作,域名使用zijian.com 建立测试用户有user1,user2,user3,...user10 //群组信息查看 1.查看某个域名下所有群组(getAlldistributi