我正在使用 Angular 让用户更改 Bootstrap 导航栏的颜色。实际的背景颜色更改本身很简单,但我还想更改一些相关元素,如边框颜色和一些阴影。
我有什么:
<nav class="navbar navbar-default" ng-style="{ 'background-color': user.topBarBackgroundColor }">
我将如何使用 user.topBarBackgroundColor
为导航栏的边框、突出显示的 li
等定义一些阴影(例如较暗的阴影)?
请注意,文本颜色可以单独更改,因此任何方法都应该同时适用于它。
编辑
我只需要它在现代浏览器中工作,所以任何采用的 CSS3、HTML5 等都是公平的游戏
最佳答案
我通过创建一个 .navbar-rgba-colors
类并将其添加到 .navbar
元素来解决这个问题。下面的 CSS (LESS) 覆盖了相关的 Bootstrap 默认值:
.navbar-rgba-colors {
border-color: rgba(0,0,0,0.2);
.navbar-nav > li > a,
a.navbar-brand {
opacity: 0.7;
}
.navbar-nav > li:hover > a,
.navbar-nav > li > a:focus,
.navbar-nav > li.active > a,
.navbar-nav > li.active > a:hover,
.navbar-nav > li.active > a:focus,
.navbar-nav > li.open > a,
.navbar-nav > li.open > a:hover,
.navbar-nav > li.open > a:focus
a.navbar-brand:hover,
.navbar-header:hover > a,
a.navbar-brand:focus {
opacity: 1;
background: rgba(255, 255, 255, 0.1) !important;
}
}
opacity
的变化使得文本在悬停时显得更亮,而 background
使得聚焦/事件的 a
元素也显得更亮。
然后我像这样在 HTML 中实现:
<nav class="navbar navbar-default navbar-rgba-colors" ng-style="{ 'background-color': user.topBarBackgroundColor }">
对于导航栏中的任何 a
元素:
<a ... ng-style="{ color: user.topBarColor }">Home</a>
现在更改 topBarBackgroundColor
和 topBarColor
的十六进制值会分别更改导航栏的背景颜色和文本颜色。我正在使用 angular-bootstrap-colorpicker为此,它似乎运行良好。
关于css - 使用 Angular 来设置相关 CSS 的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27492084/