Twitter bootstrap 如何使用ajax和切换更改视图？

在Drupal 8上，我创建了两个块视图：

message_activity_stream_timeline_public
message_activity_stream_timeline_private

我在主页的小树枝模板中添加了以下代码：

  <div class="main-timeline">
    {{ drupal_view('message_activity_stream_timeline_public', 'block_1') }}
    {{ drupal_view('message_activity_stream_timeline_private', 'block_1') }}
  </div>

及

{{drupal_视图（'message_activity_stream_timeline_public'，'block_1'）}
{{drupal_视图（'message_activity_stream_timeline_private'，'block_1'）}

但是标签不适合我。我正在寻找一个切换按钮的外观

我在Bootstrap 4上发现了这个：

我应该如何更改代码的第一部分使其看起来相同？（一个3倍大的按钮比较理想）

切换此开关元件
公开的
普里沃

在这个屏幕截图中，第一个按钮（选项卡）是我当前的代码，它可以工作

我想使用Bootstrap 4中的摇杆按钮，这是第二个用来替换选项卡的按钮

我想要第三个按钮的外观（每侧的文本）

          <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item">
              <a class="nav-link" id="pills-public-tab" data-toggle="pill" href="#pills-public" role="tab" aria-controls="pills-public" aria-selected="false">PUBLIC</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" id="pills-private-tab" data-toggle="pill" href="#pills-private" role="tab" aria-controls="pills-private" aria-selected="true">PRIVÉ</a>
            </li>
          </ul>

  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade" id="pills-public" role="tabpanel" aria-labelledby="pills-public-tab">
      <div class="home-page-footer">
        <div class="timelines">
          <div class="main-timeline pt-5">
            {{ drupal_view('message_activity_stream_timeline_public', 'block_1') }}
          </div>
        </div>
      </div>
    </div>
    <div class="tab-pane fade show active" id="pills-private" role="tabpanel" aria-labelledby="pills-private-tab">
      <div class="home-page-footer">
        <div class="timelines">
          <div class="main-timeline pt-5">
            {{ drupal_view('message_activity_stream_timeline_private', 'block_1') }}
          </div>
        </div>
      </div>
    </div>
  </div>

          <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item">
              <a class="nav-link" id="pills-public-tab" data-toggle="pill" href="#pills-public" role="tab" aria-controls="pills-public" aria-selected="false">PUBLIC</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" id="pills-private-tab" data-toggle="pill" href="#pills-private" role="tab" aria-controls="pills-private" aria-selected="true">PRIVÉ</a>
            </li>
          </ul>



          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="customSwitch1" checked="">
            <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
          </div>



          <div class="toggle-on-off">
            <span class="toggle-on-off-public">PUBLIC</span>
            <i class="fas fa-toggle-on fa-inverse fa-rotate-180 fa-3x text-primary"></i>
            <span class="toggle-on-off-prive">PRIVÉ</span>
          </div>