可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I use Bootstrap CSS Buttons Reference.

I create a button: class="btn btn-primary".

I want that it background will be black, and the text color will be white. How can I do it?

回答1:

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)

.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" />

回答2:

This question has already been answered here: Styling twitter bootstrap buttons

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.

回答3:

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" ...

回答4:

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)

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.

回答5:

Use (class="btn btn-primary navbar-inverse") in your button class.No need to write any CSS.

回答6:

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.

<!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>

回答7:

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!