html - 在 Bootstrap 中更改悬停效果和字段选择的样式

Question

我正在使用 twitter bootstrap 和我自己的 CSS 来实现一些东西。

我想要做的是，所有输入字段，如用户名、密码和搜索，在选择它们时，边框变为蓝色，我想将其更改为黑色。

另一件事是，我正在使用反向导航栏。它有下拉菜单。当我单击下拉菜单并将鼠标悬停在元素列表上时，默认情况下它是蓝色的。我也在尝试将悬停的东西更改为黑色。我如何实现这一目标？

现在这些是我尝试过的东西。我尝试使用 Firebug 元素进行检查，它总是在 bootstrap.min 文件中显示一些内容。但是，我找不到与悬停相关的任何内容，而且在过渡方面我有点虚弱，尽管我不确定它是否与过渡有关。我做的另一件事是，我将 variables.less 文件中的值 #08c 编辑为 #000 并编译它并获得了一个 Bootstrap 文件，其中包含更改的值但仍然只显示默认颜色。

请帮助我实现这些效果。

谢谢!

Answer 1

首先，除非绝对必要，否则我建议不要编辑 Bootstrap 样式表。更好的做法是在您自己的样式表中覆盖特定的 Bootstrap 类(确保您的样式表是网页加载的最后一个)。由于您使用的是 LESS，因此您还可以将 Bootstrap 样式表导入到您自己的样式表中，并使用类似 @import "path/to/bootstrap.min.css"

的方式加载单个样式表

要更改下拉菜单中元素的颜色，您可以使用“element:hover”作为您的 css 选择器。在 Bootstrap 中，我相信它看起来像这样:

.dropdown-menu > li > a:hover {
   /* styles */
}

更改表单“发光”的颜色有点复杂，因为它实际上不是边框。我建议您在此处查看有关此效果的简短文章:http://www.scriptcult.com/subcategory_97/article_635-glow-on-focus-input-form-fields.html

这个 jsfiddle 演示了覆盖默认下拉样式和上面文章中讨论的输入发光:http://jsfiddle.net/2UPan/3/

希望对您有所帮助!