使用 Bootstrap 制作 TOC

Bootstrap 是一个流行的前端开发框架，可以帮助我们快速搭建网站和应用程序。其中，TOC（Table of Contents）也是一个非常实用的功能，可以自动生成文章的目录。

前置条件

为了使用 Bootstrap 制作 TOC，您需要安装以下两个库：

1. Bootstrap CSS 库，可以通过以下方式引用：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" integrity="sha384-kvpJftCezBFbvYqa/lPxRZNy9bSk6P+UDY/4DhJ1btYojF7W2qLAsddxtG5Md/pi" crossorigin="anonymous">

2. jQuery JavaScript 库，可以通过以下方式引用：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

制作 TOC

以下是一个使用 Bootstrap 制作 TOC 的示例：

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="article">
        <h1>文章标题</h1>
        <p>文章内容</p>
        <h2>第一节标题</h2>
        <p>第一节内容</p>
        <h2>第二节标题</h2>
        <p>第二节内容</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="toc">
        <ul class="list-unstyled">
          <li><a href="#article-title">文章标题</a></li>
          <li><a href="#section-1">第一节标题</a></li>
          <li><a href="#section-2">第二节标题</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

可以看到，文章的目录是通过一个包含链接的无序列表实现的。每个链接通过锚点链接到对应的标题。

样式定制

如果您想要对 TOC 的样式进行定制，可以通过修改 Bootstrap 的 CSS 样式表来实现。以下是一些常见的定制方法：

/* 修改字体大小和颜色 */
.toc {
  font-size: 16px;
  color: #333;
}

/* 去除链接下划线 */
.toc a {
  text-decoration: none;
}

/* 添加字体图标 */
.toc li:before {
  content: "\f111";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 10px;
}

/* 添加动画效果 */
.toc a:hover {
  color: #007bff;
  transition: all .3s ease-in-out;
}

以上样式可以通过添加到自己的 CSS 文件中来定制 TOC 的样式。

总结

使用 Bootstrap 制作 TOC 是一项非常简单和实用的功能，有助于为文章和网页添加目录，提高用户体验。在实际开发中，您可以根据自己的需求进行定制。