Twitter Bootstrap 图标栏颜色样式答案

【问题标题】：Twitter Bootstrap Icon Bar Color StyleTwitter Bootstrap 图标栏颜色样式
【发布时间】：2013-04-07 00:38:43
【问题描述】：

我有一个浅色的 Twitter Bootstrap 菜单，但希望在手机和平板电脑中切换下拉菜单的按钮是深色的。我添加了以下样式。它适用于 Firefox，但样式更改未显示在 Android 中。知道我需要做些什么来使其在大多数浏览器中正确显示吗？

<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse" style="color: #000000; background-color: #121212; 
background-image: linear-gradient(to bottom, #0d0d0d, #1a1a1a);">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

【问题讨论】：

感谢您的回复。 Bootstrap 结合了导航栏样式和图标栏样式。我不能使用 LESS 来修改一个而不修改另一个。我希望他们与众不同，因为我有用户抱怨他们看不到菜单。它就在那里，只是在某些设备中很难看到，因为它融入其中。感谢您提供有关供应商 CSS3 前缀的提示。我会做更多的研究。关于在哪里学习 CSS3 前缀有什么建议吗？
如果你真的想学习它们，我认为谷歌可能会帮助你。但是有几种工具可以为您做到这一点。谷歌诸如“CSS前缀”之类的东西，你会发现它们......

标签： css firefox twitter-bootstrap android-browser

【解决方案1】：

不同浏览器对 CSS3 背景渐变的使用是不同的。要确保所有浏览器都支持您的代码，您需要添加供应商前缀。此外，即使使用供应商前缀，不同浏览器的背景渐变代码也是不同的。

我会推荐ColorZilla，这是跨浏览器背景渐变的好工具。有很多例子，你可以编辑颜色、渐变方向，甚至添加多个渐变。试试看。

【讨论】：

我的CSS知识很基础，谢谢你的解释和链接！

【解决方案2】：

自定义 Twitter Bootstrap 元素颜色的最简单方法是使用 LESS。您可以在官方页面自定义它们，在 variables.less 文件中下载并进行自定义，或者尝试使用在线工具如Bootswatcher。

这确保您不必使用所有供应商 CSS3 前缀。

【讨论】：

感谢您的回答和有用的提示。虽然它并没有解决我的问题。请参阅我上面的附加评论。谢谢！