114

我刚刚从 Twitter 开始使用 Bootstrap，我想知道自定义的“最佳实践”是什么。我想开发一个系统，该系统将利用 css 模板（Bootstrap 或其他）的所有功能，完全（且轻松）可修改，可持续（即，当下一版 Bootstrap 从 Twitter 发布时，我不这样做'不必重新开始。

例如，我想在顶部导航中添加背景图片。看起来有3种方法可以解决这个问题：

  1. 修改 bootstrap.css 中的 .topbar 类。我不是特别喜欢这个，因为我会有很多 .topbar 项目，而且我不一定想以同样的方式修改它们。
  2. 使用我的背景图像创建新类并应用两种样式（新的和引导到我的元素）。这可能会产生样式冲突，这可以通过将 .topbar 类剥离到单独的类中来避免，然后只使用我的自定义类没有踩到的部分。同样，这需要比我认为必要的更多的工作，虽然它很灵活，但它不会让我在 Twitter 发布下一部分时轻松更新 bootstrap.css。
  3. 使用 .LESS 中的变量来实现自定义。顺便说一句，这似乎是一个很好的方法，但没有使用 .LESS 我担心在客户端编译 css 和代码的可持续性。

虽然我使用的是 Bootstrap，但这个问题可以推广到任何 css 模板。

提前感谢您的输入。

4

9 回答 9

133

最好的办法是。

1. 从github fork twitter-bootstrap 并在本地克隆。

他们正在迅速改变库/框架（它们在内部分歧。有些人更喜欢库，我会说它是一个框架，因为从你在页面上加载它的时候开始改变你的布局）。嗯......分叉/克隆将让您轻松获取即将推出的新版本。

2.不要修改bootstrap.css文件

当您需要升级引导程序时（并且您需要这样做），这会使您的生活复杂化。

3. 创建自己的 css 文件并在需要原始引导程序时覆盖

如果他们设置了一个顶栏，比方说，color: black;但你想让它变白，为这个顶栏创建一个新的非常具体的选择器，并在特定的顶栏上使用这个规则。例如，对于一个表，它将是<table class="zebra-striped mycustomclass">. 如果您在 之后声明您的 css 文件bootstrap.css，这将覆盖您想要的任何内容。

于 2011-12-29T19:48:17.333 回答
42

引导程序 5（2021 年更新）

如 Bootstrap 文档中所述，修改现有的“主题”颜色是使用 SASS 完成的。与以前的版本一样，您还可以通过添加跟在后面的 CSS 规则bootstrap.css并使用正确的 CSS 特性来覆盖 Bootstrap CSS。

Bootstrap 5 - 更改主题颜色

引导程序 4

我正在重新审视 4.x 的这个 Bootstrap 自定义问题，它现在使用SASS而不是 LESS。一般来说，自定义 Bootstrap 有 2 种方法...

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.

请注意，无需!important在自定义 CSS 中使用，除非您覆盖其中一个Bootstrap Utility 类。CSS 特异性 总是适用于一个 CSS 类来覆盖另一个。

2.使用SASS自定义

如果您熟悉SASS（并且应该使用此方法），则可以使用自己的custom.scss. Bootstrap 文档中有一个部分解释了这一点，但是文档没有解释如何利用custom.scss. 例如，让我们将主体背景颜色更改为#eeeeee，并将蓝色上下文颜色更改/覆盖为Bootstrap 的变量...primary$purple

/* 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创建所有CSS的主题颜色...btn-purpletext-purplebg-purplealert-purple

/* add a new purple custom color */
$theme-colors: (
  purple: $purple
);

https://codeply.com/go/7XonykXFvP

使用 SASS，您必须在自定义后@import bootstrap才能使其正常工作！一旦 SASS 被编译为 CSS（这必须使用 SASS 编译器 node-sass、gulp-sass、npm webpack 等来完成），生成的 CSS 就是定制的 Bootstrap。如果你不熟悉 SASS，你可以使用我创建的这个主题构建器这样的工具来自定义 Bootstrap。

自定义引导演示 (SASS)

注意：与 3.x 不同，Bootstrap 4.x 不提供官方定制工具。但是，您可以只下载网格CSS或使用另一个4.x 自定义构建工具根据需要重新构建 Bootstrap 4 CSS。

相关：
如何使用 SASS 扩展/修改（自定义）Bootstrap 4
如何更改引导程序原色？
如何使用 sass 在 Bootstrap 4 中创建新的颜色样式集
如何自定义 Bootstrap

于 2018-05-18T11:47:48.753 回答
20

我认为现在官方首选的方法是使用 Less，或者动态覆盖 bootstrap.css（使用 less.js），或者重新编译 bootstrap.css（使用 Node 或 Less 编译器）。

从Bootstrap 文档，这里是如何动态覆盖 bootstrap.css 样式：

下载最新的 Less.js 并在<head>.

 <link rel="stylesheet/less" href="/path/to/bootstrap.less">
    <script src="/path/to/less.js"></script>

要重新编译 .less 文件，只需保存它们并重新加载您的页面。Less.js 编译它们并将它们存储在本地存储中。

或者，如果您更喜欢使用自定义样式（用于生产环境）静态编译新的 bootstrap.css：

通过 Node 安装 LESS 命令行工具并运行以下命令： 

$ lessc ./less/bootstrap.less > bootstrap.css
于 2012-08-19T20:36:11.163 回答
10

自从 Pabluez 在 12 月回答以来，现在有一种更好的方法来自定义 Bootstrap。

使用：Bootswatch生成你的 bootstrap.css

Bootswatch 从最新版本（无论您在 bootstrap 目录中安装什么）构建普通的 Twitter Bootstrap，但也会导入您的自定义设置。这使得使用最新版本的 Bootstrap 变得容易，同时保持自定义 CSS，而无需更改任何有关 HTML 的内容。您可以简单地摇摆 boostrap.css 文件。

于 2012-04-16T00:36:03.903 回答
5

您可以使用来自的引导模板

http://www.initializr.com/

其中包括所有引导程序 .less 文件。然后，您可以根据需要更改变量/更新较少的文件，它将自动编译 css。部署时将less文件编译为css。

于 2012-02-20T16:11:21.657 回答
3

我认为最好的选择是编译一个自定义 LESS 文件，包括 bootstrap.less、一个自定义 variables.less 文件和您自己的规则：

  1. 在您的根文件夹中克隆引导程序：git clone https://github.com/twbs/bootstrap.git
  2. 将其重命名为“引导程序”
  3. 创建一个 package.json 文件：https ://gist.github.com/jide/8440609
  4. 创建一个 Gruntfile.js：https ://gist.github.com/jide/8440502
  5. 创建一个“少”文件夹
  6. 将 bootstrap/less/variables.less 复制到“less”文件夹中
  7. 更改字体路径：@icon-font-path: "../bootstrap/fonts/";
  8. 在导入 bootstrap.less 和您的自定义 variables.less 文件的“less”文件夹中创建自定义 style.less 文件：https ://gist.github.com/jide/8440619
  9. 跑npm install
  10. 跑grunt watch

现在你可以随意修改变量，覆盖自定义 style.less 文件中的引导规则，如果有一天你想更新引导，你可以替换整个引导文件夹！

编辑：我使用这种技术创建了一个 Bootstrap 样板：https ://github.com/jide/bootstrap-boilerplate

于 2014-01-15T17:42:18.160 回答
3

我最近写了一篇关于过去几年我在Udacity的工作情况的帖子。这种方法意味着我们可以随时更新 Bootstrap，而不会出现合并冲突、抛出工作等问题。

该帖子通过示例进行了更深入的介绍，但基本思想是：

  • 保留引导程序的原始副本并在外部覆盖它。
  • 修改一个文件（bootstrap 的 variables.less）以包含您自己的变量。
  • 使您的站点文件 @include bootstrap.less 然后覆盖。

这确实意味着使用 LESS，并在将其发送到客户端之前将其编译为 CSS（客户端 LESS，如果挑剔的话，我通常会避免使用它）但它对于可维护性/可升级性非常好，并且获得 LESS 编译真的很容易. 链接的 github 代码有一个使用 grunt 的示例，但是有很多方法可以实现这一点 - 如果这是你的东西，甚至是 GUI。

使用此解决方案，您的示例问题将如下所示：

  • 在您的 variables.less 中使用 @navbar-inverse-bg 更改导航栏颜色（不是引导程序）
  • 将您自己的导航栏样式添加到您的 bootstrap_overrides.less 中，随时覆盖您需要的任何内容。
  • 幸福。

当需要升级您的引导程序时，您只需更换原始引导程序副本，一切仍然有效（如果引导程序进行重大更改，您需要更新您的覆盖，但无论如何您都必须这样做）

带演练的博客文章在这里。

github 上的代码示例在这里。

于 2015-01-03T23:10:29.110 回答
0

在引导程序中使用 LESS...

这是有关如何使用 LESS 的 Bootstrap 文档

（自以前的答案以来，他们已经搬家了）

于 2012-12-18T01:15:39.120 回答
0

你可以从这个工具开始，https://themestr.app/theme，看看它是如何覆盖 scss 变量的，你会知道什么变量会影响什么。这是我认为最简单的方法。

示例 scss 生成：

@import url(https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700);
$font-family-base:Montserrat;
@import url(https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700);
$headings-font-family:Open Sans;

$enable-grid-classes:false;
$primary:#222222;
$secondary:#666666;
$success:#333333;
$danger:#434343;
$info:#515151;
$warning:#5f5f5f;
$light:#eceeec;
$dark:#111111;
@import "bootstrap";
于 2020-08-25T08:21:19.787 回答