Bootstrap 是一个流行的前端框架，它提供了许多有用的组件来帮助开发者快速构建响应式网站。其中，mark 标签是一个用于高亮显示文本的语义标签，它可以帮助用户快速找到页面中的关键信息。本文将详细介绍如何使用Bootstrap的mark标签，并分享一些调整颜色搭配的技巧。
一、Bootstrap Mark标签的基本使用
在Bootstrap中，mark标签可以通过简单的HTML代码实现：
<p>这是一段包含<mark>高亮文本</mark>的句子。</p>
这段代码会在浏览器中显示为：这是一段包含高亮文本的句子。默认情况下，mark标签的背景颜色是黄色。
二、自定义Mark标签的颜色
虽然Bootstrap默认提供了mark标签的样式，但您可以根据自己的需求进行自定义。以下是一些调整颜色搭配的技巧：
1. 使用CSS样式
您可以通过CSS样式来修改mark标签的背景颜色。以下是一个示例：
.mark-custom {
background-color: #4CAF50; /* 绿色背景 */
}
然后，将这个样式应用到mark标签上：
<p>这是一段包含<mark class="mark-custom">高亮文本</mark>的句子。</p>
2. 使用Bootstrap变量
Bootstrap提供了许多变量，您可以使用这些变量来定义颜色。以下是一个示例：
.mark-custom {
background-color: $success; /* 使用Bootstrap变量定义颜色 */
}
在Bootstrap的变量中，$success代表绿色。
3. 使用预定义的Bootstrap颜色类
Bootstrap提供了一系列预定义的颜色类，您可以直接使用这些类来设置mark标签的颜色。以下是一个示例：
<p>这是一段包含<mark class="bg-success">高亮文本</mark>的句子。</p>
在这个例子中，bg-success是一个Bootstrap颜色类，它将mark标签的背景颜色设置为绿色。
三、总结
通过以上介绍，您应该已经掌握了如何使用Bootstrap的mark标签，并学会了如何调整颜色搭配。在实际开发中，合理运用这些技巧可以让您的页面更加美观，同时提高用户体验。