Bootstrap-导航栏

Bootstrap是一种用户界面框架，可以帮助您轻松地创建美丽且响应式的网站。其中一个重要的组件是导航栏，可以让您的网站更易于导航和使用。

导航栏基础

要创建一个基本的Bootstrap导航栏，请按照以下步骤操作：

1. 创建一个<nav>元素，并将其类设置为navbar。
2. 在<nav>元素内部创建一个<div>元素并将其类设置为container.
3. 在<div class="container">内部创建一个<a>元素，并将其类设置为navbar-brand和text-primary。
4. 在<div class="container">内部创建一个<button>元素，并将其类设置为navbar-toggler，并设置data-toggle属性为collapse和data-target属性为所需的ID。
5. 创建一个具有id与data-target匹配的<div>元素，并将其类设置为collapse navbar-collapse。
6. 在<div class="collapse navbar-collapse">中创建一个<ul>元素，并将其类设置为navbar-nav。
7. 在<ul>元素内部创建一组<li>元素以及所需的内部<a>元素。
8. 将所有必需的CSS和JavaScript包含到您的网站中。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand text-primary" href="#">Brand Name</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link2</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

解释

• navbar-expand-lg类指示在更大的屏幕下将导航栏扩展。
• bg-light类为导航栏添加了轻盈的背景颜色。
• navbar-brand类创建网站的品牌名称，可以在此处替换为您自己的网站名称。
• navbar-toggler类创建了导航栏的折叠按钮，该按钮在小型设备上展开和折叠导航栏。
• navbar-toggler-icon类对折叠按钮的图标进行了设置。
• collapse navbar-collapse类包含导航栏的所有项目和链接。
• navbar-nav类将链接组成有序列表。

导航栏样式

Bootstrap提供了几种导航栏样式。一般的，您可以选择将其应用于导航栏中的任何项目，例如：navbar-light、 navbar-dark、bg-*等。

可以使用以下类来更改导航栏样式：

• navbar-dark: 使导航栏文本颜色为深色，背景为浅色。
• navbar-light: 使导航栏文本颜色为浅色，背景为深色。
• bg-light: 更改导航栏背景颜色为浅色。
• bg-dark: 更改导航栏背景颜色为深色。

导航栏位置

Bootstrap导航栏可以放置在网页的不同位置，包括固定到页面顶部或底部。要更改导航栏的位置，请将以下类添加到导航栏上：

• fixed-top: 固定导航栏到页面顶部。
• fixed-bottom: 固定导航栏到页面底部。

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <div class="container">
        <a class="navbar-brand text-primary" href="#">Brand Name</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link2</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

导航栏响应式

Bootstrap导航栏是响应式设计的，可以在各种设备上自适应和展示。在较小的屏幕上，导航栏可能会折叠为按钮。您可以调整响应性导航栏使用下列类修改：

• navbar-expand-*: 更改导航栏的折叠点。它有几个值，例如：sm、md、lg、xl。
• navbar-toggler-right: 更改折叠按钮的位置。它还有navbar-toggler-left。

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand text-primary" href="#">Brand Name</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

总结

Bootstrap导航栏是一种强大的组件，它可以有效地确保您的网站易于导航和使用。使用基本的导航栏，您可以快速轻松地添加许多链接和功能。通过在导航栏中添加样式和位置，您可以创建令人印象深刻而且独特的导航栏。