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"> & ...
随机推荐
- apm的学习资料
百度搜索 apm博客园 实现自己的APM http://www.cnblogs.com/Kevin-moon/archive/2009/02/23/1395039.html 异步机制,一共5篇文 ...
- LightOJ 1038 Race to 1 Again(概率dp+期望)
https://vjudge.net/problem/LightOJ-1038 题意:给出一个数n,每次选择n的一个约数m,n=n/m,直到n=1,求次数的期望. 思路:d[i]表示将i这个数变成1的 ...
- LA 4253 箭术(二分枚举)
https://vjudge.net/problem/UVALive-4253 题意: 有n个平行于x轴的线段,每条线段代表一个靶子.判断是否可以站在x轴上[0,W]区间内的某个位置射箭. 思路:二分 ...
- Codeforces Round #381 (Div. 2) D. Alyona and a tree dfs序+树状数组
D. Alyona and a tree time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- Jmeter非GUI模式启动
首先我们需要了解,GUI和非GUI模式启动Jmeter对测试的影响:Jmeter可视化界面及监听器展示结果需要消耗负载资源,从而导致,在大并发的情况下GUI方式会导致负载机资源紧张,对性能造成影响 e ...
- Android之微信支付
Android开发中,大多数电商APP都会有支付这么模块,此博客就讲一下微信支付,代码不多,很简单就可以完成,支付宝支付请看博客 Android支付之支付宝封装类 先来看看效果图 微信支付首先要去微信 ...
- 微信小程序引入md5.js
今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of t ...
- 将C语言的CRC32 代码转成JAVA的CRC32 代码
public class CustomerCRC32 { private static long[] crc32Table = new long[256]; static { long crcValu ...
- 解决MySQL workbench的Can't connect to MySQL server on '127.0.0.1'(10061)问题
如题,今天打开MySQL时,出现了这种问题,无法连接到数据库 问题原因:The error (2003) Can't connect to MySQL server on 'server' (1006 ...
- MVC项目使用Oracle数据库运行提示:找不到请求的 .Net Framework Data Provider。可能没有安装
MVC项目使用Entity Framework针对Oracle数据库进行开发时,由于Oracle官方网站一般建议开发者在64位操作系统中使用32位ODP.Net进行开发.在进行程序编码的时候不会有问题 ...
