Bootstrap 标签

本章将讲解 Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签，如下面的实例所示：

实例

<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h3>Example Heading <span class="label label-default">Label</span></h3>
<h4>Example Heading <span class="label label-default">Label</span></h4>

尝试一下 »

结果如下所示：

您可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观，如下面的实例所示：

实例

<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>

尝试一下 »

结果如下所示：

标签更多实例

类	描述	实例
.label label-default	默认的灰色标签	尝试一下
.label label-primary	"primary" 类型的蓝色标签	尝试一下
.label label-success	"success" 类型的绿色标签	尝试一下
.label label-info	"info" 类型的浅蓝色标签	尝试一下
.label label-warning	"warning" 类型的黄色标签	尝试一下
.label label-danger	"danger" 类型的红色标签	尝试一下

2、

2.返回顶部

3.返回顶部

4.返回顶部

5.返回顶部

1、

http://www.runoob.com/bootstrap/bootstrap-labels.html

2、

11.返回顶部

作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载于:https://www.cnblogs.com/storebook/p/8446929.html

Bootstrap-CL：标签相关推荐

BootStrap之标签页切换
标签页切换标签页切换标签页插件第一个官方例子调用tab("show")显示tab-pane中的内容第一个例子的HTML+CSS代码 fade in效果函数介绍前提条件 ...
[布局] bootstrap基本标签总结
文件头: DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
Bootstrap——table标签使用横向滚动条解决方案
官方文档 https://v4.bootcss.com/docs/content/tables/ 解决方案方法一:原生CSS 给table标签添加CSS属性 table显示滚t动条,要先把table ...
【033】Bootstrap实现标签页效果
版本 Bootstrap v3.3.6 jQuery v1.11.3 实现方法给显示标签页内容的DIV分别设置上ID: tab_1 和 tab_2.在标签页按钮上的 href 属性设置 #tab_1 ...
深入理解BootStrap Item12 -- 标签（label）与徽章（badge）
1.标签在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个"new"标签,来告诉用户.这是新添加的导航项.如下图所示 ...
bootstrap.addtabs 标签页
QiYuAdmin-bootstrap.addtabs美化(SpringBoot实战) 2017年04月10日 19:07:19 阅读数:2154 简介之前发现了一个插件bootstrap-addt ...
bootstrap -- 一个标签中，同时有 col-xs , col-sm , col-md , col-lg
.col-xs- 超小屏幕手机 (<768px) .col-sm- 小屏幕平板 (≥768px) .col-md- 中等屏幕桌面显示器 (≥992px) .col-lg- 大屏幕大桌面显 ...
Bootstrap 标签和徽章
标签和徽章 Bootstrap提供的各种标签和徽章,它们非常适合显示计数结果.提示信息等内容.标签和徽章的风格及实现方法基本相同,唯一不同的就是徽章以圆角显示. Bootstrap为标签和徽章设计了两 ...
（4）bootstrap标签页
导读: 我希望实现的功能:点击导航栏下的某一选项,在固定区域呈现我需要的页面. 如图:点击1,在右侧出现2页面 (1)所用到的技术:bootstrap的标签页依然老样子,先给出官方文档链接 http ...
html5自定义标签库,Bootstrap tagsinput自定义标签插件
tagsinput是一款基于Bootstrap的自定义标签插件.该自定义标签插件提供api接口,可以将input和select元素转换为标签.并能和typehead.js插件结合,提供查询提示信息. ...

Bootstrap-CL：标签

Bootstrap 标签

实例

实例

标签更多实例

Bootstrap-CL：标签相关推荐

最新文章

热门文章