<分区>
<分区>
我想更改我的导航栏背景颜色、字体颜色和悬停时的颜色。我该怎么做？我的自定义 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 链接，一种方法是下载 Bootstrap 文件并将其安装在您的应用程序目录中您放置 Assets 的任何位置。然后你可以在 Bootstrap 文件中找到你要找的东西并在那里改变它(你可以使用像 sublime 这样的文本编辑器来找到文件和行)。免责声明不要为其他元素重复使用相同的更改文件。
关于html - 如何更改 Bootstrap 导航栏颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46038961/