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. 进入名企必读的.NET面试题

    1. 罗列ASP.NET服务器控件的运行的生命周期. 一般服务器控件的生命周期包含11个阶段: /// <summary> /// 1. 初始化 /// </summary> ...

  2. CentOS 6.5安装MySQL中文乱码问题解决

    不管是Linux还是Windows都有新手遇到MySQL服务安装好了之后写入中文发现乱码,今天我装了个CentOS 6.5也遇到了这个问题,现在解决了,分享一下经验. 1.首先安装mysql,我很怕麻 ...

  3. URAL 1779 F - The Great Team 构造

    F - The Great TeamTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest ...

  4. 数据挖掘十大经典算法(9) 朴素贝叶斯分类器 Naive Bayes

    贝叶斯分类器 贝叶斯分类器的分类原理是通过某对象的先验概率,利用贝叶斯公式计算出其后验概率,即该对象属于某一类的概率,选择具有最大后验概率的类作为该对象所属的类.眼下研究较多的贝叶斯分类器主要有四种, ...

  5. [Angular 2] Create Shareable Angular 2 Components

    Components that you use across multiple applications need to follow a module pattern that keeps them ...

  6. iOS开发——网络编程Swift篇&（三）同步Get方式

    同步Get方式 // MARK: - 同步Get方式 func synchronousGet() { //创建NSURL对象 var url:NSURL! = NSURL(string: " ...

  7. MySQL · 特性分析 · MDL 实现分析

    http://mysql.taobao.org/monthly/2015/11/04/ 前言 在MySQL中,DDL是不属于事务范畴的,如果事务和DDL并行执行,操作相关联的表的话,会出现各种意想不到 ...

  8. Mac OS 10.10 Yosemite正式版怎么升级 升级教程

    苹果在2014年10月17号凌晨一点召开了新品发布会,推出了新的 iPad.iMac 产品,以及大家一直所期盼的 Mac OS 10.10 正式版系统.个人是从 Mac OS 10.10 的第一个测试 ...

  9. ASP.NET MVC 之 路由配置

    主要操作在App_Start 目录下的 RouteConfig.cs 文件. 一.Url构造方式 1.命名参数规范+匿名对象 routes.MapRoute( name: "Default& ...

  10. [XBee] ZigBee学习笔记

    转自:http://blog.csdn.net/wanghanjiett/article/details/6931867 几个重要概念: node(节点): 在zigbee堆栈中最多有三种节点:Coo ...