Bootstrap 标签样式，代码如下：

<!DOCTYPE html>

<html>

<head>

    <title>Bootstrap 实例 - 标签的变体</title>

    <style type="text/css">

        .label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:bold;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}

        .label[href]:hover,.label[href]:focus{color:#fff;text-decoration:none;cursor:pointer}

        .label:empty{display:none}

        .label-default{background-color:#999}

        .label-default[href]:hover,.label-default[href]:focus{background-color:#808080}

        .label-primary{background-color:#428bca}

        .label-primary[href]:hover,.label-primary[href]:focus{background-color:#3071a9}

        .label-success{background-color:#5cb85c}

        .label-success[href]:hover,.label-success[href]:focus{background-color:#449d44}

        .label-info{background-color:#5bc0de}

        .label-info[href]:hover,.label-info[href]:focus{background-color:#31b0d5}

        .label-warning{background-color:#f0ad4e}

        .label-warning[href]:hover,.label-warning[href]:focus{background-color:#ec971f}

        .label-danger{background-color:#d9534f}

        .label-danger[href]:hover,.label-danger[href]:focus{background-color:#c9302c}

    </style>

</head>

<body>

    <span class="label label-default">默认标签</span>

    <span class="label label-primary">主要标签</span>

    <span class="label label-success">成功标签</span>

    <span class="label label-info">信息标签</span>

    <span class="label label-warning">警告标签</span>

    <span class="label label-danger">危险标签</span>

</body>

</html>

Bootstrap 标签的变体 实例样式的更多相关文章

  1. [Web 前端] 031 bootstrap 的使用和全局 css 样式

    目录 0. 前言 1. 基本模板 2. 布局容器 2.1 container 2.2 container-fluid 3. 栅格系统 3.1 简介 3.2 栅格参数 3.3 实例:从堆叠到水平排列 2 ...

  2. Bootstrap 标签页（Tab）插件

    摘自: http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html Bootstrap 标签页(Tab)插件 标签页(Tab)在 Bootstr ...

  3. Jade——变体的HTML

    什么是jade? jade是一个模板引擎,是变体的HTML. 模板引擎就是一个库,用来解释素具渲染视图的框架,也可以叫做HTML的预处理语言. jade是Node.js的一个模板引擎,他的语法借鉴了H ...

  4. 第二百四十五节，Bootstrap标签页和工具提示插件

    Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一．标签页选项卡 标签页也就是通常所说的选项卡功能 ...

  5. Bootstrap两端对齐的导航实例

    Bootstrap两端对齐的导航,样式剥离出来代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap ...

  6. 实现Promise的first等各种变体

    本篇文章主要是想通过ES6中Promise提供的几个方法,来实现诸如first.last.none.any等各种变体方法! 在标准的ES6规范中,提供了Promise.all和Promise.race ...

  7. Bootstrap 标签

    本章将讲解bootstrap标签,标签可用于计数,提示和页面上其它的标记显示.使用class.laber来显示标签,如下面的实例所示 <!DOCTYPE html><html> ...

  8. Gradle for Android ( 构建变体 )

    链接: http://77blogs.com/?p=38 https://www.cnblogs.com/tangZH/p/10999060.html 有时候我们一个app需要有不同的版本,不同的版本 ...

  9. Provide Several View Variants for End-Users 为最终用户提供多个视图变体

    In this lesson, you will learn how to provide several customized variants of the same View, and allo ...

随机推荐

  1. The Trip PC/UVa IDs: 110103/10137, Popularity: B, Success rate: average Level: 1

    #include<cstdio> #include<iostream> #include<string> #include<algorithm> #in ...

  2. 小学生玩ACM----优先队列

    思来想去,本人还是觉得,这个优先队列啊,不学不行,怎么说咧?虽说有时候我可以模仿它的功能,但是有的题目会坑的我大放血,况且多学会用一个小东东总不会伤身的撒,何况我是永举不垂的,哦耶,嘿嘿 优先队列嘛就 ...

  3. 【ZZ】如何选择适合自己项目的编程语言

    http://news.cnblogs.com/n/506473/ 与操作系统一样,在办公室软件套装和计算机中也具有各种计算机语言.存在这种多样性的原因与其它地方的多样性一样—-因为没有单一的解决方法 ...

  4. 哈夫曼(Huffman)编码

    哈夫曼编码(Huffman Coding)是一种非常经典的编码方式,属于可变字长编码(VLC)的一种,通过构造带权路径长度最小的最优二叉树以达到数据压缩的目的.哈弗曼编码实现起来也非常简单,在实际的笔 ...

  5. C#轻型ORM框架PetaPoco试水

    近端时间从推酷app上了解到C#轻微型的ORM框架--PetaPoco.从github Dapper 开源项目可以看到PetaPoco排第四 以下是网友根据官方介绍翻译,这里贴出来. PetaPoco ...

  6. Android（java）学习笔记98:关于string类型的面试题

    package cn.itcast_02; /* * String s = new String(“hello”)和String s = “hello”;的区别? * 有.前者会创建2个对象,后者创建 ...

  7. HDU 3999 The order of a Tree 二叉搜索树 BST

    建一个二叉搜索树,然后前序输出. 用链表建的,发现很久没做都快忘了... #include <cstdio> #include <cstdlib> struct Node{ i ...

  8. JMX笔记(一)

    上篇 JMX初体验 使用HtmlAdaptorServer提供的界面实现了调用MBean,除此之外,还可以使用rmi方式连接调用MBeanServer 要连接,自然要有url:service:jmx: ...

  9. hdu1565 网络流或状态压缩DP

    对于网络流有一个定理: 最小点权覆盖集=最大网络流: 最大点权独立集=总权值-最小点权覆盖集: 网络流解法代码如下: #include<cstdio> #include<iostre ...

  10. Android异常：异步任务导致的窗口句柄泄漏问题

    05-05 10:36:41.009: E/WindowManager(4243): Activity com.tao.MyActivity has leaked window com.android ...