如何改变bootstrap的颜色?

时间:2017-03-04 13:51:49

标签: css colors background-color

我刚刚开始学习php,我不知道如何改变颜色。 做研究我发现了这个

.well.homefull{

background: rgba(0, 0, 0, 0.4);

}

但我不知道该把它放在哪里以及如何使用它

<div class="well">

如果我只是把它放在div类之前=好吧它不起作用

1 个答案:

答案 0 :(得分:1)

您需要覆盖boostrap well类的css规则。

为此,您需要创建自定义css文件和call this external style sheet from the html page

例如:

.well {
    background-color: rgba(0,0,0,0.4) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
    Some content
</div>

希望它有所帮助。

编辑

或者在一个页面中,您可以将样式规则放在<style></style>标记之间(在调用bootstrap源之后注意放置重写样式规则):

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Developping JazZ Sheet</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        .well {
            background-color: rgba(0,0,0,0.4);
        }
    </style>
</head>
<body>
    <div class="well">
        some content
    </div>
</body>
</html>