如何在 bootsrap 5 的導航欄中添加文本顏色?

拉文·費爾南多

我一直在學習前端 Web 開發的基本引導程序。但我不知道如何將導航欄文本項的顏色更改為藍色。我嘗試了一些在線解決方案來解決同樣的問題,但沒有成功。這是我一直在研究的代碼:

<nav class="navbar navbar-expand-lg navbar-light bg-white shadow fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="" alt="Site logo"> <!--edit--></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Statistics</a>
        </li>
      </ul>
      <?php if ($logged_user) { ?>
                <ul class="nav navbar-nav ">
                <li class="nav-item"><a class="nav-link" href="register.php" title=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" d="M12 2.5a5.5 5.5 0 00-3.096 10.047 9.005 9.005 0 00-5.9 8.18.75.75 0 001.5.045 7.5 7.5 0 0114.993 0 .75.75 0 101.499-.044 9.005 9.005 0 00-5.9-8.181A5.5 5.5 0 0012 2.5zM8 8a4 4 0 118 0 4 4 0 01-8 0z"></path></svg>User</a></li>
                <li class="nav-item"><a class="nav-link" href="login.php" title=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" d="M3 3.25c0-.966.784-1.75 1.75-1.75h5.5a.75.75 0 010 1.5h-5.5a.25.25 0 00-.25.25v17.5c0 .138.112.25.25.25h5.5a.75.75 0 010 1.5h-5.5A1.75 1.75 0 013 20.75V3.25zm16.006 9.5l-3.3 3.484a.75.75 0 001.088 1.032l4.5-4.75a.75.75 0 000-1.032l-4.5-4.75a.75.75 0 00-1.088 1.032l3.3 3.484H10.75a.75.75 0 000 1.5h8.256z"></path></svg>Logout</a></li>
            </ul>
            <?php } else { ?>
                <span class="navbar-text">Already have an account?</span>
            <ul class="navbar-nav ">
                <li class="nav-item">
                <a class="nav-link" role="button" aria-expanded="false" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" d="M3 3.25c0-.966.784-1.75 1.75-1.75h5.5a.75.75 0 010 1.5h-5.5a.25.25 0 00-.25.25v17.5c0 .138.112.25.25.25h5.5a.75.75 0 010 1.5h-5.5A1.75 1.75 0 013 20.75V3.25zm9.994 9.5l3.3 3.484a.75.75 0 01-1.088 1.032l-4.5-4.75a.75.75 0 010-1.032l4.5-4.75a.75.75 0 011.088 1.032l-3.3 3.484h8.256a.75.75 0 010 1.5h-8.256z"></path></svg>Login</a>
                </li>
            </ul>
            <?php } ?>
    </div>
  </div>
</nav>

我在這裡使用了引導程序 5。我想為文本添加顏色 #0d6efd。提前致謝。

拉里

使用以下命令更改活動鏈接的顏色:

.navbar.navbar-light .navbar-nav .nav-link.active, 
.navbar.navbar-light .navbar-nav .show>.nav-link {
    color: #0d6efd;
}

對所有其他鏈接使用以下內容:

.navbar.navbar-light .navbar-nav .nav-link {
    color: #0d6efd;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Bootstrap 5 如何在導航欄中對齊文本?

如何在swift4中清除導航欄顏色?

導航欄背景顏色在 swift5 中不起作用

如何在bootsrap行的左侧添加空格?

如何在ios15上動態更改導航欄顏色?

添加bootsrap流明主题时,如何解决MVC 5中的首页问题?

如何在指定的 reactJS 文件中添加 bootsrap 链接?

如何使用 bootsrap 5 拥有独立的多个单选按钮

如何將搜索表單放在導航欄中間並在 Bootstrap 5 中展開它

使用 bootsrap 时如何更改 css 中的输入文本颜色

如何使導航欄和列表與引導程序 5 在同一行

如何從導航欄中刪除帶有動畫的文本

如何在Bootsrap模态中仅隐藏滚动条缩略图?

我如何在bootsrap 4中更改顶部固定导航栏的颜色?

如何在bootsrap中单行使用3个选择框

如何在 tkinter 中更改 matplotlib 工具欄的顏色?

如何在jetpack compose中隱藏導航欄和狀態欄?

如何获得bootsrap模态的宽度

如何在導航欄中向右移動列表?在 reactjs 和 css 中

如何在flutter中製作透明的底部導航欄

如何在p5js中獲取單個像素的顏色

如何使用 Bootstrap 5 創建跨多個 HTML 頁面的可重用導航欄?

Bootsrap Carousel 中的弹出图像

如何在導航欄 css 中分隔元素

如何在頁面重新加載超過 10 像素時激活顏色更改導航

Bootstrap 5 導航欄不會打開“href”中設置的鏈接

如何在鼠標懸停時添加自動導航欄擴展?在這個網站上

使Bootsrap导航栏中的文本响应

如何将 twitter-bootsrap 和 jquery 添加到 Spring MVC 项目