您可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观，如下面的实例所示：

<!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:100px">
<span class="label label-default">Label</span>
<span class="label label-success">Label</span>
<span class="label label-info">Label</span>
<span class="label label-primary">Label</span>
<span class="label label-warning">Label</span>
<span class="label label-danger">Label</span>
</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提供的用于定义导航元素的一些选项,它使用相同的标签和基类.nav.Bootsrtap也提供了一个用于共享标记和状态的帮助器类.改变修饰的class,可以在不同的样式间进行切 ...

  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历练实例：轮播(carousel)

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

  5. Bootstrap历练实例：默认的媒体对象

    Bootstrap 多媒体对象(Media Object) 本章我们将讲解 Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论), ...

  6. Bootstrap历练实例：默认的缩略图

    本章将讲解Bootstrap缩略图,大多数站点都需要要在网格中布局图像,视频,文本.Bootstrap通过缩略图为此提供了一些简便的方法,使用Bootstrap创建缩略图的步骤如下: 1.在图像的周围 ...

  7. Bootstrap历练实例：响应式导航(带有表单)

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

  8. Bootstrap历练实例：响应式导航

    <!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...

  9. Bootstrap 历练实例-轮播(carousel)插件的事件

    事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...

随机推荐

  1. Unite 2017 干货整理 同步篇

    http://www.kisence.com/2017/05/17/unite-2017-gan-huo-zheng-li-tong-bu-pian/ Unite 2017 干货整理 同步篇 2017 ...

  2. VMware Workstation “无法连接 MKS: 套接字连接尝试次数太多；正在放弃。” 解决方法【转】

    今天和往常一样打开电脑,打开VMware Workstation,打开其中的一台虚拟机,以前都是这么打开没有问题,今天打开虚拟机突然提示“无法连接 MKS: 套接字连接尝试次数太多:正在放弃.”. 经 ...

  3. Python 获取页面title

    #!/usr/bin/python #coding=utf- #urllib2是python自带的模块,在python3.x中被改为urllib.request import urllib.reque ...

  4. 洛谷P2647 最大收益

    P2647 最大收益 题目描述 现在你面前有n个物品,编号分别为1,2,3,……,n.你可以在这当中任意选择任意多个物品.其中第i个物品有两个属性Wi和Ri,当你选择了第i个物品后,你就可以获得Wi的 ...

  5. MySQL审计工具Audit Plugin安装使用

    本实验的审计插件均是安装在 mysql-community-server-5.7.9 的服务器上. 插件安装(社区版) 插件下载地址: https://bintray.com/mcafee/mysql ...

  6. 剑指Offer的学习笔记（C#篇）-- 不用加减乘除做加法

    题目描述 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 一 . 理解题目 这个题目可以让我们回归到小学,想想加法的竖式是怎么写的,哈哈,如果当时你不是那个竖式写错了, ...

  7. Centos下磁盘管理的常用命令记录（如查找大文件）

    Centos下磁盘管理的常用命令记录 查看系统磁盘空间占用,使用命令: df -h 结果: 查看磁盘inode使用情况,如果inode用完了,磁盘就没法写入新的内容了: df -i 结果: 如何查找磁 ...

  8. linux查看系统版本(适用于centos、ubutun，其他类型没有进行测试)

    方法一:cat /etc/issue 或more /etc/issue root@salt-master:~# cat /etc/issueUbuntu 16.04.2 LTS \n \l 方法二:l ...

  9. Java怎么把一个.log文件，以text文件方式打开，显示在桌面

    总要有一个开始吧 群里面有一个哥们,问这个问题,索性记录下来, quextion: Java怎么把一个.log文件,以text文件方式打开,显示在桌面 anwser: 这里注意一个问题:拼接路径的时候 ...

  10. Rebus消息总线

    这里主要讲一下我基于Rebus写的一个ABP框架的模块   目录结构 对于Rebus网上的资料很少,其实我对于服务总线也不是很理解 ..个人理解的就是像ABP中的EventBus那样的,但是集成了一些 ...