在 Bootstrap 中创建选项卡式药丸和垂直药丸导航菜单

创建选项卡式药丸导航菜单

Bootstrap是一种流行的前端框架，可以帮助开发者快速搭建具有良好响应式设计的web应用程序。在Bootstrap中，选项卡式导航菜单是常见的组件之一。而药丸式导航菜单，就是一种类似选项卡的导航菜单，但是不是方形，而是圆形。在本节中，我们将基于Bootstrap来创建选项卡式药丸导航菜单。

Step 1: 创建导航菜单基本结构

在html中，我们使用一个无序列表来表示导航菜单。在Bootstrap中，我们可以使用.nav和.nav-pills类来设置导航菜单外观，并在ul元素上添加.nav和.nav-pills类。下面是一个示例代码：

    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active" href="#">首页</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">产品</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">服务</a>
        </li>
    </ul>

在上面的代码中，我们使用了.nav和.nav-pills类来设置导航菜单的样式。其中，.nav-pills类用于设置选项卡式导航菜单的外观，.nav-link类用于设置每个选项卡的样式。在ul的每个li元素中，我们都添加了.nav-item类，它用于告诉Bootstrap这是一个导航菜单里的项目。

Step 2: 添加药丸样式

为了使导航菜单的样式看起来像药丸，我们需要为每个选项卡添加一个圆形伪元素。我们可以使用CSS中的:after伪元素来实现这个效果。下面是一个示例代码：

    .nav-pills .nav-item .nav-link:after {
        content: "";
        display: block;
        border-radius: 12px;
        width: 12px;
        height: 12px;
        margin: 2px auto 0 auto;
        background-color: #ccc;
    }
    .nav-pills .nav-item .nav-link.active:after {
        background-color: #007bff;
    }

在上面的代码中，我们定义了两个CSS规则。第一个规则设置了每个选项卡后面的圆形伪元素的样式，包括圆角，宽度和高度等。第二个规则定义了.active类，使得当前选中的选项卡的伪元素样式发生变化。此时，我们可以刷新浏览器查看导航菜单的外观效果。

Step 3: 添加JavaScript

现在，我们的导航菜单已经具备了基本的样式和结构。不过，默认情况下，Bootstrap并没有为导航菜单提供自动切换的功能。要实现这个功能，我们需要使用JavaScript。具体来说，我们可以使用Bootstrap提供的.tab()方法来实现导航菜单的自动切换功能。下面是一个示例代码：

    $('.nav-pills .nav-link').on('click', function (e) {
      e.preventDefault()
      $(this).tab('show')
    })

在上面的代码中，我们首先使用jQuery选择所有.nav-pills .nav-link元素，当用户点击任意一个选项卡时，我们使用tab('show')方法来激活当前选项卡。此时，我们可以再次刷新浏览器并尝试点击菜单项，看看选项卡切换的效果。

创建垂直药丸导航菜单

垂直药丸导航菜单与选项卡式导航菜单类似，但是不是水平排列的。在Bootstrap中，我们可以使用.nav和.nav-pills类来设置导航菜单外观。同时，我们也可以使用.flex-column类来设置垂直方向的菜单布局。下面是一个示例代码：

    <ul class="nav flex-column nav-pills">
        <li class="nav-item">
            <a class="nav-link active" href="#">首页</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">产品</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">服务</a>
        </li>
    </ul>

在上面的代码中，我们使用了.flex-column类来设置导航菜单的垂直方向布局。此外，我们还使用了.nav-pills类来设置选项卡式导航菜单的样式。注意，在使用.flex-column类时，我们需要将.nav-pills类放在.flex-column类之后，否则样式可能不会生效。

为了让导航菜单看起来像药丸，我们同样需要为每个菜单项添加圆形伪元素。与前面的步骤相同，我们可以使用CSS中的:after伪元素来实现这个效果。下面是一个示例代码：

    .nav-pills .nav-item .nav-link:after {
        content: "";
        display: block;
        border-radius: 12px;
        width: 12px;
        height: 12px;
        margin: 2px auto 0 auto;
        background-color: #ccc;
    }
    .nav-pills .nav-item .nav-link.active:after {
        background-color: #007bff;
    }

最后，我们还需要使用JavaScript来实现自动切换导航菜单的功能。具体来说，我们可以使用与选项卡式导航菜单相同的.tab()方法来实现这个功能。下面是一个示例代码：

    $('.nav-pills .nav-link').on('click', function (e) {
      e.preventDefault()
      $(this).tab('show')
    })

通过上面的步骤，我们成功创建了一个垂直方向的药丸导航菜单，并实现了自动切换的功能。

结论

在本篇文章中，我们学习了如何使用Bootstrap来创建选项卡式药丸导航菜单和垂直药丸导航菜单。我们通过HTML、CSS和JavaScript的组合使用，成功实现了导航菜单的样式设置和自动切换功能。使用Bootstrap可以让我们快速、方便地创建具有良好响应式设计的web应用程序，提高开发效率。