当视口较窄时,在引导程序中会显示一个按钮。
如何更改此按钮的颜色外观?我知道bootswatch.com上的人们可以通过减少一些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;
}
现在,这段代码可以帮助我更改按钮内水平虚线的颜色!
编辑2:
找出边界笔画..它在CSS中称为border-color和border-width! (适用于.navbar .btn-navbar)
border-color: $dropdown-border $dropdown-border darken($dropdown-border, 10%) $dropdown-border;
border-width: 2px;
最佳答案
.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规则即可覆盖这些值,而无需更改较少的变量。
如果您想知道较少的变量如何工作,它们会基于变量值创建渐变。例如,
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
用比黑色浅75%的颜色创建一个盒子阴影。变量0、0、0被传递到box-shadow属性。
关于css - 如何修改Twitter Bootstrap“.icon-bar”颜色,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14905781/