[英]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.