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. autofac &web api 切换数据库

    https://stackoverflow.com/questions/24188025/is-there-another-way-of-changing-database-instance-in-a ...

  2. 如何用js创建表格?

    1.用js创建表格 <script> function createTable(){ //创建表格 //创建对象 //window下面的属性方法可以把window去掉或者写上 var ta ...

  3. Redis之字符串

    Redis 字符串 String 是redis最基本的类型,value 不仅可以是 String,也可以是数字. 使用 Strings 类型,可以完全实现目前 Memcached 的功能,并且效率更高 ...

  4. BZOJ 3930 【CQOI2015】 选数

    题目链接:选数 这种SB题我都Wa飞了,彻底没救系列- 首先,我们可以发现1,如果我们选了两个不同的数,那么它们的\(\gcd\)不会超过\(r-l+1\).于是,我们可以设一个\(f_i\)表示任取 ...

  5. 使用Zend studio+WAMP来调试Wordpress后台的PHP程序的一些非常关键的信息(原创)

    一.Zend studio代码格式化快捷键:选中代码,Ctrl+Shift+F( 注意,在英文输入发状态下使用!) .Zend studio实用快捷键 :http://www.zendstudio.n ...

  6. Android之Glide(非常好用的图片加载框架)

    谷歌开发者论坛上,谷歌为我们介绍了一个名叫 Glide 的图片加载库,作者是bumptech. Glide是一种快速.高效的开源媒体管理和Android的包裹mediadecoding图像加载框架,内 ...

  7. 一张思维导图教你使用google一下

    导图总览 google搜索技巧.png 双引号 代表完全匹配搜索 也就是说搜索结果返回的页面包含双引号中出现的所有的词,连顺序也必须完全匹配 例如搜索"java 排序"与无引号的j ...

  8. IOS-网络(文件上传)

    // // ViewController.m // IOS_0206_文件上传 // // Created by ma c on 16/2/6. // Copyright © 2016年 博文科技. ...

  9. jQuery中 attr和Prop的区别

    出自这里: http://www.365mini.com/page/jquery_noconflict.htm 在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参 ...

  10. 为什么样本方差自由度(分母)为n-1

    一.概念.条件及目的 1.概念 要理解样本方差的自由度为什么是n-1,得先理解自由度的概念: 自由度,是指附加给独立的观测值的约束或限制的个数,即一组数据中可以自由取值的个数. 2.成立条件 所谓自由 ...