bootstrap漂亮的分页栏，点击不同的栏显示不同的文字内容

Bootstrap 是一个流行的前端框架，它提供了很多预制的样式和组件，其中分页组件可以用来创建响应式分页导航。要创建一个漂亮的分页栏，并且点击不同的栏显示不同的文字内容，你可以使用 Bootstrap 的分页类和一些JavaScript来实现。下面是基本的实现步骤：

1. 首先，在你的HTML文档中引入Bootstrap的CSS和JavaScript文件。
2. 使用Bootstrap的分页组件类创建基础的分页栏，比如 `.pagination`。
3. 在分页栏中添加多个分页项，使用 `<li>` 标签，并且添加 `.active` 类到当前激活的分页项。
4. 使用JavaScript监听分页项的点击事件，当点击不同的分页项时，显示对应的内容。

下面是一个简单的示例代码：

<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- 引入Bootstrap的JavaScript文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- 分页栏 -->
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#" onclick="changeContent('Page1')">1</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="changeContent('Page2')">2</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="changeContent('Page3')">3</a></li>
  </ul>
</nav>

<!-- 内容显示区域 -->
<div id="content" style="margin-top: 20px;">
  <!-- 默认内容 -->
</div>

<script>
function changeContent(page) {
  var contentDiv = document.getElementById('content');
  contentDiv.innerHTML = "这是页面 " + page + " 的内容";
}
</script>

在这个例子中，当用户点击不同的分页项时，`changeContent` 函数会被调用，并且传递相应的页面标识（如 "Page1"、"Page2"、"Page3"），然后JavaScript函数会更新内容显示区域的文本。