自定义Bootstrap CSS模板
我刚刚从Twitter开始使用Bootstrap，我想知道定制的‘最佳实践’是什么。我想开发一个系统，将利用css模板(Bootstrap或其他)的所有力量，是完全(和容易)可修改，是可持续的(即-当下一个版本的Bootstrap从Twitter发布时，我不必从头开始。
例如，我想将背景图像添加到顶部导航。看起来有3种方法可以解决这个问题：
- 修改bootstrap.css中的.topbar类。
- 用我的背景图像创建新的类，并将两种样式(新的和引导程序应用于我的元素)都应用于元素。这可能会产生样式冲突，这可以通过将.topbar类剥离到单独的类中，然后只使用我的自定义类没有涉及的部分来避免。同样，这需要比我认为必要的更多的工作，虽然它很灵活，但它不允许我在Twitter发布.LESS中的下一个installment.
- Use变量来实现定制时轻松更新bootstrap.css。顺便说一下，这似乎是一个很好的方法，但由于没有使用过css，我对在客户机上编译.LESS和代码sustainability.
有顾虑。
虽然我使用的是Bootstrap，但这个问题可以推广到任何css模板。
提前感谢您的意见。
回答 9
Stack Overflow用户
发布于 2011-12-30 03:48:17
最好的办法就是。
1.从github派生twitter-bootstrap并在本地克隆。
它们在库/框架上的变化非常快(它们在内部存在分歧。有些人更喜欢库，我会说它是一个框架，因为从加载到页面时就改变了布局)。好吧..。分叉/克隆将让您轻松获取即将到来的新版本。
2.请勿修改bootstrap.css文件
当你需要升级bootstrap的时候，这会让你的生活变得复杂(你也需要这么做)。
css 3.创建您自己的文件，并在需要原始引导程序内容时将其覆盖
如果他们用color: black;设置了一个topbar，但是你想让它变白，那么为这个topbar创建一个新的非常特定的选择器，并在特定的topbar上使用这个规则。例如，对于一个表，它将是<table class="zebra-striped mycustomclass">。如果你在bootstrap.css之后声明你的css文件，这将覆盖你想要的任何东西。
Stack Overflow用户
发布于 2018-05-18 19:47:49
Bootstrap 5(更新2021)
正如Bootstrap文档中所解释的，modifying the existing "theme" colors是使用SASS完成的。与以前的版本一样，您还可以通过在bootstrap.css之后添加CSS规则并使用正确的CSS特异性来覆盖Bootstrap CSS。
Bootstrap 5 - change theme colors
Bootstrap 4
我正在重新讨论4.x的引导自定义问题，它现在使用SASS而不是LESS。一般来说，有两种方法可以自定义Bootstrap...
1.简单的CSS覆盖
自定义的一种方法是简单地使用CSS覆盖Bootstrap CSS。为了便于维护，CSS定制被放在一个单独的custom.css文件中，这样bootstrap.css就不会被修改。对custom.css的引用紧跟在bootstrap.css之后，以使覆盖生效...
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">只需在自定义CSS中添加所需的任何更改。例如..。
/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control {
border-radius: 0;
}之前(bootstrap.css)
之后(使用custom.css)
在进行定制时，您应该了解CSS Specificity。custom.css中的重写需要使用与bootstrap.css相同(或更具体)的选择器。
注意:没有必要在自定义的CSS中使用
!important，除非你覆盖了其中的一个Bootstrap Utility classes。CSS specificity总是让一个CSS类覆盖另一个CSS类。
2.使用SASS进行自定义
如果您熟悉SASS (并且应该会使用此方法)，则可以使用自己的custom.scss自定义Bootstrap。有一个section in the Bootstrap docs可以解释这一点，但是文档并没有解释如何利用custom.scss中的现有变量。例如，让我们将body背景颜色更改为#eeeeee，并将蓝色primary上下文颜色change/override为Bootstrap's $purple variable...
/* custom.scss */
/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";
/* -------begin customization-------- */
/* simply assign the value */
$body-bg: #eeeeee;
/* use a variable to override primary */
$theme-colors: (
primary: $purple
);
/* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
@import "bootstrap";这也适用于创建新的自定义类。例如，这里我将purple添加到主题颜色中，它为btn-purple、text-purple、bg-purple、alert-purple等创建了所有的CSS……
/* add a new purple custom color */
$theme-colors: (
purple: $purple
);https://codeply.com/go/7XonykXFvP
使用SASS，你必须在 customizations之后导入@import bootstrap 才能使它们工作！一旦SASS被编译成CSS (必须使用SASS编译器节点--sass，gulp-sass，npm ……)，最终得到的CSS就是定制的Bootstrap。如果您不熟悉SASS，您可以使用我创建的这个theme builder工具自定义Bootstrap。
注意:与3.x不同的是，Bootstrap 4.x没有提供官方的定制器工具。但是，您可以根据需要下载 CSS或使用其他4.x custom build tool重新构建Bootstrap4CSS。
相关信息：
How to extend/modify (customize) Bootstrap 4 with SASS
How to change the bootstrap primary color?
How to create new set of color styles in Bootstrap 4 with sass
Stack Overflow用户
发布于 2012-08-20 04:36:11
我认为现在官方首选的方式是使用Less，或者动态覆盖bootstrap.css (使用less.js)，或者重新编译bootstrap.css (使用Node或Less编译器)。
在Bootstrap docs中，我们将了解如何动态覆盖bootstrap.css样式：
下载最新的Less.js并将其路径(和引导程序)包含在
<head>中。
或者，如果您更喜欢使用自定义样式静态编译新的bootstrap.css (用于生产环境)：
通过节点安装LESS命令行工具并运行以下命令：$Lessc./less/bootstrap.less> bootstrap.css
https://stackoverflow.com/questions/8596794
复制相似问题