css - 如何修改 twitter bootstrap ".icon-bar"颜色

Question

当视口(viewport)很窄时，bootstrap 中会出现一个按钮.. 使用 bootstrap-responsive ...

如何更改此按钮的颜色外观？我知道 bootswatch.com 的人可以通过更少地更改一些变量来做到这一点，但他们是怎么做到的？

编辑:我在以下 SASS 代码方面取得了一些进展。 (我正在使用 sass-bootstrap gem)

.navbar .btn-navbar {
  background-color: $navbarLinkBackgroundHover;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;

          &:hover {
            background-color: lighten($navbarLinkBackgroundHover, 1%);
          }
}

上面改变了我的按钮的背景和按钮的圆度。我仍然不知道如何改变边框笔划？有什么想法吗？

.navbar .btn-navbar .icon-bar {
  background-color: $heading-blue;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

现在这段代码帮助我更改按钮内水平破折号的颜色!

编辑2:

弄清楚边框笔划.. 它在 css 中称为边框颜色和边框宽度! (应用于.navbar .btn-navbar)

  border-color: $dropdown-border $dropdown-border darken($dropdown-border, 10%) $dropdown-border;
  border-width: 2px;

Answer 1

.navbar .btn-navbar {
display: none;
float: right;
padding: 7px 10px;
margin-left: 5px;
margin-right: 5px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #ededed;
background-image: -moz-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e5e5e5));
background-image: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0);
border-color: #e5e5e5 #e5e5e5 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #e5e5e5;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */

这是带有属性的 CSS 选择器。您可以只创建一个新的 CSS 规则来覆盖这些值，而无需更改 less 变量。

如果您想知道 less 变量是如何工作的，它们会根据变量值创建渐变。例如，

box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);

从比黑色亮 75% 的颜色创建框阴影。变量 0, 0, 0 被传递给了 box-shadow 属性。