自定义 Bootstrap CSS 模板

Customizing Bootstrap CSS template

提问by Anne

I am just getting started with Bootstrap from Twitter and am wondering what the ‘best practices' is for customization. I want to develop a system that will take advantage of all the power of a css template (Bootstrap or other), be completely (and easily) modifiable, be sustainable (ie – when the next version of Bootstrap is released from Twitter I don't have to start over.

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

For example, I want to add background images to the top navigation. It looks like there are 3 ways to go about this:

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

1. Modify the .topbar classes in bootstrap.css . I don't particularly like this because I will have lots of .topbar items and I don't necessarily want to modify them all the same way.
2. Create new classes with my background images and apply both styles (the new and the bootstrap to my element). This may create style conflicts, which could be avoided by stripping the .topbar class into separate classes and then only using the pieces that are not stepped on by my custom class. Again this requires more work than I think should be necessary and while it is flexible, it won't allow me to easily update bootstrap.css when Twitter releases the next installment.
3. Use variables in .LESS to achieve the customization. Offhand this seems like a good approach but having not used .LESS I have concerns about compiling css on the client and about code sustainability.

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

Though I am using Bootstrap, this question can be generalized to any css template.

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

Thanks in advance for input.

提前感谢您的意见。

回答by Pabluez

The best thing to do is.

最好的办法是。

1. fork twitter-bootstrap from github and clone locally.

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

they are changing really quickly the library/framework (they diverge internally. Some prefer library, i'd say that it's a framework, because change your layout from the time you load it on your page). Well... forking/cloning will let you fetch the new upcoming versions easily.

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

2. Do not modify the bootstrap.css file

2.不要修改bootstrap.css文件

It's gonna complicate your life when you need to upgrade bootstrap (and you will need to do it).

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

3. Create your own css file and overwrite whenever you want original bootstrap stuff

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

if they set a topbar with, let's say, color: black;but you wan it white, create a new very specific selector for this topbar and use this rule on the specific topbar. For a table for example, it would be <table class="zebra-striped mycustomclass">. If you declare your css file after bootstrap.css, this will overwrite whatever you want to.

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

回答by Zim

Update 2019 - Bootstrap 4

2019 年更新 - Bootstrap 4

I'm revisiting this Bootstrap customization question for 4.x, which now utilizes SASSinstead of LESS. In general, there are 2 ways to customize Bootstrap...

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

1. Simple CSS Overrides

1. 简单的 CSS 覆盖

One way to customize is simply using CSS to override Bootstrap CSS. For maintainability, CSS customizations are put in a separate custom.cssfile, so that the bootstrap.cssremains unmodified. The reference to the custom.cssfollows afterthe bootstrap.cssfor the overrides to work...

一种自定义方法是简单地使用 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">

Just add whatever changes are needed in the custom CSS. For example...

只需在自定义 CSS 中添加任何需要的更改。例如...

    /* remove rounding from cards, buttons and inputs */
    .card, .btn, .form-control {
        border-radius: 0;
    }

Before (bootstrap.css)

之前 ( bootstrap.css)

After (with custom.css)

之后（与custom.css）

When making customizations, you should understand CSS Specificity. Overrides in the custom.cssneed to use selectors that are as specific as the bootstrap.css.

在进行自定义时，您应该了解CSS 特异性。在custom.css需要使用与bootstrap.css.

Note there is no need to use !importantin the custom CSS, unless you're overriding one of the Bootstrap Utility classes. CSS specificityalways works for one CSS class to override another.

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

---

---

2. Customize using SASS

2.使用SASS自定义

If you're familiar with SASS(and you should be to use this method), you can customize Bootstrap with your own custom.scss. There is a section in the Bootstrap docsthat explains this, however the docs don't explainhow to utilize existing variables in your custom.scss. For example, let's change the body background-color to #eeeeee, and change/overridethe blue primarycontextual color to Bootstrap's $purplevariable...

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

This also works to create new custom classes. For example, here I add purpleto the theme colors which creates allthe CSS for btn-purple, text-purple, bg-purple, alert-purple, etc...

这也适用于创建新的自定义类。例如，在这里我想补充purple到创建主题颜色全部为CSS btn-purple，text-purple，bg-purple，alert-purple，等...

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

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

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

With SASS you must @import bootstrap afterthe customizationsto make them work! Once the SASS is compiled to CSS (this must be done using a SASS compiler node-sass, gulp-sass, npm webpack, etc..), the resulting CSS is the customized Bootstrap. If you're notfamiliar with SASS, you can customize Bootstrap using a tool like this theme builderI created.

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

Custom Bootstrap Demo (SASS)

自定义引导程序演示 (SASS)

Note: Unlike 3.x, Bootstrap 4.x doesn't offer an officialcustomizer tool. You can however, download the grid onlyCSSor use another 4.x custom build toolto re-build the Bootstrap 4 CSS as desired.

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

---

---

Related:
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
How to Customize Bootstrap

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

回答by Symmetric

I think the officially preferred way is now to use Less, and either dynamically override the bootstrap.css (using less.js), or recompile bootstrap.css (using Node or the Less compiler).

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

From the Bootstrap docs, here's how to override bootstrap.css styles dynamically:

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

Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.

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

To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.

下载最新的 Less.js 并在 .js 文件中包含它的路径（和 Bootstrap）<head>。

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

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

Or if you prefer to statically compile a new bootstrap.css with your custom styles (for production environments):

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

Install the LESS command line tool via Node and run the following command:

$ lessc ./less/bootstrap.less > bootstrap.css

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

$ lessc ./less/bootstrap.less > bootstrap.css

回答by mdashx

Since Pabluez's answer back in December, there is now a better way to customize Bootstrap.

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

Use: Bootswatchto generate your bootstrap.css

使用：Bootswatch生成你的 bootstrap.css

Bootswatch builds the normal Twitter Bootstrap from the latest version (whatever you install in the bootstrap directory), but also imports your customizations. This makes it easy to use the the latest version of Bootstrap, while maintaining custom CSS, without having to change anything about your HTML. You can simply sway boostrap.css files.

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

回答by Tom

You can use the bootstrap template from

您可以使用 bootstrap 模板

http://www.initializr.com/

http://www.initializr.com/

which includes all the bootstrap .less files. You can then change variables / update the less files as you want and it will automatically compile the css. When deploying compile the less file to css.

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

回答by Jide

The best option in my opinion is to compile a custom LESS file including bootstrap.less, a custom variables.less file and your own rules :

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

1. Clone bootstrap in your root folder : git clone https://github.com/twbs/bootstrap.git
2. Rename it "bootstrap"
3. Create a package.json file : https://gist.github.com/jide/8440609
4. Create a Gruntfile.js : https://gist.github.com/jide/8440502
5. Create a "less" folder
6. Copy bootstrap/less/variables.less into the "less" folder
7. Change the font path : @icon-font-path: "../bootstrap/fonts/";
8. Create a custom style.less file in the "less" folder which imports bootstrap.less and your custom variables.less file : https://gist.github.com/jide/8440619
9. Run npm install
10. Run grunt watch

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

Now you can modify the variables any way you want, override bootstrap rules in your custom style.less file, and if some day you want to update bootstrap, you can replace the whole bootstrap folder !

现在您可以以任何方式修改变量，覆盖自定义 style.less 文件中的引导程序规则，如果有一天您想更新引导程序，您可以替换整个引导程序文件夹！

EDIT: I created a Bootstrap boilerplate using this technique : https://github.com/jide/bootstrap-boilerplate

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

回答by betaorbust

I recently wrote a postabout how I've been doing it at Udacityfor the last couple years. This method has meant we've been able to update Bootstrap whenever we wanted to without having merge conflicts, thrown out work, etc. etc.

我最近写了一篇关于过去几年我在Udacity做这件事的帖子。这种方法意味着我们可以随时更新 Bootstrap，而不会发生合并冲突、放弃工作等。

The the post goes more in depth with examples, but the basic idea is:

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

• Keep a pristine copy of bootstrap and overwrite it externally.
• Modify one file (bootstrap's variables.less) to include your own variables.
• Make your site file @include bootstrap.less and then your overrides.

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

This does mean using LESS, and compiling it down to CSS before shipping it to the client (client-side LESS if finicky, and I generally avoid it) but it is EXTREMELY good for maintainability/upgradability, and getting LESS compilation is really really easy. The linked github code has an example using grunt, but there are many ways to achieve this -- even GUIs if that's your thing.

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

Using this solution, your example problem would look like:

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

• Change the nav bar color with @navbar-inverse-bg in your variables.less (not bootstrap's)
• Add your own nav bar styles to your bootstrap_overrides.less, overwriting anything you need to as you go.
• Happiness.

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

When it comes time to upgrade your bootstrap, you just swap out the pristine bootstrap copy and everything will still work (if bootstrap makes breaking changes, you'll need to update your overrides, but you'd have to do that anyway)

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

Blog post with walk-through is here.

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

Code example on github is here.

github 上的代码示例在这里。

回答by Twelve24

Use LESS with Bootstrap...

在 Bootstrap 中使用 LESS...

Here are the Bootstrap docs for how to use LESS

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

(they have moved since previous answers)

（他们自之前的答案以来已经移动了）