[英]Custom Styles for Bootstrap NavBar
我正在嘗試使用完全不同的樣式來更改引導導航欄。
這就是我需要更改其默認樣式的方式-
目前,我已經完成了這項工作的80%以上,而我唯一無法完成的就是它的hover
和active
動作。
到目前為止,這是我的CSS-
.navbar-default {
background-color: #000000;
border-color: #ffffff;
border-top: 1px solid #fff;
border-radius: 0;
border-left: none;
border-right: none;
}
.navbar-default .navbar-brand {
color: #f5f5f5;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-default .navbar-text {
color: #999999;
}
.navbar-default .navbar-nav > li > a {
color: #f5f5f5;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
background-color: red;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
color: #444444;
background-color: transparent;
}
.navbar-default .navbar-toggle {
border-color: #333333;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #333333;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #000000;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: transparent;
color: #ffffff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #f5f5f5;
border-bottom-color: #f5f5f5;
}
.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: #ffffff;
border-bottom-color: #ffffff;
}
.navbar-default .navbar-link {
color: #f5f5f5;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
.navbar-default .nav > li {
border-right: 1px solid #FFFFFF;
}
.navbar-default .nav > li:last-child {
border-right: none;
}
.navbar-default .navbar-nav > li > a {
font-size: 90%;
font-weight: bold;
padding: 12px 24px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
outline: none;
}
.navbar-nav {
background: #53001e;
border: 1px solid #FFFFFF;
border-radius: 7px;
float: right;
margin-top: -20px;
}
因此,我可以在不使用任何圖像的情況下從這里的專業人員那里獲得任何幫助來完成這項工作嗎?
任何想法都會令人贊賞。 謝謝。
您可以在:hover
( 支持它的瀏覽器 )上使用shadow
屬性:
我對您的jsBin進行了一些更改:
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
outline: none;
-webkit-box-shadow: 0px 18px 17px 0px rgba(152, 46, 255, 0.59);
-moz-box-shadow: 0px 18px 17px 0px rgba(152, 46, 255, 0.59);
box-shadow: 0px 18px 17px 0px rgba(152, 46, 255, 0.59);
}
因此,如果您對IE> = 9.0表示滿意,則可以使用此屬性
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.