Bootstrap是一个开源的前端框架，可以提供可重用的代码。尽管Bootstrap框架提供了一些预定义的CSS类来定制组件，但你可能需要根据自己的需求自定义某些东西。那么，在不丢失更改的情况下，如何自定义Bootstrap的CSS？本文将介绍几种方法。
1. 编写自定义CSS文件
你可以编写一个自定义的CSS文件，然后在Bootstrap文件之后引用它。在自定义CSS文件中，你可以重写Bootstrap的现有类或添加新类。下面是编写自定义CSS文件的示例：
/* 重写现有类 */
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
/* 添加新类 */
.custom-class {
/* add your styles here */
}
然后，在HTML中引用自定义CSS文件，例如：
<!-- 引入Bootstrap -->
<link rel="stylesheet" href="bootstrap.css">
<!-- 引入自定义CSS -->
<link rel="stylesheet" href="custom.css">
2. 通过!important重写样式
当你希望改变Bootstrap样式的优先级时，可以使用!important。!important会覆盖其他样式，并使你的样式具有更高的优先级。
例如，以下CSS将使.navbar-brand的字体颜色为红色：
.navbar-brand {
color: red !important;
}
但是，请注意，!important应该是你选择的最后一个选项。如果可能，请使用“具体度比!important更高的选择器”。
3. 定义新变量
Bootstrap使用Sass和变量来构建组件。你可以通过定义新变量来自定义Bootstrap的基准值。例如，以下Sass代码定义了一个新变量$primary-color，并将其用于.btn-primary和其他组件：
$primary-color: #007bff;
.btn-primary {
color: #fff;
background-color: $primary-color;
border-color: $primary-color;
}
/* 使用$primary-color的其他组件 */
如果你想重新定义Bootstrap的颜色，这是一种很好的方法。
总结
以上是几种自定义Bootstrap CSS的方法。无论你选择哪种方法，都应该谨慎修改Bootstrap的CSS，并避免修改其源代码。如果你决定修改源代码，请在GitHub Fork Bootstrap存储库中进行修改，并使用Git进行版本控制。