问题：

在Twitter引导程序中更改导航栏颜色

尹晟

2023-03-14

如何修改CSS以改变Twitter引导程序中导航栏的颜色？

共有3个答案

戎永福

2023-03-14

我花了一段时间，但我发现，包括以下内容，使改变导航栏颜色成为可能:

.navbar{ 
    background-image: none;
}

萧献

2023-03-14

在Bootstrap 4中更改导航栏颜色是不同的（而且稍微容易一点）。您可以创建一个自定义navbar类，然后引用它来更改navbar，而不会影响其他引导程序NAV。

<nav class="navbar navbar-custom">...</nav>

引导4.3+

在Bootstrap 4中更改导航栏所需的CSS要少得多。。。

.navbar-custom {
    background-color: #ff5500;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}

改变活动/悬停链接的背景颜色也可以使用相同的CSS，但是如果你想要bg颜色填满链接的全部高度，你必须调整填充。。。

py-0从整个导航栏中删除垂直填充。。。

..

/* change the link color and padding  */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
    padding: .75rem 1rem;
}

/* change the color and background color of active links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
    background-color: #333;
}

Bootstrap 4更改链接和背景色演示

另请参阅:Bootstrap 4更改汉堡包切换器颜色

<nav class="navbar navbar-custom">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">...
    </button>
    <a class="navbar-brand" href="#">Title</a>
  </div>
   ...
</nav>


.navbar-custom {
    background-color:#229922;
    color:#ffffff;
    border-radius:0;
}
  
.navbar-custom .navbar-nav > li > a {
    color:#fff;
}

.navbar-custom .navbar-nav > .active > a {
    color: #ffffff;
    background-color:transparent;
}
      
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav > .open >a {
    text-decoration: none;
    background-color: #33aa33;
}
     
.navbar-custom .navbar-brand {
    color:#eeeeee;
}
.navbar-custom .navbar-toggle {
    background-color:#eeeeee;
}
.navbar-custom .icon-bar {
    background-color:#33aa33;
}

Bootply上的自定义导航栏演示

如果导航栏有下拉列表，请添加以下内容以更改下拉列表的颜色:

/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu  { 
  background-color: #33aa33;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a  { 
  color: #fff;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a:hover,.navbar-custom .navbar-nav .dropdown-menu>li>a:focus  { 
  color: #33aa33;
}

带下拉菜单的演示

如果你想改变所有的主题颜色（导航栏之外），请看下面的答案

鲍高扬

2023-03-14

tl；dr-TWBSColor-生成您自己的引导导航栏

版本说明:-在线工具:Bootstrap 3.3.2+/4.0.0+-此答案:Bootstrap 3.0.x

有两个基本导航栏:

<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

下面是主要的颜色及其用法:

#f8f8f8:导航栏背景
#e7e7e7:导航栏边框
#777:默认颜色
#333:悬停颜色(#5e5e5e用于.nav-brand)
#555:活动颜色
#d5d5d5:活动背景

如果你想放一些自定义样式，下面是你需要改变的CSS:

/* navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
          color: #333;
    }
}

以下是四个自定义彩色导航栏的示例:

和SCSS代码:

$bgDefault   : #e74c3c;
$bgHighlight : #c0392b;
$colDefault  : #ecf0f1;
$colHighlight: #ffbbbc;
.navbar-default {
  background-color: $bgDefault;
  border-color: $bgHighlight;
  .navbar-brand {
    color: $colDefault;
    &:hover, &:focus {
      color: $colHighlight; }}
  .navbar-text {
    color: $colDefault; }
  .navbar-nav {
    > li {
      > a {
        color: $colDefault;
        &:hover,  &:focus {
          color: $colHighlight; }}}
    > .active {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}
    > .open {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
  .navbar-toggle {
    border-color: $bgHighlight;
    &:hover, &:focus {
      background-color: $bgHighlight; }
    .icon-bar {
      background-color: $colDefault; }}
  .navbar-collapse,
  .navbar-form {
    border-color: $colDefault; }
  .navbar-link {
    color: $colDefault;
    &:hover {
      color: $colHighlight; }}}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu {
    > li > a {
      color: $colDefault;
      &:hover, &:focus {
        color: $colHighlight; }}
    > .active {
      > a, > a:hover, > a:focus, {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
}

我刚刚制作了一个脚本，它将允许您生成您的主题:TWBSColor-生成您自己的引导导航栏

[更新]:TWBSColor现在生成scss/sass/less/css代码。
[更新]:从现在开始，您可以使用更少的语言作为TWBSColor提供的默认语言
[更新]:TWBSColor现在支持下拉菜单着色
[更新]:TWBSColor现在允许选择您的版本（添加了Bootstrap 4支持）

类似资料：

更改导航栏文本颜色引导

我现在有一段html，它代表我的导航栏的相关部分：我有一个css，我希望用它来改变导航栏的文本颜色：唯一的问题是文本颜色保持不变。我还看到一个非常相似的问题没有解决。我打赌谁能解决这个问题，谁就能解决另一个问题。
在Swift中更改导航栏颜色

问题内容：我正在使用Picker View，允许用户为整个应用程序选择颜色主题。我计划更改导航栏，背景以及选项卡栏（如果可能）的颜色。我一直在研究如何执行此操作，但找不到任何Swift示例。谁能给我一个示例代码，我将需要使用该代码来更改导航栏颜色和导航栏文本颜色？设置了Picker View，我只是在寻找更改UI颜色的代码。问题答案：导航栏：用所需的UIColor替换greenCol
引导导航栏链接颜色不会更改

我需要将导航栏链接更改为白色，并在导航栏上留出空间。我已经为此编写了代码，但我似乎不明白为什么/在哪里它一直被覆盖。导航栏的背景是一个图像，链接似乎变为白色，而图像不在其中，那么有没有办法修复这个问题并将图像保留在背景中？有人能帮我理解我做错了什么吗？
AndroidLollipop更改导航栏颜色

在我的应用程序中，我需要更改底部导航栏的颜色。我看了很多帖子，但没有找到解决办法。我正在使用appCompat库。 v21/样式。xml
引导4导航栏颜色

在Bootstrap 4中，如何更改导航栏的背景颜色？twbsColor的代码不起作用。我想让背景颜色变成不同的颜色，字体颜色变成白色。
更改iOS导航栏的颜色

问题内容：我正在尝试更改导航器栏的颜色，但是我发现只有导航器是根导航器，这才是不可能的。我正在尝试：我所有与导航器控制器有关。但是什么都没有改变。实际上，我试图从情节提要中进行相同的操作，但只有在我处于第一个导航器中时，它才有效。我试图阅读与此问题有关的所有内容，但一无所获我可以像这样将任何项目添加到导航栏问题答案：实际上，我发现该解决方案将用于：然后在每个视图控制器中，我们需要另
无法更改导航栏颜色

我尝试了很多方法来改变导航栏的颜色，比如 AndroidLollipop更改导航栏颜色 android更改导航栏颜色如何更改系统导航栏颜色什么都不管用我将该项目添加到样式中。xml-使用Android 8.1 任何人都知道在Xamarin做这件事的最佳方式是什么。Android 更新：我在样式文件中尝试了以下代码
如何更改导航栏颜色？

我想要一个半透明的状态栏和导航栏，其他颜色不能像蓝色或白色那样半透明我的代码活动状态栏半透明良好，但导航栏颜色不变。为什么？导航栏

在Twitter引导程序中更改导航栏颜色

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档