logo标签列表

在Bootstrap导航选项卡中添加图标是否可行？

htmlcsstwitter-bootstraptwitter-bootstrap-3
7
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Tabs</h3>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

</body>
</html>

这是示例代码。

是否可能在 Bootstrap 导航选项卡中添加图标，如下图所示。

enter image description here

我想在导航选项卡中添加数字图标。

3个回答
13

演示

您可以使用 徽章 来完成此操作。

<li class="active"><a href="#">Home<span class="badge">140</span></a></li>

还需要一点CSS

.nav-tabs .badge{
    position: absolute;
    top: -10px;
    right: -10px;
    background: red;
}
3

将您的徽章插入并相对于容器定位如下：

.count-badge {
  position: relative;
  top: -50px;
  right: -50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

<div class="container">
  <h3>Tabs</h3>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a>
      <span class="count-badge badge">140</span>
    </li>
    <li><a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>
    </li>
    <li><a href="#">Menu 3</a>
    </li>
  </ul>
</div>

2

是的，有多种方法可以实现。Bootstrap有徽章（badges），这是一种优雅的解决方案。

<span class="badge">140</span>
你是建议我完整地做这件事情，包括CSS吗？ - camelCase
2
欢迎来到 Stack Overflow。 - Popnoodles
好的观点。但上面只是示例代码......我会想出一些解决方案的。 - camelCase
1
我也注意到了很多这样的情况，仅仅提供功能还不足以满足许多发帖者的期望，他们希望你为他们完成所有的工作，这很遗憾。 - Peter Girnus
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接