您可以使用修饰的 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. unity_pojie

    http://www.ceeger.com/forum/read.php?tid=23396&desc=1

  2. JS 检查是否在微信浏览器

    /** * 检查是否在微信浏览器 * zengkai */ function isWeixinBrowser(){ var ua = navigator.userAgent.toLowerCase() ...

  3. PHP SOAP 提交XML

    <?php $xmldata = <<<EOT <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap. ...

  4. selenium+Python搭建

    安装环境:windows 7 64位   1.安装python,版本为python2.7 1)下载安装包. 在python官方网站选择下载python2版本的windows安装包:python-2.7 ...

  5. 剑指Offer的学习笔记（C#篇）-- 整数中1出现的次数（从1到n整数中1出现的次数）

    题目描述 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了. ...

  6. C 语言实例 - 判断正数/负数

    C 语言实例 - 判断正数/负数 用户输入一个数字,判断该数字是正数还是负数或是零. 实例 #include <stdio.h> int main() { double number; p ...

  7. git clone 指定新建本地库位置

  8. SonarQube总结

    官网:https://www.sonarqube.org/ 一款代码质量管理开源平台.

  9. (转)CentOS之7与6的区别

    CentOS之7与6的区别 原文:http://www.cnblogs.com/Csir/p/6746667.html http://blog.csdn.net/u012562943/article/ ...

  10. git忽略已经被提交的文件

    git忽略已经被提交的文件 git rm --cached logs/xx.log 然后更新 .gitignore 忽略掉目标文件, 最后 git commit -m "We really ...