运用bootstrap创建一个包含3个胶囊按钮的tab标签列表模块，列表中有标题名和发布时间

好的，以下是一个使用 Bootstrap 创建包含3个胶囊按钮的 tab 标签列表模块的示例代码，其中包含标题名和发布时间：

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#tab1">按钮1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab2">按钮2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab3">按钮3</a>
  </li>
</ul>

<div class="tab-content">
  <div id="tab1" class="tab-pane fade show active">
    <h3>标题1</h3>
    <p>发布时间：2021年9月1日</p>
    <p>这里是标签页1的内容。</p>
  </div>
  <div id="tab2" class="tab-pane fade">
    <h3>标题2</h3>
    <p>发布时间：2021年9月2日</p>
    <p>这里是标签页2的内容。</p>
  </div>
  <div id="tab3" class="tab-pane fade">
    <h3>标题3</h3>
    <p>发布时间：2021年9月3日</p>
    <p>这里是标签页3的内容。</p>
  </div>
</div>

解释一下代码：

- `ul` 元素包含了三个 `li` 元素，每个 `li` 元素都包含一个 `a` 元素，用于创建胶囊按钮。
- `data-toggle="tab"` 属性用于告诉 Bootstrap 将这些按钮用作标签页的切换器。
- `href` 属性指定了与每个按钮相关联的标签页的 ID。
- `div` 元素包含了三个 `div` 元素，每个 `div` 元素都有一个唯一的 ID，用于与按钮相关联。
- `class="tab-pane fade"` 属性用于隐藏未激活的标签页。
- `class="show active"` 属性用于显示默认激活的标签页。

希望这个示例对你有所帮助！