在 Bootstrap 中，标签（Tabs）组件用于创建具有标签切换功能的界面。以下是一个简单的 Bootstrap 标签的示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap Tabs Example</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>

<div class="container mt-5">
    <h1>Bootstrap Tabs Example</h1>
    
    <!-- 标签导航 -->
    <ul class="nav nav-tabs" id="myTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
        </li>
    </ul>

    <!-- 标签内容 -->
    <div class="tab-content mt-2">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <p>This is the Home tab content.</p>
        </div>
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <p>This is the Profile tab content.</p>
        </div>
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
            <p>This is the Contact tab content.</p>
        </div>
    </div>
</div>

<!-- 引入 Bootstrap JS 和 Popper.js（注意：需要先引入 Popper.js） -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>

</body>
</html>

在这个例子中，我们使用了 Bootstrap 的标签组件，包括了 nav 类、nav-tabs 类、tab-content 类等。每个标签都被定义为一个 nav-link 类，而每个标签内容则包含在对应的 tab-pane 类中。

通过设置 data-bs-toggle="tab" 属性，我们指定了这是一个标签切换的链接。标签导航的 ID 和标签内容的 ID 需要相互匹配，以确保它们关联在一起。

Bootstrap 的标签组件支持垂直和水平标签、禁用标签、动态添加标签等功能，详细信息可以参考 Bootstrap 文档。


转载请注明出处：http://www.zyzy.cn/article/detail/12618/Bootstrap