Question

我创建了一个按钮：class="btn btn-primary"。

我希望背景为黑色，文字颜色为白色。我该怎么办？

Answer 1

您需要覆盖您的CSS，以便将背景更改为黑色。一种简单的方法是创建一个自定义css类（您可以将其放在HTML中的<style type="text/css">标记中，也可以将其放在单独的CSS文件中）

.black-background {background-color:#000000;}
.white {color:#ffffff;}

然后，给你的按钮这些类

<input type="submit" class="btn btn-primary black-background white" value="Text" />

Answer 2

此问题已在此处得到解答：Styling twitter bootstrap buttons

我建议遵循以上建议;通常的做法是使用您自己的样式覆盖默认/ boostrap样式表，而不是直接编辑default / bootstrap或添加新的样式类。基金会的工作方式相同。

Answer 3

简单快捷的方式

    .btn-black{background-color:#000;color: #FFF;}
    .btn-black:hover{color: #FFF;}

和

<button type="button" class="btn btn-black" ...

Answer 4

是的，你可以。尝试创建一个新文件，将其命名为custom.css，并添加自定义主题所需的任何内容。确保在引导文件之后包含它！

Answer 5

其他方式可能包括：

使用bootstraps自己的自定义页面：http://getbootstrap.com/customize/
了解如何使用less或sass文件。
看一下免费主题：http://bootswatch.com/（我正要忘记这一个）

如果第二个看起来太复杂，我可以建议第一个，因为有几种按钮类型，你可以自定义每个按钮bg颜色以及其他属性。如果要更新文件或配置，可以上传自己的配置以获取新文件或更改配置。

这使解决方案变得更简单，更易于维护。

Answer 6

在你的按钮类中使用（class =＆＃34; btn btn-primary navbar-inverse＆＃34;）。不需要编写任何CSS。

Answer 7

我创建了一个自定义类，并使用名为btn-dark的自定义类覆盖它然后我在style.css中指定了名称，这意味着它覆盖了我的引导程序。

＆＃13;

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

＆＃13;

Answer 8

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited {
    background-color: #ee7a79 !important;
    border-color: #ee7a79;
}

我可以更改Bootstrap按钮颜色吗？

8 个答案: