ylbtech-Bootstrap-CL:标签
1.返回顶部
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、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
11.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

Bootstrap-CL:标签的更多相关文章

  1. bootstrap基本标签总结2

    [布局]bootstrap基本标签总结2   缩略图 <div class="container"> <div class="row"> ...

  2. bootstrap基本标签总结[转]

    文件头: DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  3. bootstrap 下 标签页跳转总结

    最近遇到一个问题,是关于bootstrap中的标签页实现上的一些功能实现,现总结一下. 问题描述:点击其他标签页后,如何在点击搜索按钮后自动跳转到第一个标签页.如下图 通过对bootstrap框架里的 ...

  4. [布局] bootstrap基本标签总结

    文件头: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl ...

  5. [布局]bootstrap基本标签总结2

    缩略图 <div class="container"> <div class="row"> <div class="co ...

  6. bootstrap 混合标签

    <html lang="zh_cn"> <head> <meta charset="utf-8"> <meta htt ...

  7. 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- 小屏幕 平板 ( ...

  8. BootStrap tabs标签 使用fade效果首次加载页面不能显示内容

    <div class="tab-pane active fade" id="home"> <div class="alert ale ...

  9. bootstrap -- 一个标签中,同时有 col-xs , col-sm , col-md , col-lg

    .col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 (≥768px) .col-md- 中等屏幕 桌面显示器 (≥992px) .col-lg- 大屏幕 大桌面显 ...

  10. bootstrap tab标签页

    <ul id="myTab" class="nav nav-tabs"> <li class="active"> & ...

随机推荐

  1. apm的学习资料

    百度搜索    apm博客园 实现自己的APM http://www.cnblogs.com/Kevin-moon/archive/2009/02/23/1395039.html 异步机制,一共5篇文 ...

  2. 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的 ...

  3. LA 4253 箭术(二分枚举)

    https://vjudge.net/problem/UVALive-4253 题意: 有n个平行于x轴的线段,每条线段代表一个靶子.判断是否可以站在x轴上[0,W]区间内的某个位置射箭. 思路:二分 ...

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

  5. Jmeter非GUI模式启动

    首先我们需要了解,GUI和非GUI模式启动Jmeter对测试的影响:Jmeter可视化界面及监听器展示结果需要消耗负载资源,从而导致,在大并发的情况下GUI方式会导致负载机资源紧张,对性能造成影响 e ...

  6. Android之微信支付

    Android开发中,大多数电商APP都会有支付这么模块,此博客就讲一下微信支付,代码不多,很简单就可以完成,支付宝支付请看博客 Android支付之支付宝封装类 先来看看效果图 微信支付首先要去微信 ...

  7. 微信小程序引入md5.js

    今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of t ...

  8. 将C语言的CRC32 代码转成JAVA的CRC32 代码

    public class CustomerCRC32 { private static long[] crc32Table = new long[256]; static { long crcValu ...

  9. 解决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 ...

  10. MVC项目使用Oracle数据库运行提示:找不到请求的 .Net Framework Data Provider。可能没有安装

    MVC项目使用Entity Framework针对Oracle数据库进行开发时,由于Oracle官方网站一般建议开发者在64位操作系统中使用32位ODP.Net进行开发.在进行程序编码的时候不会有问题 ...