📌  相关文章
📜  引导 4 个垂直选项卡响应式 - Html (1)

📅  最后修改于: 2023-12-03 15:39:30.673000             🧑  作者: Mango

引导 4 个垂直选项卡响应式 - HTML

有时候，我们需要在网页上展示一些信息、功能等，但是由于空间受限，不可能把所有信息都一次性展示出来。这时候，垂直选项卡就可以发挥作用了。垂直选项卡可以让我们在有限的空间内展示更多的信息，用户也可以通过点击标签页来快速切换内容。本文将介绍如何使用 HTML 和 Bootstrap 4 创建一个响应式的垂直选项卡。

准备工作

在开始之前，我们需要准备一些工具和资源：

  • 编辑器：比较好的选择有 Visual Studio Code、Sublime Text、Atom 等
  • Bootstrap：用于构建响应式布局的框架。在本文中，我们将使用 Bootstrap 4。
  • jQuery：Bootstrap 使用了 jQuery，所以我们需要先引入它。
  • 图片：https://via.placeholder.com/ 网站可以生成一些临时图片，用于填充卡片上的图片位置。

在 HTML 文件的 head 部分，我们需要引入 Bootstrap 和 jQuery：

<head>
  <title>垂直选项卡</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link
    rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  />
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  ></script>
  <script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  ></script>
</head>
创建 HTML 结构

在 body 部分，我们需要创建一个 <div> 标签，并添加 Bootstrap 的 container 类和 row 类。

<body>
  <div class="container">
    <div class="row justify-content-center">
      
    </div>
  </div>
</body>

之后，我们需要在 <div> 标签中添加 4 个卡片，每个卡片对应一个选项卡。

<body>
  <div class="container">
    <div class="row justify-content-center">
      <div class="card col-md-4">
        <img
          src="https://via.placeholder.com/400x250"
          class="card-img-top"
          alt="卡片 1"
        />
        <div class="card-body">
          <h5 class="card-title">卡片 1</h5>
          <p class="card-text">
            这是卡片 1 的内容。Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Morbi tempus sollicitudin dui, quis vestibulum
            massa porttitor cursus. Sed a libero non sapien vehicula feugiat
            eget non nibh. Duis tincidunt ullamcorper mi, a rhoncus justo
            vulputate at.
          </p>
          <a href="#" class="btn btn-primary">了解更多</a>
        </div>
      </div>
      <div class="card col-md-4">
        <img
          src="https://via.placeholder.com/400x250"
          class="card-img-top"
          alt="卡片 2"
        />
        <div class="card-body">
          <h5 class="card-title">卡片 2</h5>
          <p class="card-text">
            这是卡片 2 的内容。Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Morbi tempus sollicitudin dui, quis vestibulum
            massa porttitor cursus. Sed a libero non sapien vehicula feugiat
            eget non nibh. Duis tincidunt ullamcorper mi, a rhoncus justo
            vulputate at.
          </p>
          <a href="#" class="btn btn-primary">了解更多</a>
        </div>
      </div>
      <div class="card col-md-4">
        <img
          src="https://via.placeholder.com/400x250"
          class="card-img-top"
          alt="卡片 3"
        />
        <div class="card-body">
          <h5 class="card-title">卡片 3</h5>
          <p class="card-text">
            这是卡片 3 的内容。Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Morbi tempus sollicitudin dui, quis vestibulum
            massa porttitor cursus. Sed a libero non sapien vehicula feugiat
            eget non nibh. Duis tincidunt ullamcorper mi, a rhoncus justo
            vulputate at.
          </p>
          <a href="#" class="btn btn-primary">了解更多</a>
        </div>
      </div>
      <div class="card col-md-4">
        <img
          src="https://via.placeholder.com/400x250"
          class="card-img-top"
          alt="卡片 4"
        />
        <div class="card-body">
          <h5 class="card-title">卡片 4</h5>
          <p class="card-text">
            这是卡片 4 的内容。Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Morbi tempus sollicitudin dui, quis vestibulum
            massa porttitor cursus. Sed a libero non sapien vehicula feugiat
            eget non nibh. Duis tincidunt ullamcorper mi, a rhoncus justo
            vulputate at.
          </p>
          <a href="#" class="btn btn-primary">了解更多</a>
        </div>
      </div>
    </div>
  </div>
</body>
添加选项卡

现在，我们已经添加了 4 个卡片，但它们仍然被依次排列着。我们需要添加选项卡，在用户点击标签页时，显示相应的卡片内容。

我们可以使用 Bootstrap 的 nav 和 nav-tabs 类来创建选项卡，使用 nav-item 和 nav-link 类来设置标签页。

<body>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-3">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a
              class="nav-link active"
              id="home-tab"
              data-toggle="tab"
              href="#home"
              role="tab"
              aria-controls="home"
              aria-selected="true"
              >卡片 1</a
            >
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              id="profile-tab"
              data-toggle="tab"
              href="#profile"
              role="tab"
              aria-controls="profile"
              aria-selected="false"
              >卡片 2</a
            >
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              id="contact-tab"
              data-toggle="tab"
              href="#contact"
              role="tab"
              aria-controls="contact"
              aria-selected="false"
              >卡片 3</a
            >
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              id="about-tab"
              data-toggle="tab"
              href="#about"
              role="tab"
              aria-controls="about"
              aria-selected="false"
              >卡片 4</a
            >
          </li>
        </ul>
      </div>
      <div class="col-md-9">
        <div class="tab-content" id="myTabContent">
          <div
            class="tab-pane fade show active"
            id="home"
            role="tabpanel"
            aria-labelledby="home-tab"
          >
            <div class="card col-md-12">
              <img
                src="https://via.placeholder.com/400x250"
                class="card-img-top"
                alt="卡片 1"
              />
              <div class="card-body">
                <h5 class="card-title">卡片 1</h5>
                <p class="card-text">
                  这是卡片 1 的内容。Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit. Morbi tempus sollicitudin dui,
                  quis vestibulum massa porttitor cursus. Sed a libero non
                  sapien vehicula feugiat eget non nibh. Duis tincidunt
                  ullamcorper mi, a rhoncus justo vulputate at.
                </p>
                <a href="#" class="btn btn-primary">了解更多</a>
              </div>
            </div>
          </div>
          <div
            class="tab-pane fade"
            id="profile"
            role="tabpanel"
            aria-labelledby="profile-tab"
          >
            <div class="card col-md-12">
              <img
                src="https://via.placeholder.com/400x250"
                class="card-img-top"
                alt="卡片 2"
              />
              <div class="card-body">
                <h5 class="card-title">卡片 2</h5>
                <p class="card-text">
                  这是卡片 2 的内容。Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit. Morbi tempus sollicitudin dui,
                  quis vestibulum massa porttitor cursus. Sed a libero non
                  sapien vehicula feugiat eget non nibh. Duis tincidunt
                  ullamcorper mi, a rhoncus justo vulputate at.
                </p>
                <a href="#" class="btn btn-primary">了解更多</a>
              </div>
            </div>
          </div>
          <div
            class="tab-pane fade"
            id="contact"
            role="tabpanel"
            aria-labelledby="contact-tab"
          >
            <div class="card col-md-12">
              <img
                src="https://via.placeholder.com/400x250"
                class="card-img-top"
                alt="卡片 3"
              />
              <div class="card-body">
                <h5 class="card-title">卡片 3</h5>
                <p class="card-text">
                  这是卡片 3 的内容。Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit. Morbi tempus sollicitudin dui,
                  quis vestibulum massa porttitor cursus. Sed a libero non
                  sapien vehicula feugiat eget non nibh. Duis tincidunt
                  ullamcorper mi, a rhoncus justo vulputate at.
                </p>
                <a href="#" class="btn btn-primary">了解更多</a>
              </div>
            </div>
          </div>
          <div
            class="tab-pane fade"
            id="about"
            role="tabpanel"
            aria-labelledby="about-tab"
          >
            <div class="card col-md-12">
              <img
                src="https://via.placeholder.com/400x250"
                class="card-img-top"
                alt="卡片 4"
              />
              <div class="card-body">
                <h5 class="card-title">卡片 4</h5>
                <p class="card-text">
                  这是卡片 4 的内容。Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit. Morbi tempus sollicitudin dui,
                  quis vestibulum massa porttitor cursus. Sed a libero non
                  sapien vehicula feugiat eget non nibh. Duis tincidunt
                  ullamcorper mi, a rhoncus justo vulputate at.
                </p>
                <a href="#" class="btn btn-primary">了解更多</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

现在，我们可以预览网页，并测试选项卡的功能了。当用户点击不同的标签页时，不同的卡片内容将被显示出来。

结语

在本文中，我们介绍了如何使用 HTML 和 Bootstrap 4 创建一个响应式的垂直选项卡。通过这个简单的示例，你可以了解如何使用 Bootstrap 的 nav 和 nav-tabs 类，以及如何将多个卡片组合在一起，形成一个选项卡界面。如果你对 Bootstrap 还不熟悉，可以参考官方文档来了解更多的 API 和用法。