Can I change Bootstrap button color?

2020-02-28 10:08发布

站内问答 / HTML/CSS
420 7 5

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?

7条回答
Animai°情兽
2楼-- · 2020-02-28 10:55

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" ...
查看更多
0人赞 添加讨论(0) 举报
你好瞎i
3楼-- · 2020-02-28 10:57

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

查看更多
0人赞 添加讨论(0) 举报
甜甜的少女心
4楼-- · 2020-02-28 10:58

Other ways might include :

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.

查看更多
0人赞 添加讨论(0) 举报
做个烂人
5楼-- · 2020-02-28 11:01

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>

查看更多
0人赞 添加讨论(0) 举报
We Are One
6楼-- · 2020-02-28 11:02

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!

查看更多
0人赞 添加讨论(0) 举报
混吃等死
7楼-- · 2020-02-28 11:04

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" />
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)