1. Sass 变量：
Bootstrap 4 的源代码是用 Sass 编写的，你可以通过修改 Sass 变量来自定义样式。在你的项目中，你可以创建一个额外的 Sass 文件（例如 _custom.scss）来覆盖默认的 Bootstrap 变量。然后，通过引入这个文件，你可以定制化 Bootstrap 样式。
// _custom.scss
$primary-color: #your_custom_color;
$font-size-base: 16px; // 修改默认字体大小
$body-bg: #f8f9fa; // 修改默认背景颜色
// 其他自定义变量...
在你的主 Sass 文件中引入 _custom.scss：
// main.scss
@import 'custom'; // 引入自定义变量文件
// 导入 Bootstrap 样式
@import '~bootstrap/scss/bootstrap';
2. CSS 变量：
Bootstrap 4 使用了 CSS 变量，你也可以通过修改这些变量来实现定制化。
:root {
--primary-color: #your_custom_color;
--font-size-base: 16px; /* 修改默认字体大小 */
--body-bg: #f8f9fa; /* 修改默认背景颜色 */
/* 其他自定义变量... */
}
然后，在你的 HTML 文件中，确保这些样式在 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="path/to/custom-styles.css"> <!-- 引入自定义样式 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Your Bootstrap 4 Customization</title>
</head>
<body>
<!-- Your content here -->
</body>
</html>
这样，你可以使用自定义的 CSS 变量来覆盖 Bootstrap 默认样式。
这只是一些自定义选项的示例，你可以根据具体需求来修改其他 Bootstrap 变量。确保查阅 Bootstrap 4 的官方文档以获取完整的 Sass 变量列表和详细的定制指南。
转载请注明出处：http://www.zyzy.cn/article/detail/5479/Bootstrap