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. developer tools access 需控制另一进程才能继续调度 ？

    解决方法:id -a会看到 204(_developer)再输入命令 sudo dscl . append /Groups/_developer GroupMembership 204,会提示输入密码 ...

  2. 【M15】了解异常处理（exception handling）的成本

    1.为了在运行期处理异常,程序必须做大量额外的工作.比如,即使抛出异常,也必须保证离开作用域的栈上对象执行析构方法.因此,必须记录try语句的进入点和离开点,记录catch语句能够处理的异常等.这就意 ...

  3. Codeforces Beta Round #51 C. Pie or die 博弈论找规律 有趣的题~

    C. Pie or die Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/55/problem/ ...

  4. delphi 16 网页缩放

    网页放大 网页缩小         WebBrowser1.OleObject.Document.Body.Style.Zoom := 0.50; 缩放网页 Ctrl+中键↑ 放大 Ctrl+中键↓ ...

  5. GitHub使用详解

    1.GitHub是什么? GitHub这个名词既可以是那个流行的代码分享和协作网站 https://github.com/,也可以是指Git客户端工具(与其他的Git客户端工具如GitEye类似,只不 ...

  6. [Angular 2] Directive intro and exportAs

    First, What is directive, what is the difference between component and directive. For my understandi ...

  7. Android APK方式换肤实现原理

    现在很多APP都有换肤的功能,例如微博,QQ等应用.这些应用的换肤原理是什么? 在用微博的时候,不难发现,当你要换肤时,先下载并安装一个皮肤apk,然后选择这个皮肤,就可以了. 这种方式就是把皮肤打包 ...

  8. 在Linux使用mingw32来编写win32程序

    MinGW - Minimalist GNU For Windows Mingw32 是 GNU 計畫工具的集合,包含了大量的標頭檔(header files).函式庫與指 令程式.目的在提供免費的工 ...

  9. Socket的使用

    import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOException; import jav ...

  10. 转摘：常用ubuntu 关机，重启，注销命令

    1.关机命令 shutdown 好像ubuntu的终端中默认的是当前用户的命令,只是普通用户,因此在终端器中可以使用sudo -sh 转换到管理员root用户下执行命令. 1).shutdown –h ...