0

我正在使用 Angular 让用户更改引导导航栏的颜色。实际的背景颜色更改本身很简单，但我还想更改一些相关的元素，如边框颜色和一些阴影。

我有的：

<nav class="navbar navbar-default" ng-style="{ 'background-color': user.topBarBackgroundColor }">

我将如何为导航栏的边框、突出显示的 s 等user.topBarBackgroundColor定义一些阴影（例如较暗的阴影） ？li

请注意，文本颜色可以独立更改，因此任何方法也应该并行应用。

编辑

我只需要它在现代浏览器中工作，所以任何采用的 CSS3、HTML5 等都是公平的游戏

4

1 回答 1

0

我通过创建一个.navbar-rgba-colors类并将其添加到.navbar元素中解决了这个问题。下面的 CSS (LESS) 覆盖了相关的引导程序默认值：

 .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，它似乎运行良好。

于 2014-12-16T05:30:39.613 回答