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. MEF 编程指南（六）：导出和元数据

    声明导出解释了部件导出服务的基础知识和价值观(Values).有时候出于种种原因,导出关联信息是非常必要的.通常,用于解释关于功能公共契约的具体实现.允许导入满足约束要求的导出,或者导入所有可用的实现 ...

  2. VLAN设置

    A Logical Network is a way of representing networks in your datacenter that have the same connectivi ...

  3. Codeforces Round #Pi (Div. 2) E. President and Roads tarjan+最短路

    E. President and RoadsTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/567 ...

  4. C# 采用线程重绘图形要点记录

    大家都知道J2ME 采用一个线程去获取数据,然后得到数据后更新屏幕是件很容易的事情,比如Thread{public void run(){ getData();repaint(); } }这样做就OK ...

  5. delphi Caption 垂直显示标签文本

    //垂直显示标签文本 Label1.Caption:='垂'+#13+'直'+#13+'显'+#13+'示';//使用相同的方法,我们也可以制作垂直显示的提示(Hint):button1.Hint:= ...

  6. nginx配置图片服务器

    这几天研究了一下nginx配置图片服务器的相关内容,个人的一些收获与大家分享一下: Nginx是目前非常流行的web服务器,它起源于俄罗斯.它具有处理速度快,并发量大,占用资源极低等优点,尤其对于静态 ...

  7. android 退出整个程序

    上网学了好多方法,关于Android的Activity如何退出.好多方法都不行啦,试了各种方法,下面这种方法就是我最喜欢的,简单又容易懂. 使用单例模式创建一个Activity管理对象,该对象中有一个 ...

  8. /proc/sys/net/ipv4/下各项的意义

        /proc/sys/net/ipv4/icmp_timeexceed_rate这个在traceroute时导致著名的“Solaris middle star”.这个文件控制发送ICMP Tim ...

  9. Shell脚本调试工具set

    可以使用set命令的x选项,显示所有命令执行及变量值的变化过程等. 具体使用方法:首先使用set -x开启调试模式,最后使用命令set +x关闭调试模式. 一个简单示例演示如何使用set命令进行脚本调 ...

  10. NopCommerce Html扩展方法Html.Widget

    在Nop中有一个Html扩展的类叫HtmlExtensions,主要源码: public static class HtmlExtensions { #region Admin area extens ...