如何修改 twitter 引导程序“.icon-bar”颜色答案

【问题标题】：How to modify twitter bootstrap ".icon-bar" colors如何修改 twitter 引导程序“.icon-bar”颜色
【发布时间】：2013-02-01 01:58:11
【问题描述】：

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

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

编辑：我在以下 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;
}

现在这段代码可以帮助我改变按钮内水平破折号的颜色！

EDIT2：

弄清楚了边框笔划..它在css中称为边框颜色和边框宽度！（适用于.navbar .btn-navbar）

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

【问题讨论】：

请提供一些上述按钮的例子。我对 Bootstrap 很熟悉，但不记得按钮了。 twitter.github.com/bootstrap/scaffolding.html#responsive
这是当浏览器变小时出现在导航栏右侧的按钮。它是一个带有三条水平线的小按钮，可用作各种菜单。

标签： css twitter-bootstrap sass less

【解决方案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 属性。

【讨论】：

我刚刚编写的以下 sass 代码引用了您提到的完全相同的 css 选择器！谢谢你..
.navbar .btn-navbar { 背景色：$navbarLinkBackgroundHover; -webkit-border-radius：4px； -moz-边界半径：4px；边框半径：4px； &:hover { 背景颜色: 变亮($navbarLinkBackgroundHover, 1%); } }

【解决方案2】：

为什么不简单地用style = "background-color:#hex;" 覆盖它们。如果你有用的话

【讨论】：