CSS 我可以更改 Bootstrap 按钮的颜色吗?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/27674614/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I change Bootstrap button color?
提问by Or Smith
I use Bootstrap CSS Buttons Reference.
I create a button: class="btn btn-primary"
.
我创建了一个按钮:class="btn btn-primary"
。
I want that it background will be black, and the text color will be white. How can I do it?
我希望它的背景是黑色,文字颜色是白色。我该怎么做?
回答by Zac
You need to override your css so you can change the background to black. A simple way to do this is to create a custom css class (you can either put this in a <style type="text/css">
tag in your HTML or put this in a separate CSS file)
您需要覆盖您的 css,以便您可以将背景更改为黑色。一个简单的方法是创建一个自定义的 css 类(你可以把它<style type="text/css">
放在你的 HTML 的一个标签中,或者把它放在一个单独的 CSS 文件中)
.black-background {background-color:#000000;}
.white {color:#ffffff;}
Then, give your button these classes
然后,给你的按钮这些类
<input type="submit" class="btn btn-primary black-background white" value="Text" />
回答by Nathaniel Flick
This question has already been answered here: Styling twitter bootstrap buttons
这个问题已经在这里得到了回答:Styling twitter bootstrap button
I'd recommend following the advice above; common practice is to override the default/boostrap stylesheet with your own styles rather than edit default/bootstrap directly or adding new style classes. Foundation works the same way.
我建议遵循上述建议;通常的做法是用您自己的样式覆盖默认/增强样式表,而不是直接编辑默认/引导程序或添加新样式类。Foundation 的工作方式相同。
回答by Cyril Jacquart
easy and quick way with
简单快捷的方式
.btn-black{background-color:#000;color: #FFF;}
.btn-black:hover{color: #FFF;}
and
和
<button type="button" class="btn btn-black" ...
回答by wooer
Other ways might include :
其他方式可能包括:
- Use bootstraps own customization page :http://getbootstrap.com/customize/
- Learn how to use less or sass files.
- Take a look at free themes at: http://bootswatch.com/(I was about to forget this one)
- 使用引导程序自己的自定义页面:http: //getbootstrap.com/customize/
- 了解如何使用 less 或 sass 文件。
- 看看免费主题:http: //bootswatch.com/(我差点忘了这个)
I can suggest the first one if the second seems too complicated, because there are several button types and you can customize each buttons bg colors as well as other properties. When you want to update your files or configuration you can upload your own config to get new files or to change your configuration.
如果第二个看起来太复杂,我可以建议第一个,因为有几种按钮类型,您可以自定义每个按钮的背景颜色以及其他属性。当您想要更新您的文件或配置时,您可以上传您自己的配置以获取新文件或更改您的配置。
And this makes the solution less complicated and more maintainable.
这使得解决方案不那么复杂且更易于维护。
回答by Adel
Yes you can. Try creating a new file, name it custom.css, and add whatever you need to customize your theme. Make sure to include it after bootstrap files!
是的你可以。尝试创建一个新文件,将其命名为 custom.css,然后添加自定义主题所需的任何内容。确保在引导文件之后包含它!
回答by Rheo
I created a custom class and overrode it with a custom class called btn-dark I then specified the name in my style.css, which means it overrode my bootstrap.
我创建了一个自定义类并使用名为 btn-dark 的自定义类覆盖它,然后在我的 style.css 中指定了名称,这意味着它覆盖了我的引导程序。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.btn-dark{
background-color:black;
color:white;
}
</style>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-dark">Basic Button</button>
</div>
</body>
</html>
回答by Rheo
Use (class="btn btn-primary navbar-inverse") in your button class.No need to write any CSS.
在按钮类中使用 (class="btn btn-primary navbar-inverse")。无需编写任何 CSS。