Html 更改引导导航栏颜色_Html_Css_Twitter Bootstrap

Html 更改引导导航栏颜色

html css twitter-bootstrap

Html 更改引导导航栏颜色,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我试图在引导中更改导航栏的颜色，但没有成功。导航栏保持不变，就好像我从未添加CSS或自定义样式一样我将自定义CSS添加到我的自定义CSS文件中，style.CSS。下面是style.css文件的全部内容您还可以在下面查看我的HTML，这是关于导航栏和样式的index.htm的内容注意：我使用的是位于的最新版本的引导；不是以前的版本（例如：Twitter引导） style.css /* Custom Styling */ /* Core Styling */ body { fon

我试图在引导中更改导航栏的颜色，但没有成功。导航栏保持不变，就好像我从未添加CSS或自定义样式一样

我将自定义CSS添加到我的自定义CSS文件中，

style.CSS

。下面是

style.css

文件的全部内容

您还可以在下面查看我的HTML，这是关于导航栏和样式的

index.htm

的内容

注意：我使用的是位于的最新版本的引导；不是以前的版本（例如：Twitter引导）

style.css

/* Custom Styling */

/* Core Styling */

body {
    font-famliy: Helvetica, sans-serif;
    font-size 14px;
    line-height: 1.42857143;
    color: #333;
}


/* Navbar Styling */

/* navbar */

.navbar-default {
  background-color: #14a3ff;
  border-color: #1495fe;
}
.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #ecf0f1;
}
.navbar-default .navbar-text {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #ecf0f1;
  background-color: #1495fe;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  color: #ecf0f1;
  background-color: #1495fe;
}
.navbar-default .navbar-toggle {
  border-color: #1495fe;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #1495fe;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ecf0f1;
}
.navbar-default .navbar-link {
  color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
  color: #ecf0f1;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecf0f1;
    background-color: #1495fe;
  }
}

index.htm

index.htm>样式（头部）

index.htm>navbar&js（头外）


切换导航















提交

正是您所需要的。使用生成的CSS时有点棘手

如果您发现在插入生成的样式表后，导航栏根本不会改变

请包括以下内容，以使更改导航栏颜色成为可能：

.navbar{ 
    background-image: none;
}

希望这有帮助D

就是你所需要的。使用生成的CSS时有点棘手

如果您发现在插入生成的样式表后，导航栏根本不会改变

请包括以下内容，以使更改导航栏颜色成为可能：

.navbar{ 
    background-image: none;
}

希望这有帮助我找到了正在发生的问题的解决方案。事实上，这是一个相当简单的问题

问题是，在添加自定义CSS之后，我在HTML中添加了引导CSS

所以应该是：

<head>

    <!-- Custom Styling -->
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css" />

</head>

谢谢你的帮助。

我找到了解决问题的方法。事实上，这是一个相当简单的问题

问题是，在添加自定义CSS之后，我在HTML中添加了引导CSS

所以应该是：

<head>

    <!-- Custom Styling -->
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css" />

</head>

感谢所有帮助。

自Bootstrap 4起，您可以使用“bg”类轻松更改导航栏背景的颜色。以下是几个例子：

<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
<a class="navbar-brand" href="#">
<div class="collapse navbar-collapse">
<img src="#" alt="Logo" style="width:300px;">
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</nav>

从Bootstrap 4开始，您可以使用“bg”类轻松更改导航栏背景的颜色。以下是几个例子：

<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
<a class="navbar-brand" href="#">
<div class="collapse navbar-collapse">
<img src="#" alt="Logo" style="width:300px;">
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</nav>

我正要发布那个。。。css是级联样式表：从上到下都适用！是的，真不敢相信我错过了。我正要发布那个。。。css是级联样式表：从上到下都适用！是的，真不敢相信我错过了。