本文摘自PHP中文网，作者青灯夜游，侵删。
在Bootstrap中，有一些组件用于提示信息，如 标签、徽章、巨幕和页头。本篇文章给大家介绍一下Bootstrap中的提示信息。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
相关推荐：《bootstrap教程》
标签
在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户
在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示
使用方法很简单，可以在使用span这样的行内标签
1 | <h3>Example heading <span class="label label-default">New</span></h3>
|
【自动隐藏】
当没有内容的时候，自动隐藏
1 2 3 | .label:empty {
display: none;
}
|
1 | <h3>Example heading <span class="label label-default"></span></h3>
|
【颜色设置】
和按钮元素button类似，label样式也提供了多种颜色：
? label-default:默认标签，深灰色
? label-primary：主要标签，深蓝色
? label-success：成功标签，绿色
? label-info：信息标签，浅蓝色
? label-warning：警告标签，橙色
? label-danger：错误标签，红色
主要是通过这几个类名来修改背景颜色和文本颜色
1 2 3 4 5 6 | <span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
|
徽章
从某种意义上来说，徽章效果和前面介绍的标签效果极其相似。也用来做一些提示信息使用。常出现的是一些系统发出的信息，比如系统提示有多少信息未读
在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现
可以像标签一样，使用span标签来制作，然后加入badge类
1 | <a href="#">Inbox <span class="badge">42</span></a>
|
【自动隐藏】
如果没有新的或未读的信息条目，也就是说不包含任何内容，徽章组件能够自动隐藏（通过CSS的 :empty 选择符实现)
1 2 3 | .badge:empty {
display: none;
}
|
1 | <a href="#">Inbox <span class="badge"></span></a>
|
【按钮徽章】
徽章在按钮元素button和胶囊形导航nav-pills也有类似的样式，只不过颜色不同
1 2 3 4 5 6 7 8 | <ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
|
巨幕
这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容
1 2 3 4 5 | <div class="jumbotron">
<h1>小火柴的蓝色理想</h1>
<p>好的代码像粥一样，都是用时间熬出来的</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
|
如果为巨幕组件添加圆角，把此组件放在 .container 元素的里面即可
1 2 3 4 5 6 7 | <div class="container">
<div class="jumbotron">
<h1>小火柴的蓝色理想</h1>
<p>好的代码像粥一样，都是用时间熬出来的</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
|
页头
页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）
1 2 3 4 5 | .page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eee;
}
|
1 2 3 | <div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
|
更多编程相关知识，请访问：编程视频！！
以上就是详解Bootstrap中的标签、徽章、巨幕和页头的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
html5新增加的标签总结
html的meta标签用法总结
bootstrap如何设置响应式表格
快速入门bootstrapvue
less百行代码实现bootstrap栅格布局
浅谈bootstrap中的下拉菜单类（dropdown-menu）
css中标签嵌套规则有哪些
textarea标签的设置
bootstrap双击事件怎么写
什么是bootstrap栅格系统的单位
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 详解Bootstrap中的标签、徽章、巨幕和页头
