位置: 编程技术 - 正文
Bootstrap每天必学之标签与徽章(bootstrap要学到什么程度)
编辑：rootadmin推荐整理分享Bootstrap每天必学之标签与徽章(bootstrap要学到什么程度)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:bootstrap怎么学,bootstrap基础教程,bootstrap快速入门,bootstrap学习,bootstrap怎么学,bootstrap要学到什么程度,bootstrap基础教程,bootstrap要学到什么程度,内容如对您有帮助，希望把文章链接给更多的朋友！
1、标签
在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。如下图所示：
那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。
既然他是一个独立的组件，当然在不同的版本下有不同的文件：
&#; LESS版本：对应的源文件label.less
&#; Sass版本：对应的源文件_label.scss
&#; 编译后版本：bootstrap.css文件第行～第行
1）、使用原理：
使用方法很简单，你可以在使用span这样的行内标签：
运行效果：
2）、实现原理：
/bootstrap.css文件第行～第行/
如果使用的是a标签元素来制作的话，为了让其更美观，在hover状态去掉下划线之类：
/bootstrap.css文件第行～行/
有的时候标签内没有内容的时候，可以借助CSS3的:empty伪元素将其隐藏：
3）、颜色样式设置：
和按钮元素button类似，label样式也提供了多种颜色：
&#; label-deafult：默认标签，深灰色
&#; label-primary：主要标签，深蓝色
&#; label-success：成功标签，绿色
&#; label-info：信息标签，浅蓝色
&#; label-warning：警告标签，橙色
&#; label-danger：错误标签，红色
主要是通过这几个类名来修改背景颜色和文本颜色：
运行效果：
4、颜色实现原理：
/bootstrap.css文件第行～第行/
2、徽章
从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读，如下图所示：
在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现。
对应的文件版本：
&#; LESS版本：源文件badges.less
&#; Sass版本：源文件_badges.scss
&#; 编译后版本：bootstrap.css文件第行～第行
使用方法：
使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类：
运行效果:
1）、实现原理：
主要将其设置为椭圆形，并且加了一个背景色：
/bootstrap.css文件第行～第行/
同样也使用`:empty`伪元素，当没有内容的时候隐藏：
正如开头所说，可以将徽章与按钮或者导航之类配合使用：
运行效果
2）、按钮和胶囊形导航设置徽章：
另外，徽章在按钮元素button和胶囊形导航nav-pills也可以有类似的样式，只不过是颜色不同而以：
运行效果:
样式代码请查看bootstrap.css文件第行～第行。
注意：不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。
通过上文的介绍大家对标签和徽章是不是有了大概的了解，希望大家把标签和徽章应用到自己的网站中，真正的做到学以致用。
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程Bootstrap实战教程
Bootstrap精简教程 Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。[1]它由Twitter的设计师MarkOtto
详解基于Bootstrap扁平化的后台框架Ace 最近一段时间在做一个管理系统，在网上找了很久的前端展示框架，终于找到一款基于Bootstrap的后台管理系统模版：Ace。Bootstrap是Twitter于年开发出来
详解JavaScript的变量和数据类型 对于一门编程语言，肯定包含变量和数据类型。今天我们就来看看JavaScript脚本语言的变量和数据类型。相对于其他的Java，C++等高级程序语言，JavaScript
标签: bootstrap要学到什么程度
本文链接地址:https://www.jiuchutong.com/biancheng/386306.html 转载请保留说明！上一篇：Bootstrap每天必学之导航条(bootstrap需要学多久)
下一篇：Bootstrap精简教程(bootstrap4 教程)
