码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap_标签

时间:2015-11-26 01:12:14      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:

一、标签 

 在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户。

  那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以“.label”样式来实现高亮显示。

<h3>Example heading <span class="label label-default">New</span></h3>

技术分享

  颜色样式设置:

  和按钮元素button类似,label样式也提供了多种颜色:

  ? label-deafult:默认标签,深灰色

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

技术分享

 

二、徽章

  使用span标签来制作,然后加入“badge”类:

<a href="#">Inbox <span class="badge">42</span></a>

技术分享

Bootstrap_标签

标签:

原文地址:http://www.cnblogs.com/Ryan344453696/p/4996382.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!