Bootstrap 5导航栏的放置

每个网站都有一个导航栏，使其更方便用户使用，这样，通过网站的导航变得很容易，用户可以直接搜索他们感兴趣的主题。

导航条的位置用于设置导航条的位置。我们可以使用位置工具来放置导航条，如固定顶部，固定底部或粘性顶部，等。

导航栏放置使用的类：

fixed-top: 该类用于将导航条固定在顶部的位置。
fixed-bottom。该类用于将导航条固定在底部的位置。
sticky-top：该类用于设置导航条的位置为粘性顶部。
sticky-bottom。该类用于设置导航条的位置为粘性底部。

语法:

<nav class="navbar fixed-*">
     <div>
           <a class="navbar-brand" href="#">
              ...
           </a>
           ...
     </div>
</nav>

注意：我们可以根据要求用顶部或底部代替这个*。

例子1：在这个例子中，我们将学习在固定的顶部放置导航条，并将导航条放置在顶部。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        Bootstrap 5 Navbar Placement
    </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success" style="margin-top: 70px;">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Navbar Placement</h2>
  
        <nav class="navbar container fixed-top navbar-expand 
            navbar-light bg-success">
            <a class="navbar-brand" href="#">
                GeeksforGeeks
            </a>
              
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" 
                        aria-current="page" href="#">HTML</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">CSS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Bootstrap</a>
                </li>
            </ul>
        </nav>
    </div>
</body>
  
</html>

输出:

Bootstrap 5导航栏的放置

例子2：在这个例子中，我们将学习在固定的底部放置导航条，并将导航条放置在底部。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        Bootstrap 5 Navbar Placement
    </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Navbar Placement</h2>
  
        <nav class="navbar container fixed-bottom navbar-expand 
            navbar-light bg-success">
            <a class="navbar-brand" href="#">
                GeeksforGeeks
            </a>
              
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" 
                        aria-current="page" href="#">HTML</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">CSS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Bootstrap</a>
                </li>
            </ul>
        </nav>
    </div>
</body>
  
</html>

输出:

Bootstrap 5导航栏的放置