您可以使用修饰的 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. VMware Workstation “无法连接 MKS: 套接字连接尝试次数太多；正在放弃。” 解决方法【转】

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

  2. Linux下处理^M字符

    很多时候windows环境中编辑过的文件,在Linux下经常会出现^M字符,可以通过以下方式处理该字符. vim命令打开文件,然后在vim命令模式下输入以下内容: :%s/^M//g特别注意:注意^M ...

  3. 解决java中按照数字大小来排序文件

    我们想要输出(1.jpg.2.jpg.3.jpg.10.jpg.11.jpg.20.jpg.21.jpg.31.jpg) 突然看到网上一些写法 总结:既然自己按照定义的文件名规则来处理,也可以进行使用 ...

  4. Codeforces 163C（实数环上的差分计数）

    要点 都在注释里了 #include <cstdio> #include <cstring> #include <iostream> #include <al ...

  5. C++ 11 Lambda表达式！！！！！！！！！！！

    C++11的一大亮点就是引入了Lambda表达式.利用Lambda表达式,可以方便的定义和创建匿名函数.对于C++这门语言来说来说,“Lambda表达式”或“匿名函数”这些概念听起来好像很深奥,但很多 ...

  6. openstack安装newton版本neutron服务部署（四）

    一.管理节点部署服务: 1.安装neutron: [root@linux-node1 ~]# yum install openstack-neutron openstack-neutron-ml2 o ...

  7. SSIS-Dtsx包文件打开时一直验证

    把每个项的DelayValidation设置为true. 也可以直接改文件: 把文件里的 <DTS:Property DTS:Name="DelayValidation"&g ...

  8. 2、linux基础知识与技能

    2.1.linux内核.发行版linux本身指的是一个操作系统内核,只有内核是无法直接使用的.我们需要的,可以使用的操作系统是一个包含了内核和一批有用的应用程序的一个集合体,这个就叫linux发行版. ...

  9. 使用gulp-uncss精简css,去除冗余代码

    写html页面的时候,多修改几次就会出现很多无用的css代码,下面使用gulp-uncss来精简css文件,去掉没用的css代码 1.首先找个目录创建一个gulp项目在命令行输入:npm init   ...

  10. C#、VSTO讀取Excel類

    之前寫的類存在Excel進程不能結束的Bug,重寫ExcelReader類,類實例清理時Excel進程自動結束. class ExcelReader { // Excel Object public ...