Bootstrap 学习之 (十二) ------ 标签与徽章

最新推荐文章于 2020-06-16 10:19:46 发布

俊刚、

最新推荐文章于 2020-06-16 10:19:46 发布

阅读量639

点赞数

分类专栏： # Bootstrap 文章标签： bootstrap 标签徽章

本文链接：https://blog.csdn.net/csdn9_14/article/details/53008055

版权

Bootstrap 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

Bootstrap 标签

标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签

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

可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观，如下面的实例所示：

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
    <title>BootstrapTest</title>
   <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>
</span>

结果如下：

如果标签数量很多怎么办？

如果你有大量的设置为 inline 属性的标签全部放在一个较窄的容器元素内，在页面上展示这些标签就会出现问题，每个标签就会有自己的一个 inline-block 元素（就像图标一样）。解决的办法是为每个标签都设置为 display: inline-block; 属性。

Bootstrap 徽章（Badges）

徽章与标签相似，主要的区别在于徽章的边角更加圆滑。

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。

<span style="font-size:18px;"><a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button></span>

Self collapsing

如果没有新的或未读的信息条目，也就是说不包含任何内容，徽章组件能够自动隐藏（通过CSS的 :empty 选择符实现) 。

跨浏览器兼容性

徽章组件在 Internet Explorer 8 浏览器中不会自动消失，因为 IE8 不支持 :empty 选择符。

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
    <title>BootstrapTest</title>
   <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<h4>胶囊式导航中的激活状态</h4>
<ul class="nav nav-pills">
	<li class="active"><a href="#">首页 <span class="badge">42</span></a></li>
	<li><a href="#">简介</a></li>
	<li><a href="#">消息 <span class="badge">3</span></a></li>
</ul>
<br>
<h4>列表导航中的激活状态</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
	<li class="active">
		<a href="#">
			<span class="badge pull-right">42</span>
			首页
		</a>
	</li>
	<li><a href="#">简介</a></li>
	<li>
		<a href="#">
			<span class="badge pull-right">3</span>
			消息
		</a>
	</li>
</ul>
</body>
</html></span>