CSS 修改Twitter Bootstrap模态框的头部背景颜色

在本文中，我们将介绍如何使用CSS修改Twitter Bootstrap模态框的头部背景颜色。

阅读更多：CSS 教程

什么是Twitter Bootstrap模态框？

Twitter Bootstrap是一个流行的前端框架，提供了很多预定义的CSS样式和JavaScript组件。其中一个常用的组件是模态框（Modal），用于显示弹出窗口。模态框通常包含一个头部（header）、主体（body）和一个底部（footer），并通过一些设置和事件来控制显示和隐藏。

修改模态框头部背景颜色的方法

要修改模态框的头部背景颜色，我们可以通过自定义CSS样式来实现。

步骤1：添加自定义样式

首先，我们需要在HTML文档中添加一个自定义的CSS样式表。可以将其添加到页面的头部，或者将其保存为一个独立的CSS文件并用标签引入。

<style>
.my-modal-header {
  background-color: #ff0000;
}
</style>

在上面的代码中，我们定义了一个名为”my-modal-header”的CSS类，将其背景颜色设置为红色（#ff0000）。你可以根据需求选择不同的颜色值。

步骤2：应用自定义样式

一旦我们定义了自定义样式，我们就可以将其应用到模态框的头部。

在HTML文档中，我们可以找到模态框的头部，并为其添加我们定义的CSS类。

<div class="modal-header my-modal-header">
  <h5 class="modal-title">Modal Title</h5>
  <button type="button" class="close" data-dismiss="modal">
    <span>×</span>
  </button>
</div>

在上述代码中，我们在.modal-header元素的class属性中添加了”my-modal-header”类，这将应用我们定义的自定义样式。

示例

以下是一个完整的示例，演示如何使用CSS修改Twitter Bootstrap模态框的头部背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
  <style>
    .my-modal-header {
      background-color: #ff0000;
    }
  </style>
  <title>Bootstrap Modal Header Color</title>
</head>
<body>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open Modal
  </button>

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header my-modal-header">
          <h5 class="modal-title" id="myModalLabel">Modal Title</h5>
          <button type="button" class="close" data-dismiss="modal">
            <span>×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal Body</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save Changes</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>

在上面的代码中，我们引入了Twitter Bootstrap的样式和脚本文件，然后定义了自定义的CSS样式，最后在模态框的头部中应用了该样式。你可以在本地环境下运行该示例，查看效果。