您可以使用修饰的 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. php 判断手机号运营商

    /* 移动:134.135.136.137.138.139.150.151.157(TD).158.159.187.188 联通:130.131.132.152.155.156.185.186 电信: ...

  2. 有线电视网（树形dp）

    有线电视网 某收费有线电视网计划转播一场重要的足球比赛.他们的转播网和用户终端构成一棵树状结构,这棵树的根结点位于足球比赛的现场,树叶为各个用户终端,其他中转站为该树的内部节点.从转播站到转播站以及从 ...

  3. CodeForces - 820

    Mister B and Book ReadingCodeForces - 820A 题意:C,V0,V1,A,L..总共有C页书,第一天以V0速度读,每天加A,但是不能超过V1,并且要从前一天的看到 ...

  4. JDBC连接数据以及详细的ResultSet结果集解释

    一.数据库连接 (前面为jdbc的其他参数,文章下部分为ResultSet详解) ResultSet rs = st.executeQuery(sqlStr) 1. java的sql框架支持多种数据库 ...

  5. [Java]LinkedHashMap实现原理

    1.概述 在理解了#7 介绍的HashMap后,我们来学习LinkedHashMap的工作原理及实现.首先还是类似的,我们写一个简单的LinkedHashMap的程序: LinkedHashMap&l ...

  6. Codeforces Round #561 (Div. 2) B. All the Vowels Please

    链接:https://codeforces.com/contest/1166/problem/B 题意: Tom loves vowels, and he likes long words with ...

  7. 2019湘潭校赛 E（答案区间维护）

    题目传送 思路是始终维护西瓜数量的区间,即L代表目前可以达到的最少的,R是最多的,然后判断一下. #include <bits/stdc++.h> using namespace std; ...

  8. 【手撸一个ORM】第四步、Expression（表达式目录树）扩展

    到这里,Orm的基架已经搭起来了,接下来就是激动人心的部分,表达式目录树转Sql语句,SqlDataReader转数据实体等等,但是在这之前,我们需要扩展下表达式目录树的方法,以方便后面的相关操作. ...

  9. Linux关闭/开启防火墙命令

    Linux还是比较常用的,于是我研究了一下Linux关闭防火墙命令,在这里拿出来和大家分享一下,希望你能学会Linux关闭防火墙命令 . 1) 永久性生效,重启后不会复原 开启: chkconfig ...

  10. PHP正则表达式 - 元字符

    下表包含了元字符的完整列表以及它们在正则表达式上下文中的行为: 字符 描述 \ 将下一个字符标记为一个特殊字符.或一个原义字符.或一个 向后引用.或一个八进制转义符.例如,'n' 匹配字符 " ...