bootstrap4 点击切换内容

你可以使用Bootstrap4的Collapse组件来实现点击切换内容的功能。具体操作如下：

1. 首先，在需要切换内容的元素上添加一个data-toggle="collapse"属性，以及一个data-target="#example"属性，其中#example是要切换的内容的ID。

<button data-toggle="collapse" data-target="#example">点击切换内容</button>

2. 然后，在需要切换的内容上添加一个ID，并添加一个class为collapse的样式。

<div id="example" class="collapse">
  <p>这是要切换的内容</p>
</div>

这样，点击按钮时就可以切换内容了。同时，Bootstrap还提供了很多可选参数，可以参考官方文档进行设置。

相关问题

bootstrap 点击切换图标

要实现 Bootstrap 点击切换图标，你可以使用 Bootstrap 的 Collapse 插件和一些 JavaScript 代码。以下是一个简单的示例：

HTML 代码：

<button class="btn btn-primary" data-toggle="collapse" data-target="#demo">
  切换
</button>

<div id="demo" class="collapse">
  <p>这是要切换的内容。</p>
</div>

JavaScript 代码：

$(function() {
  $('.btn').click(function() {
    $(this).find('i').toggleClass('glyphicon-triangle-bottom glyphicon-triangle-top');
  });
});

在这个示例中，当按钮被点击时，它会切换 Collapse 插件中的内容的可见性，并且切换按钮上的图标。你可以根据需要调整 JavaScript 代码中的 CSS 类名来使用不同的图标。

bootstrap 下拉菜单切换标签页

首先，需要在 HTML 中添加 Bootstrap 的 CSS 和 JavaScript 文件。然后，在需要添加下拉菜单的地方，可以使用以下代码：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    选择标签页
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#tab1" data-toggle="tab">标签页1</a>
    <a class="dropdown-item" href="#tab2" data-toggle="tab">标签页2</a>
    <a class="dropdown-item" href="#tab3" data-toggle="tab">标签页3</a>
  </div>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="tab1" role="tabpanel">
    标签页1的内容
  </div>
  <div class="tab-pane" id="tab2" role="tabpanel">
    标签页2的内容
  </div>
  <div class="tab-pane" id="tab3" role="tabpanel">
    标签页3的内容
  </div>
</div>

这段代码创建了一个下拉菜单，并将其与 Bootstrap 的标签页组件结合起来。当用户点击下拉菜单中的选项时，会切换到相应的标签页。