How to set the bootstrap navigation bar

Bootstrap provides a simple guide to setting up navigation bars: Introducing the Bootstrap library to create navigation bar containers Add brand identity Create navigation links Add other elements (optional) Adjust styles (optional)

Bootstrap Navigation Bar Setting Guide

Bootstrap provides powerful tools to easily create responsive, powerful navigation bars. The following steps will guide you to set up the Bootstrap navigation bar:

1. Introducing the Bootstrap library

In your HTML file, link the Bootstrap library to your page:

 <code><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbszth/b1EixfHpvwxNxQ8p5m8178fX2RC1tiIsu3nT3UpHvmwHuH 89y k9/nl8" crossorigin="anonymous"></code>

2. Create a navigation bar container

Create a navigation bar container using the nav element:

 <code><nav class="navbar navbar-expand-lg navbar-light bg-light"></nav></code>

• The navbar class will apply the Bootstrap navigation bar style.
• navbar-expand-lg class will make the navigation bar automatically expand on larger screens.
• navbar-light and bg-light classes will apply light-colored themes.

3. Add brand identity

Use navbar-brand class to add the brand identity to the navigation bar:

 <code><a class="navbar-brand" href="#">我的网站</a></code>

4. Create a navigation link

Create navigation links using nav-item and nav-link classes:

 <code><ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" 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></code>

5. Add other elements (optional)

You can add additional elements as needed, such as search fields, buttons, or drop-down menus.

6. Adjust the style (optional)

You can use the attached CSS class to customize the appearance and behavior of the navigation bar, such as changing text color, background color, or font size.

Sample code:

 <code><nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">我的网站</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto"> <li class="nav-item"> <a class="nav-link" href="#">主页</a> </li> <li class="nav-item"> <a class="nav-link" href="#">关于</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">更多</a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">联系我们</a></li> <li><a class="dropdown-item" href="#">帮助</a></li> </ul> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </nav></code>

The above is the detailed content of How to set the bootstrap navigation bar. For more information, please follow other related articles on the PHP Chinese website!