如何更改引導程序導航欄的顏色？

我想更改導航欄的背景顏色，懸停時的字體顏色和顏色。我如何做到這一點？我的自定義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不起作用。

來源

2017-09-04 Pioneer2017

一種方法是下載引導文件，如果您使用的是cdn鏈接並將其安裝到應用程序目錄中，那麼您將放置資產。然後，您可以在引導程序文件中找到您要查找的內容並在其中進行修改（您可以使用文本編輯器，如sublime來查找文件和行）。免責聲明不會爲其他項目重複使用相同的更改文件。

來源

2017-09-04 14:20:47

應該包含CSS文件夾和JS文件夾中的所有文件嗎？將它們包含在我的主頁中的正確方法是什麼？ – Pioneer2017

是的，你只需要像style.css一樣寫出來，只要確保你把它放在正確的文件目錄下即可。 –

我把它放在我的項目中，包括像我的CDN中的文件，但它完全中斷了整個設計 – Pioneer2017

雖然平時不建議你可以嘗試使用：

background-color: #00578d !important;

的重要規則是一種方法，使你的CSS層疊，但也有你覺得是最重要的永遠是適用的規則。無論該規則出現在CSS文檔中的哪個位置，將始終應用具有！重要屬性的規則

來源

2017-09-04 14:21:51 Dave

是的，我也試過！重要的規則我自己。它只適用於如果我做背景：color：＃00578d！important;但它不能改變我的鏈接顏色或懸停顏色。我怎樣才能改變它們？ – Pioneer2017

你總是可以給html以及一個類。然後在CSS中，您可以執行＃id-for-nav：hover {＃00578d} – Dave

我做了。它保持不變，它不響應我的更改。 – Pioneer2017

如何更改引導程序導航欄的顏色？

回答

相關問題