bootstrap 按钮颜色属性有几种
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap 按钮颜色属性有几种相关的知识，希望对你有一定的参考价值。
参考技术A 您好，很高兴为您作答。改变按钮的颜色，只需要在该按钮的class属性里面添加如下几种类即可：
btn-primary 深蓝色
btn-info 浅蓝色
btn-success 绿色
btn-default 白色
btn-warning 黄色
btn-danger 红色
如果您问的是在操作过程中改变颜色，只需在javascript代码中访问到需要改变颜色的按钮，动态修改以上的几种类即可。
如何更改按钮悬停属性中的文本颜色
【中文标题】如何更改按钮悬停属性中的文本颜色【英文标题】：How to change text color in button hover property 【发布时间】：2015-02-11 07:34:59 【问题描述】：我使用本指南自定义了我使用 bootstrap 制作的网页中的按钮：
Change hover color on a button with Bootstrap customization
问题是我无法在悬停时保持相同的字体颜色，我无法解释为什么它总是变为深灰色。 这是代码：http://codepen.io/anon/pen/ByKZZK
HTML：
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<button href="mailto:abc@def.ghi" class="btn btn-custom btn-lg btn-block">info@mail.org <span class="glyphicon glyphicon-envelope"></span></button>
CSS：
.btn-custom
color: #FFD180;;
background-color: #483737;
border-color: #357ebd; /*set the color you want here*/
.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active, .open>.dropdown-toggle.btn-custom
color: #FFD180;
background-color: #837171;
border-color: #837171; /*set the color you want here*/
有什么想法吗？
【问题讨论】：
我只想指出这里的双分号color: #FFD180;;
【参考方案1】：
只需将 !important; 添加到 CSS 的 hover 部分中的 color: #FFD180 即可。
.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active, .open>.dropdown-toggle.btn-custom
color: #FFD180 !important;
background-color: #837171;
border-color: #837171; /*set the color you want here*/
编辑：颜色（#333）可能来自bootstrap.min.css中的这一行
.dropdown-toggle.btn-defaultcolor:#333;background-color:#e6e6e6;border-color:#adadad
【讨论】：
【参考方案2】：似乎.btn 引导类在您的代码笔上越来越重要，您可以尝试避免使用!important 使您的选择器更具体，例如：
.btn.btn-自定义
检查Codepen
【讨论】：
优秀的答案以上是关于bootstrap 按钮颜色属性有几种的主要内容，如果未能解决你的问题，请参考以下文章