Bootstrap-CL:标签
| ylbtech-Bootstrap-CL:标签 |
| 1.返回顶部 |
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.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
| 11.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
Bootstrap-CL:标签的更多相关文章
- bootstrap基本标签总结2
[布局]bootstrap基本标签总结2 缩略图 <div class="container"> <div class="row"> ...
- bootstrap基本标签总结[转]
文件头: DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- bootstrap 下 标签页跳转总结
最近遇到一个问题,是关于bootstrap中的标签页实现上的一些功能实现,现总结一下. 问题描述:点击其他标签页后,如何在点击搜索按钮后自动跳转到第一个标签页.如下图 通过对bootstrap框架里的 ...
- [布局] bootstrap基本标签总结
文件头: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl ...
- [布局]bootstrap基本标签总结2
缩略图 <div class="container"> <div class="row"> <div class="co ...
- bootstrap 混合标签
<html lang="zh_cn"> <head> <meta charset="utf-8"> <meta htt ...
- bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义以及 bootstrap一个标签中,同时有 col-xs , col-sm , col-md , col-lg的理解
摘要: bootstrap栅栏系统css中的col-xs-*.col-sm-*.col-md-* 的意义: .col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 ( ...
- BootStrap tabs标签 使用fade效果首次加载页面不能显示内容
<div class="tab-pane active fade" id="home"> <div class="alert ale ...
- bootstrap -- 一个标签中,同时有 col-xs , col-sm , col-md , col-lg
.col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 (≥768px) .col-md- 中等屏幕 桌面显示器 (≥992px) .col-lg- 大屏幕 大桌面显 ...
- bootstrap tab标签页
<ul id="myTab" class="nav nav-tabs"> <li class="active"> & ...
随机推荐
- NIO概述及实例(时钟服务器)
NIO,非阻塞IO,重点是非阻塞而不是异步! NIO的一般实现如下: package com.pt.nio; import java.net.InetSocketAddress; import jav ...
- Mongo配置基础
数据库也是一种服务,数据库的本质也是一个文件,所以说我们把文件存入text和存入数据库的本质是一样的,只是数据库的格式化的删除和添加. 分为四部分, mongo的启动详解 导入导出,运行时备份 Fsy ...
- 拖拉记录上下移动--Ajax UI
所谓的 Ajax 拖拉 UI,就是直接用鼠标进行拖拉排序,这种方式对用户来说操作速度更快. 拖拉的 UI 需要额外的前端套件,这里介绍 jQuery UI 的 Sortable Plugin,并直接使 ...
- CSS 列表样式详解
CSS列表用于前端的列表排列. CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML中,有两种类型的列表: 无序列表 - 列 ...
- K-Means算法的收敛性和如何快速收敛超大的KMeans?
不多说,直接上干货! 面试很容易被问的:K-Means算法的收敛性. 在网上查阅了很多资料,并没有看到很清晰的解释,所以希望可以从K-Means与EM算法的关系,以及EM算法本身的收敛性证明中找到蛛丝 ...
- Java线程状态分析
Java线程的生命周期中,存在几种状态.在Thread类里有一个枚举类型State,定义了线程的几种状态,分别有: NEW: 线程创建之后,但是还没有启动(not yet started).这时候它的 ...
- Leetcode 15
//用类似双指针的方法,确定第一个i的位置后,j和k向左向右移动使nums[j]+nums[k] = -nums[i];注意特判 class Solution { public: vector< ...
- [转载]CentOS 6.3安装Subversion服务器
转载自http://www.cnblogs.com/zhoulf/archive/2013/02/02/2889949.html 安装说明 系统环境:CentOS-6.3 安装方式:yum insta ...
- L203 词汇题
Conditions for the growth of this plant are optimum in early summer.we will live as free people, not ...
- ReactNative 问题集合
在线流畅播放视频 (建议调用原生的视频组件, 或者在成熟的安卓 ios组件封装一层) 如何指定页面横屏 (在这个组件react-native-orientation基础上改写) webSocket不和 ...
