To create a responsive navigation bar in Bootstrap 5, first use the navbar class to build the basic structure, then add responsive buttons and folded menus to achieve mobile adaptation, 1. Use the navbar-expand- class to control responsive breakpoints, 2. Use the navbar-toggler and collapse classes to implement folding functions, 3. Use navbar-dark or navbar-light to set styles with the bg- class, 4. You can add extra content such as search boxes or buttons to the navigation bar, 5. Use ms-auto or justify-content-center to adjust the menu alignment, and finally you can quickly build a navigation bar with complete functions and adaptability to multiple devices.

Creating a responsive navigation bar is actually quite straightforward in Bootstrap 5, as long as you are familiar with its class structure and basic components. The core is to use navbar related classes and use collapse menus to achieve mobile adaptation.

Here are some key points and steps to help you quickly build a responsive navigation bar.

Basic structure: Use navbar class

Bootstrap's navigation bar relies on a specific set of class names to define structure and behavior. The most basic structures include containers, brands, navigation links and responsive buttons.

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">YourBrand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Key points:

• navbar-expand-lg means that the navigation bar is expanded on the large screen (lg) or above, and the small screen is folded
• navbar-toggler is a responsive button, click to expand the menu
• collapse class controls the hiding and expansion of the menu

Add styles and colors: Use built-in theme classes

Bootstrap provides some preset color classes, such as navbar-dark and navbar-light , which can quickly beautify the navigation bar with background colors.

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

• navbar-dark is used to turn white when dark backgrounds
• navbar-light is used for light backgrounds and text becomes darker
• You can use bg-* classes (such as bg-primary and bg-success ) to set the background color

If you want to customize the color, you can write CSS directly or use Sass variables.

Responsive behavior: Control the display of menus under different devices

Bootstrap's responsive navigation bar depends on navbar-expand-* class, you can set different breakpoints as needed:

• navbar-expand-sm : Displayed as expanded status on sm and above
• navbar-expand-md
• navbar-expand-lg
• navbar-expand-xl
• navbar-expand-xxl

For example, if you want the menu to be expanded on the mid-screen device, you can write it as:

 <nav class="navbar navbar-expand-md navbar-light bg-light">

In addition, you can also adjust the position of the menu, such as right or center:

• ms-auto : Align the menu to the right
• justify-content-center : center the entire navigation bar content

Add extra content: such as a search box or button

There are not only links in the navigation bar, but also other content, such as search boxes or login buttons:

 <form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>

Put this form in navbar-collapse and it will also collapse along with the menu.

Basically that's it. The responsive navigation bar of Bootstrap 5 has been packaged well. You only need to understand the role of class names to quickly build a practical structure. When used in actual use, just adjust the color, layout and content according to project needs.

The above is the detailed content of How to create a responsive navbar in Bootstrap 5?. For more information, please follow other related articles on the PHP Chinese website!