如何更改引导程序导航栏的颜色？

问题描述：

我想更改导航栏的背景颜色，悬停时的字体颜色和颜色。我如何做到这一点？我的自定义CSS不起作用。如何更改引导程序导航栏的颜色？

这里是我的代码：

<head> 
    <meta charset="UTF-8"> 
    <title>@if (!empty($title)) 
     {{ $title }} 
     @else 
     MyHero 
     @endif</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
    <link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css"/> 
    <link href="{{ asset('carousel.css') }}" rel="stylesheet"/>  
    <script>var BASE_URL = "{{ url('')}}/";</script> 


</head> 

<header> 
    <!-- NAVBAR 
================================================== --> 
    <body> 
     <div class="navbar-wrapper" > 
      <div class="container-fluid" > 

       <nav class="navbar navbar-inverse navbar-static-top" style="margin: 0;padding: 0;border:none;background-color: #00578d; "> 
        <div class="container-fluid" > 
         <div class="navbar-header"> 
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
           <span class="sr-only">Toggle navigation</span> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
          </button> 
          <a class="navbar-brand" href="{{ url('/')}}" style='font-weight:bold;font-size:20px; height: 50px; margin-top: 10px; '>MyHero</a> 

         </div> 
         <div id="navbar" class="navbar-collapse collapse" style='font-weight:bold;font-size:20px;height: 50px; margin-top: 10px;' > 



          <ul class="nav navbar-nav"> 

           @if(!empty($menu)) 
           @foreach($menu as $item) 
           <li><a href="{{ url($item['url'])}}">{{ $item['link'] }}</a></li> 
           @endforeach 
           @endif 

           <li><a class="shopp" href="{{ url('shop')}} " >Shop</a></li> 

           <li> 
            <a href="{{ url('shop/checkout')}}"> 
             <img width="25" src="{{ asset('images/shopping-cart.png')}}" > 
             <div id="total-cart"> 
              @if(! Cart::isEmpty()) 
              {{Cart::getTotalQuantity()}} 
              @endif 


             </div> 

            </a> 
           </li> 
          </ul> 


          <ul class="nav navbar-nav navbar-right"> 
           @if(Session::has('user_id')) 
           <li><a href="{{ url('/')}}">{{ Session::get('user_name') }}</a></li> 
           @if(Session::has('is_admin')) 
           <li><a href="{{ url('cms/dashboard')}}">CMS DASHBOARD</a></li> 
           @endif 
           <li><a href="{{ url('user/logout')}}">Logout</a></li> 
           @else 
           <li><a href="{{ url('user/signin')}}">Sign In</a></li> 
           <li><a href="{{ url('user/signup')}}">Sign Up</a></li> 

           @endif 
          </ul> 
          <ul class="nav navbar-nav navbar-right"> 
         <li> 

          <form class="navbar-form" role="search" autocomplete="off"> 
         <div class="form-group" style="width: 240px;"> 
         <input type="search" id="searchbox" name="search" placeholder="Search products or categories..." class="form-control" style="min-width: 240px;"></input> 
         </div> 
         <div style="position: absolute;margin: 0 auto;padding: 5px; "> 
          <div class="search-info"></div> 
         </div> 
        </form> 


        </li> 
          </ul> 
         </div> 
       </nav> 
       @include ('inc.sm') 
       @include ('inc.errors') 
       @yield('carousel') <br><br> 
      </div> 
     </div> 




</header> <br><br><br><br>

我想改变我的导航栏的背景颜色，字体颜色和悬停颜色。我如何做到这一点？我的自定义CSS不起作用。我想更改导航栏的背景颜色，悬停时的字体颜色和颜色。我如何做到这一点？我的自定义CSS不起作用。

答

一种方法是下载引导文件，如果您使用的是cdn链接并将其安装到应用程序目录中，那么您将放置资产。然后，您可以在引导程序文件中找到您要查找的内容并在其中进行修改（您可以使用文本编辑器，如sublime来查找文件和行）。免责声明不会为其他项目重复使用相同的更改文件。

应该包含CSS文件夹和JS文件夹中的所有文件吗？将它们包含在我的主页中的正确方法是什么？ – Pioneer2017

是的，你只需要像style.css一样写出来，只要确保你把它放在正确的文件目录下即可。 –

我把它放在我的项目中，包括像我的CDN中的文件，但它完全中断了整个设计 – Pioneer2017

答

虽然平时不建议你可以尝试使用：

background-color: #00578d !important;

的重要规则是一种方法，使你的CSS层叠，但也有你觉得是最重要的永远是适用的规则。无论该规则出现在CSS文档中的哪个位置，将始终应用具有！重要属性的规则

是的，我也试过！重要的规则我自己。它只适用于如果我做背景：color：＃00578d！important;但它不能改变我的链接颜色或悬停颜色。我怎样才能改变它们？ – Pioneer2017

你总是可以给html以及一个类。然后在CSS中，您可以执行＃id-for-nav：hover {＃00578d} – Dave

我做了。它保持不变，它不响应我的更改。 – Pioneer2017

如何更改引导程序导航栏的颜色？

相关推荐