如何在Bootstrap 4导航栏中为主题添加对应条目数量？

核心思路 #

Bootstrap 4自带的badge组件刚好适配这类计数展示需求，我们只需要把它嵌入导航栏的菜单项里，再根据场景选择静态写死、后端动态渲染或者前端异步更新数值就可以了。下面分几种常用场景给你演示：

1. 静态实现（固定数值） #

如果你的条目数量暂时不需要变动，直接把badge放在导航链接后方就行，还能通过Bootstrap内置的颜色类调整样式，让它和导航栏风格更协调：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">技术知识库</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">PHP <span class="badge badge-secondary">2,456</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Javascript <span class="badge badge-secondary">500</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ASP.NET <span class="badge badge-secondary">4,444</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">HTML/CSS <span class="badge badge-secondary">23,454</span></a>
      </li>
    </ul>
  </div>
</nav>

你可以把badge-secondary换成badge-primary（蓝色）、badge-success（绿色）等颜色类，匹配你的网站主题。

2. 动态实现（PHP后端驱动） #

如果数量是从数据库或接口获取的，用PHP动态输出就很方便。假设你已经从数据库查询到了各主题的统计数，存在变量里：

<?php
// 模拟从数据库获取的数值，实际项目中替换为数据库查询逻辑
$phpCount = number_format(2456); // 自动添加千位分隔符，输出2,456
$jsCount = number_format(500);
$aspCount = number_format(4444);
$htmlCssCount = number_format(23454);
?>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">技术知识库</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">PHP <span class="badge badge-secondary"><?php echo $phpCount; ?></span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Javascript <span class="badge badge-secondary"><?php echo $jsCount; ?></span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ASP.NET <span class="badge badge-secondary"><?php echo $aspCount; ?></span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">HTML/CSS <span class="badge badge-secondary"><?php echo $htmlCssCount; ?></span></a>
      </li>
    </ul>
  </div>
</nav>

这里用number_format()函数自动处理千位分隔符，比手动写死数值更灵活。

3. 前端JS异步更新 #

如果需要从前端异步获取最新数量（比如实时统计），可以给徽章加个ID，用JS动态更新内容：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">技术知识库</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">PHP <span class="badge badge-secondary" id="phpCount">0</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Javascript <span class="badge badge-secondary" id="jsCount">0</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ASP.NET <span class="badge badge-secondary" id="aspCount">0</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">HTML/CSS <span class="badge badge-secondary" id="htmlCssCount">0</span></a>
      </li>
    </ul>
  </div>
</nav>

<script>
// 模拟AJAX请求获取实时数据，实际项目替换为你的接口地址
fetch('/api/topic-counts')
  .then(res => res.json())
  .then(data => {
    // 更新各个徽章的数值
    document.getElementById('phpCount').textContent = numberFormat(data.php);
    document.getElementById('jsCount').textContent = numberFormat(data.js);
    document.getElementById('aspCount').textContent = numberFormat(data.asp);
    document.getElementById('htmlCssCount').textContent = numberFormat(data.htmlCss);
  })
  .catch(err => console.log('获取数据失败:', err));

// JS版千位分隔符函数
function numberFormat(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
</script>

小优化：自定义徽章样式 #

如果觉得默认徽章太突兀，可以加一点自定义CSS调整大小和间距：

.nav-link .badge {
  font-size: 0.7rem;
  margin-left: 0.5rem;
  padding: 0.25em 0.4em;
}

内容的提问来源于stack exchange，提问作者Artoo Smith