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. POJ 3026 Borg Maze

    Borg Maze Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7998   Accepted: 2675 Descrip ...

  2. Anroid自定义RatingBar，显示半个（小数个）的stepSize时，变为整数个的问题

    <RatingBar android:id="@+id/rb_starbar" style="@style/joblist_item_ratingbar_style ...

  3. HDU 4932 贪心

    Miaomiao's Geometry Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Othe ...

  4. strcpy_s与strcpy的比較

    strcpy_s和strcpy()函数的功能差点儿是一样的.strcpy函数,就象gets函数一样,它没有方法来保证有效的缓冲区尺寸,所以它仅仅能假定缓冲足够大来容纳要拷贝的字符串.在程序执行时,这将 ...

  5. 利用nf_conntrack机制存储路由，省去每包路由查找

    IP是无连接的,因此IP路由是每包一路由的,数据包通过查找路由表获取路由,这是现代操作协议协议栈IP路由的默认处理方式.可是假设协议栈具有流识别能力,是不是能够基于流来路由呢?答案无疑是肯定的. 设计 ...

  6. Google搜索语法

    原文:http://www.jianshu.com/p/37fe4f1381ef 前言 之前听过一个笑话,有人打开浏览器,输入www.baidu.com, 然后搜索框输入Google,查询google ...

  7. 如何制作按钮hover状态

    1.选中文字加背景图层 2.Ctrl+J复制图层,向下轻移. 3.点击所复制图层的背景图层,右键选中——混合选项 弹出图层样式框: 4.选择渐变叠加,将渐变——反向勾选上,确定: 5.完成,效果如图.

  8. linux进程后台运行的几种方法

    转载:http://hi.baidu.com/ntuxmzvdpzbnuxq/item/79131b93f606a348f0421562 我 们经常会碰到这样的问题,用 telnet/ssh 登录了远 ...

  9. 一网打尽OkHttp中的缓存问题

    看到很多小伙伴对OkHttp的缓存问题并不是十分了解,于是打算来说说这个问题.用好OkHttp中提供的缓存,可以帮助我们更好的使用Retrofit.Picasso等配合OkHttp使用的框架.OK,废 ...

  10. 连续调用inet_ntoa打印出错的问题

    近日写程序,在打印信息的时候调用了inet_ntoa函数,出现了打印一直出错的情况.google了一下,是因为inet_ntoa这类函数没有保证线程安全,其实现原理是在静态内容中申请一块内存,每次调用 ...