Bootstrap 5导航条品牌文本

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

Navbar品牌文本用于添加文本以代替品牌标志。我们可以使用navbar-brand类编写文本或链接。

导航栏品牌文本使用类：

navbar-brand。该类用于突出品牌名称。

语法:

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

例子1：在这个例子中，我们将学习如何使用带有链接的navbar-brand类。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        Bootstrap 5 Navbar Brand Text
    </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">
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
          
        <h2>Bootstrap 5 Navbar Brand Text</h2>
          
        <nav class="navbar navbar-light bg-success">
            <a class="navbar-brand p-2" href="#">
                GeeksforGeeks
            </a>
        </nav>
    </div>
</body>
  
</html>

输出:

Bootstrap 5导航条品牌文本

例子2：在这个例子中，我们将学习如何使用带有标题的navbar-brand类。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        Bootstrap 5 Navbar Brand Text
    </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">
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
          
        <h2>Bootstrap 5 Navbar Brand Text</h2>
          
        <nav class="navbar navbar-light bg-success">
            <span class="navbar-brand p-2">
                GeeksforGeeks
            </span>
        </nav>
    </div>
</body>
  
</html>

输出:

Bootstrap 5导航条品牌文本