簡體   English   中英

在引導程序中更改圖標欄 (☰) 顏色

[英]Change icon-bar (☰) color in bootstrap

我想改變☰顏色。

HTML:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
  <span class="sr-only">Toggle menu navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

我嘗試了各種方法(看下面),但沒有任何效果。

CSS:

.icon-bar {
  color: black;
  border-color: black;
  background-color: black;
}

您的 CSS 不起作用的原因是特殊性 Bootstrap 選擇器的特異性比你的高,所以你的風格會被完全忽略。

Bootstrap 使用選擇器設置樣式: .navbar-default .navbar-toggle .icon-bar 此選擇器的B特異性值為 3,而您的選擇器的B特異性值為 1。

因此,要覆蓋它,只需在您的 CSS 中使用相同的選擇器(假設您的 CSS 包含Bootstrap之后):

.navbar-default .navbar-toggle .icon-bar {
    background-color: black;
}

嘗試使用!important覆蓋 CSS

像這樣

.icon-bar {
   background-color:#FF0000 !important;
}

只需一行編碼就足夠了..試試這個。 並且您可以通過添加像素來調整圖標欄的均勻厚度。

HTML

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><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="#" <span class="icon-bar"></span><img class="img-responsive brand" src="img/brand.png">
  </a></div>

CSS

    .navbar-toggle, .icon-bar {
    border:1px solid orange;
}

繁榮...

伙計,我完全知道你的感受,但不要忘記內聯樣式 它幾乎是 CSS 特異性的超級賽亞人

所以它對你來說應該是這樣的,

<span class="icon-bar" style="background-color: black !important;">
</span>
<span class="icon-bar" style="background-color: black !important;">
</span>
<span class="icon-bar" style="background-color: black !important;">
</span>

我不知道你是否還在尋找這個問題的答案,但今天我遇到了同樣的問題並解決了它。 您需要在 HTML 代碼中指定,

**<Div class = "navbar"**>
         div class = "container">
               <Div class = "navbar-header">

**<Div class = "navbar navbar-default">**
        div class = "container">
               <Div class = "navbar-header">

你在你的 CSS 中有那個位置

.navbar-default-toggle .navbar .icon-bar {
  background-color: # 0000ff;
}

我所做的是在上面添加

.navbar .navbar-toggle .icon-bar {
  background-color: # ff0000;
}

因為我的 html 代碼是

**<Div class = "navbar">**
         div class = "container">
               <Div class = "navbar-header">

如果你關聯一個文件 less / css

搜索此部分,並在此處放置您要更改的顏色,否則它會將 css 文件自我更正為之前的狀態

// Toggle Navbar
@ Navbar-default-toggle-hover-bg: #ddd;
**@ Navbar-default-toggle-icon-bar-bg: # 888;**
@ Navbar-default-toggle-border-color: #ddd;

如果您的 html 代碼和我的一樣並且不是導航欄默認的,請像使用 css 一樣添加它。

// Toggle Navbar
@ Navbar-default-toggle-hover-bg: #ddd;
**@ Navbar-toggle-icon-bar-bg : #888;**
@ Navbar-default-toggle-icon-bar-bg: # 888;
@ Navbar-default-toggle-border-color: #ddd;

祝你好運

我正在使用 Bootstrap 和 HTML5。 我想覆蓋切換按鈕的外觀。

.navbar-toggle{
    background-color: #5DADB0;
    color: #F3DBAA;
    border:none;        
}

.navbar-toggle.but-menu:link {
    color: #F00;
    background-color: #CF995F;
}

.navbar-toggle.but-menu:visited {
    color: #FFF;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:hover {
    color: #FFF0C9;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:active {
    color: #FFF;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:focus {
    color: #FFF;
    background-color: #CF995F;
}

在 bootstrap 4.3.1 中,我可以通過 css 代碼將切換器圖標的背景顏色更改為白色。

.navbar-toggler{
  background-color:white;
  }

在我看來,如此改變的圖標在亮色和暗色背景下看起來都很好。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM