Question

Bootstrap很新，刚刚开始玩它。但是有一件事（那应该是非常明显的）我无法开始工作。这就是改变了jumbotron中h1标签的颜色。

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Hello WWW</title>
    <link rel="stylesheet" href="main.css">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
</head>

<body>
    <div class="jumbotron">
        <h1>Progression of Connected Computing</h1>
        <p>Learn more about the internet</p>
    </div>
</body>
</html>

main.css代码：

.jumbotron h1{
    color: #fff;
}

.jumbotron p{
    color: #fff;
}

问题是，p标签是否正确更改并变为白色，但由于某种原因，h1标签不适用？可能是我正在做的傻事，但我似乎无法弄清楚它是什么。谢谢！

Answer 1

如果您要使用自定义main.css样式覆盖bootstrap.css样式，则必须在添加bootstrap个文件后附加自定义main.css文件。

Answer 2

我找到了一种简单的方法：只需将h1博客包含在内，例如span blog;然后为span blog应用bootstrap。例如：

<span class="text-success"><h1>Hello World</h1></span>

Answer 3

您的自定义CSS文件应放在bootstrap.min.css之后，以便您可以覆盖它。

喜欢这个 -

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">

Answer 4

如果您要专门应用白色（如您的示例所示），则可以使用Bootstrap的颜色实用程序类.text-white：

<h1 class="text-white">My Text</h1>

有关其他颜色类别的更多信息，请参见：https://getbootstrap.com/docs/4.0/utilities/colors/#color

改变Bootstrap Jumbotron的h1颜色

4 个答案: