Bootstrap<基础二十> 标签

简介: 原文:Bootstrap 标签Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签,如下面的实例所示: Bootstrap 实例 - 标签 Example Heading...
原文: Bootstrap<基础二十> 标签

Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签,如下面的实例所示:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

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


</body>
</html>

结果如下所示:

标签

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

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签的变体</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</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>

结果如下所示:

标签的变体
 
目录
相关文章
|
5月前
|
前端开发 程序员 Android开发
Bootstrap+jQuery实现卡片标签样式的分页
Bootstrap+jQuery实现卡片标签样式的分页
38 0
|
5月前
|
前端开发
Bootstrap tab页签刷新加载不显示,只有点击其他标签后第一个才显示
Bootstrap tab页签刷新加载不显示,只有点击其他标签后第一个才显示
|
6月前
|
前端开发
|
6月前
|
前端开发
|
开发框架 前端开发 开发者
29_Bootstrap 组件_路径导航,标签,徽章 | 学习笔记
快速学习 29_Bootstrap 组件_路径导航,标签,徽章
|
测试技术
SAP UI5 的 sap-ui-bootstrap script 脚本标签各属性解析
SAP UI5 的 sap-ui-bootstrap script 脚本标签各属性解析
95 0
SAP UI5 的 sap-ui-bootstrap script 脚本标签各属性解析
|
前端开发 容器
Bootstrap教程(5)--使用标签、徽章、巨幕、Well
本文目录 1. 概述 2. 标签 3. 徽章 4. 巨幕 5. Well 6. 小结
201 0
Bootstrap教程(5)--使用标签、徽章、巨幕、Well
|
前端开发 开发者
Bootstrap响应式前端框架笔记十一——分页与标签
Bootstrap响应式前端框架笔记十一——分页与标签
200 0
Bootstrap响应式前端框架笔记十一——分页与标签
|
移动开发 前端开发 开发者
Bootstrap响应式前端框架笔记二——排版标签与类
Bootstrap响应式前端框架笔记二——排版标签与类
214 0
Bootstrap响应式前端框架笔记二——排版标签与类