Bootstrap每天必学之标签与徽章

1、标签

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

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

既然他是一个独立的组件,当然在不同的版本下有不同的文件:

☑ LESS版本:对应的源文件label.less

☑ Sass版本:对应的源文件_label.scss

☑ 编译后版本:bootstrap.css文件第4261行~第4327行

1)、使用原理:

使用方法很简单,你可以在使用span这样的行内标签:

代码如下:

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

运行效果:

2)、实现原理:

/bootstrap.css文件第4261行~第4272行/

.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}

如果使用的是a标签元素来制作的话,为了让其更美观,在hover状态去掉下划线之类:

/bootstrap.css文件第4273行~4278行/

.label[href]:hover,
.label[href]:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}

有的时候标签内没有内容的时候,可以借助CSS3的:empty伪元素将其隐藏:

.label:empty {
display: none;
}

3)、颜色样式设置:

和按钮元素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>

运行效果:

4、颜色实现原理:

/bootstrap.css文件第4286行~第4237行/

.label-default {
background-color: #999;
}
.label-default[href]:hover,
.label-default[href]:focus {
background-color: #808080;
}
.label-primary {
background-color: #428bca;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
background-color: #3071a9;
}
.label-success {
background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
background-color: #449d44;
}
.label-info {
background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
background-color: #31b0d5;
}
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
background-color: #ec971f;
}
.label-danger {
background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
background-color: #c9302c;
}

2、徽章

从某种意义上来说,徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息,比如你登录你的twitter后,如果你信息没有看,系统会告诉你有多少信息未读,如下图所示:

在Bootstrap框架中,把这种效果称作为徽章效果,使用“badge”样式来实现。

对应的文件版本:

☑ LESS版本:源文件badges.less

☑ Sass版本:源文件_badges.scss

☑ 编译后版本:bootstrap.css文件第4328行~第4366行

使用方法:

使用方法,其实也没什么太多可说的,你可以像标签一样,使用span标签来制作,然后为他加入badge类:

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

运行效果:

1)、实现原理:

主要将其设置为椭圆形,并且加了一个背景色:

/bootstrap.css文件第4328行~第4341行/

.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #999;
border-radius: 10px;
}

同样也使用`:empty`伪元素,当没有内容的时候隐藏:

.badge:empty {
display: none;
}

正如开头所说,可以将徽章与按钮或者导航之类配合使用:

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
   <a href="##" class="navbar-brand">慕课网</a>
 </div>
 <ul class="nav navbar-nav">
   <li class="active"><a href="##">网站首页</a></li>
   <li><a href="##">系列教程</a></li>
   <li><a href="##">名师介绍</a></li>
   <li><a href="##">成功案例<span class="badge">23</span></a></li>
   <li><a href="##">关于我们</a></li>
 </ul>
</div>

运行效果

2)、按钮和胶囊形导航设置徽章:

另外,徽章在按钮元素button和胶囊形导航nav-pills也可以有类似的样式,只不过是颜色不同而以:

<ul class="nav nav-pills">
 <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
 <li><a href="#">Profile</a></li>
 <li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<br />

运行效果:

样式代码请查看bootstrap.css文件第4345行~第4366行。

注意:不过和标签组件不一样的是:在徽章组件中没有提供多种颜色风格的效果,不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。

通过上文的介绍大家对标签和徽章是不是有了大概的了解,希望大家把标签和徽章应用到自己的网站中,真正的做到学以致用。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程
Bootstrap实战教程

(0)

相关推荐

  • 基于Bootstrap实现tab标签切换效果

    本文实例为大家分享了Bootstrap实现tab标签切换效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script

  • 利用纯Vue.js构建Bootstrap组件

    没有jQuery, bootstrap.js, 或不需要任何第三方插件. This repository contains a set of native Vue.js components based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are: Vue.js

  • 简单实现Bootstrap标签页

    本文实例为大家分享了Bootstrap标签页的具体实现代码,供大家参考,具体内容如下 HTML代码: <div id="tabs"> <ul class="nav nav-tabs"> <li class="active"><a href="#item1" data-toggle="tab">项目一</a></li> <li>

  • Bootstrap基本插件学习笔记之标签切换(17)

    Bootstrap可以很轻松就实现标签切换的效果. 0x01 样式1 基本样式: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link

  • Bootstrap基本样式学习笔记之标签(5)

    直接看Bootstrap标签例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bo

  • bootstrap vue.js实现tab效果

    本文实例为大家分享了bootstrap vue.js实现tab效果的具体代码,供大家参考,具体内容如下 项目目录结构 Student.js代码 function Student(){ this.baseInfo = { tabStatus : true , name : '张三', sex : 'male' } , this.parentsInfo = { tabStatus : false, fatherName : '张全蛋', motherName : '李铁柱' } , this.stu

  • Bootstrap每天必学之标签页(Tab)插件

    标签页(Tab)通过结合一些 data 属性,您可以轻松地创建一个标签页界面. "如果您想要单独引用该插件的功能,那么您需要引用 tab.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js." 一.用法 您可以通过以下两种方式启用标签页: 通过 data 属性:您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚

  • BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)

    bootstrap框架.导航条.下拉菜单.轮播广告carousel.栅格系统布局.标签页tabs.模态框.菜单定位的个人总结,具体详情如下所示: bootstrap框架 <!DOCTYPE html> <html lang="zh-cn"><!-- 语言设置 --> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible

  • Bootstrap每天必学之标签与徽章

    1.标签 在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个"new"标签,来告诉用户.这是新添加的导航项.如下图所示: 那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以".label"样式来实现高亮显示. 既然他是一个独立的组件,当然在不同的版本下有不同的文件: ☑ LESS版本:对应的源文件label.less ☑ Sass版本:对应的源文件_label.scss ☑ 编

  • Bootstrap每天必学之导航条(二)

    一.基础导航条 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class="nav">)基础上添加类名"navbar-nav" 第二步:在列表外部添加一个容器(div),并且使用类名"navbar"和"navbar-default" <div class="navbar navbar-default"> <!-- 导航条标题--> <

  • Bootstrap每天必学之导航组件

    在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS:  navs.less SASS:  _navs.scss 标签形导航,也称选项卡导航 标签形导航是通过.nav-tabs样式来实现的,在制作标签形导航时需要在原导航类名为.nav的容器上追加类名.nav-tabs <ul class="nav nav-tabs"> <li><a href="#">导航标题1</a>

  • Bootstrap每天必学之表单

    本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单.本文主要来讲解一下内容: 1.基本案例 2.内联表单 3.水平排列的表单 4.被支持的控件 5.静态控件 6.控件状态 7.控件尺寸 8.帮助文本 基本案例  单独的表单控件会被自动赋予一些全局样式.所有设置了.form-control的<input>.<textarea>和<select>元素都将被默认设置为width: 100%;.将label和前面提到的这些

  • Bootstrap每天必学之简单入门

    在上一篇文章中主要是简单的介绍了一下Bootstrap,这篇文章进一步了解相关内容,为之后的学习打下基础. 从Visual Studio 2013前不久的更新中看,微软是将Bootstrap3的新版本加入到了VS当中,所以学习Bootstrap3也没什么顾虑了. 一.下载BootStrap 官网的文件很详细简单,对于下载来说也有多种方式.对于我们开发者来说,估计最简单的方式就是直接下载编译和压缩后的CSS.JavaScript文件,另外还包含字体文件,但是不包含文档和源码文件.打开解压包之后可以

  • Bootstrap每天必学之日期控制

    一个成熟的框架,日期控制是少不了的,在网上也有很多日期控制可以选择,而主框架用了bootstrap,日期控制也当前要用它自己的, 控件地址:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm GitHub上开源地址:https://github.com/smalot/bootstrap-datetimepicker 在使用datetimepicker之前,先要经过以下几个步骤 1.引用JS脚本库 <script src="

  • Bootstrap每天必学之按钮

    1.按钮(按钮组) 单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等.那么在这一节中,我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件. 源码查询: 按钮组也是一个独立的组件,所以可以找到对应的源码文件: ☑ LESS版本:对应的源文件为buttons.less ☑ Sass版本:对应的源文件为_buttons.scss ☑ CSS版本:对应bootstrap.css文件第3131行-第3291行

  • Bootstrap每天必学之弹出框(Popover)插件

    Bootstrap弹出框插件,提供了一个扩展的视图,弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面. 弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充.该方法依赖于工具提示(tooltip). 如果您想要单独引用该插件的功能,那么您需要引用 popov

  • Bootstrap每天必学之基础排版

    本次主要来了解的是排版,这个大部分在HTML的基本标签中也是存在的,所以相对比较简单,为了保证系列的完整性,也顺带复习下,还是记录一下.主要内容如下: 1.标题 2.页面主体 3.强调 4.缩略语 5.地址 6.引用 7.列表 一.标题 Html中的所有标题标签,从<h1>到<h6>均可使用.另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式. <div class="container"> <h1 class

随机推荐