Bootstrap 标签的变体 实例样式

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>
时间： 2024-08-06 04:03:36

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

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

目录 0. 前言 1. 基本模板 2. 布局容器 2.1 container 2.2 container-fluid 3. 栅格系统 3.1 简介 3.2 栅格参数 3.3 实例:从堆叠到水平排列 2.4 移动设备和桌面屏幕 2.5 列偏移 2.6 嵌套列 2.7 其他 4. 响应式工具 4.1 可用的类 5. 排版 5.1 标题 5.2 其他 6. 表格 6.1 基本实例 6.2 举例 6.3 其他 7. 表单 7.1 基本实例 7.2 其他 0. 前言 官方有 中文文档,写得十分详细 我这里

Android Studio下项目构建的Gradle配置及打包应用变体

Gradle简介 ??Gradle是一个自动化构建工具,采用Groovy的Domain Specific Language(领域特定语言)来描述和控制构建逻辑.具有语法简洁.可读性强.配置灵活等特点.基于Intellij IDEA社区版本开发的Android Studio天生支持Gradle构建程序.Groovy是一种基于JVM的敏捷开发语言,结合了Phthon.Ruby和Smalltalk的许多强大特性.同时,Groovy代码既能够与java代码很好地结合,也能够用于扩展现有的代码. Grad

变体（协变与逆变）

变体的引入是为了提高泛型类型的变量在赋值时可以对类型进行兼容性转换,以扩展泛型的灵活性.下面看个例子: public delegate void DoWork<T>(T arg); ........ DoWork<A> del1=delegate(A arg){//.......}; DoWork<B> del2=del1; B bb=new B(); del2(bb); 其中A ,B是两个类,B类继承A类,即:public class A{.....}        

jQuery如何为指定标签添加和删除一个样式

jQuery如何为指定标签添加和删除一个样式:在网页的实际应用中,需要根据不同的条件来改变元素的CSS样式,通过动态的给元素添加删除一个CSS类可以实现此功能,下面通过实例来介绍一下如何实现此种功能.一.使用addClass()和removeClass()添加和删除一个CSS类:代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="

[转]Delphi 变体类型（Variant）的介绍（流与变体类型的相互转换、变体类型常用的函数）

Delphi 变体类型(Variant)的介绍(流与变体类型的相互转换.变体类型常用的函数) 一.变体类型常用的函数介绍: Variant: 一种可以拥有各种数据类型: 也可以告诉目前存储的数据是什么类型(通过使用VarType函数): 可以给相同的Variant分配不同的数据类型,只要Variant包含数字值就可以执行算法: variant数组只不过是variant型的数组,不必包含同类型的数据: 1.  VarArrayOf函数:更快捷的创建一维变体数组,可以创建全异的数值数组: funct

Bootstrap两端对齐的导航实例

Bootstrap两端对齐的导航,样式剥离出来代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 两端对齐的导航元素</title> <style> .nav { padding-left: 0; margin-bottom: 0; list-style: none; } .nav:before, .nav:after { display: table;content:

【转载】Gradle for Android 第四篇( 构建变体 )

当你在开发一个app,通常你会有几个版本.大多数情况是你需要一个开发版本,用来测试app和弄清它的质量,然后还需要一个生产版本.这些版本通常有不同的设置,例如不同的URL地址.更可能的是你可能需要一个免费版和收费版本.基于上述情况,你需要处理不同的版本:开发免费版,开发付费版本,生产免费版,生产付费版,而针对不同的版本不同的配置,这极大增加的管理难度. Gradle有一些方便的方法来管理这些问题.我们很早之前谈过debug和release版本,现在我们谈到另外一个概念,不同的产品版本.构建版本和

Delphi 变体类型（Variant）的介绍（流与变体类型的相互转换、变体类型常用的函数）

来源:http://blog.csdn.net/xiongmao000738/article/details/6863988 一.变体类型常用的函数介绍: Variant: 一种可以拥有各种数据类型: 也可以告诉目前存储的数据是什么类型(通过使用VarType函数): 可以给相同的Variant分配不同的数据类型,只要Variant包含数字值就可以执行算法: variant数组只不过是variant型的数组,不必包含同类型的数据: 1.  VarArrayOf函数:更快捷的创建一维变体数组,可以

pipeline-filter模式变体之尾循环

pipeline-filter作为一种处理数据的模式(见[POSA]卷4)可以将应用的任务划分为几个自我完备的数据处理步骤,并连接到一个数据管道.本文介绍一种不太常见的pipeline-filter的变体--尾循环的pipeline-filter,当然这也是在特定的需求场景下才会出现的. 首先,我们来看一个常见的pipeline-filter的模式图: 模式的思路比较简单明了,就是对数据的处理步骤进行拆分.然后以统一的编程接口加上递归的方式,将它们串在一起. 最近在写的一个Message bro