自定义引导 CSS 模板

我刚刚开始使用来自 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:

  1. 修改。Css 中的 topbar 类。我不是特别喜欢这个，因为我会有很多。我不一定要修改他们所有相同的方式。
  2. 用我的背景图片创建新类，并应用两种样式(new 和 bootstrap 到我的元素)。这可能会产生样式冲突，这可以通过删除。Topbar 类分成单独的类，然后只使用自定义类没有涉及到的部分。同样，这需要比我认为应该需要的更多的工作，虽然它是灵活的，它不会让我轻松更新 bootstrap.css 当 Twitter 发布下一期。
  3. 中使用变量。实现定制的次数较少。这似乎是一个不错的方法，但没有使用。我对客户端编译 css 和代码可持续性的关注较少。

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

提前谢谢你的意见。

124373 次浏览
小开
最佳答案

最好的办法就是。

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

它们正在快速地改变库/框架(它们在内部发生分歧)。有些人更喜欢库，我会说它是一个框架，因为从你在页面上加载它的时候就改变了你的布局)。那么... 分叉/克隆可以让您轻松地获取新的即将推出的版本。

2. 不要修改 bootstrap.css 文件

当你需要升级 bootstrap 的时候，它会使你的生活变得复杂(而且你必须这样做)。

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

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

小开

You can use the bootstrap template from

Http://www.initializr.com/

其中包括所有的引导程序。更少的文件。然后，您可以更改变量/更新较少的文件，因为你想，它将自动编译的 css。在部署时，将少量文件编译为 css。

小开

自从 Pabluez 在去年12月给出答案以来，现在有了一种更好的定制 Bootstrap 的方法。

使用: Bootswatch生成 bootstrap.css

Bootswatch 从最新版本构建普通的 Bootstrap (不管你在 bootstrap 目录中安装了什么) ，但是也导入你的定制。这使得它很容易使用最新版本的 Bootstrap，同时维护自定义 CSS，而不必更改任何关于 HTML 的内容。您可以简单地改变 boostrap.css 文件。

小开

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

从 自助医生开始，下面介绍如何动态覆盖 bootstrap.css 样式:

下载最新的 Less.js，并在 <head>中包含到它的路径(和 Bootstrap)。

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

重新编译。更少的文件，只需保存它们并重新加载您的页面。Js 编译它们并将它们存储在本地存储中。

或者，如果您喜欢使用自定义样式(用于生产环境)静态编译一个新 bootstrap.css:

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

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

少用 Bootstrap..。

下面是如何使用 LESS 的 Bootstrap 文档

(they have moved since previous answers)

小开

在我看来，最好的选择是编译一个定制的 LESS 文件，包括 bootstrap.LESS、一个定制的 variable.LESS 文件和您自己的规则:

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

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

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

小开

我最近写了一篇关于我在过去几年在 Udacity是如何做到这一点的 邮寄文章。这个方法意味着我们可以随时更新 Bootstrap，而不会出现合并冲突、丢掉工作等等。

这篇文章通过例子进行了更深入的阐述，但其基本思想是:

  • Keep a pristine copy of bootstrap and overwrite it externally.
  • 修改一个文件(bootstrap 的 variable.less)以包含您自己的变量。
  • 让你的站点文件@include bootstrap.less，然后重写。

这确实意味着使用更少的代码，并在发布到客户端之前将其编译成 CSS (如果客户端需要更少代码，我通常会避免这样做) ，但是它对于可维护性/升级性非常好，而且获得更少的编译真的非常容易。链接的 github 代码有一个使用 grunt 的示例，但是有许多方法可以实现这一点——如果您喜欢的话，甚至可以使用 GUI。

Using this solution, your example problem would look like:

  • 在变量 less (而不是 bootstrap)中使用@navbar-verse-bg 更改导航条颜色
  • 添加您自己的导航栏样式到您的 bootstrap _ override. less，覆盖您需要的任何内容。
  • Happiness.

当到了升级引导程序的时候，你只需要换掉原始的引导程序副本，一切都会正常工作(如果引导程序进行了重大更改，你需要更新你的重写，但无论如何你必须这样做)

博客文章与步行通过是 给你。

Github 上的代码示例是 给你。

小开

Bootstrap 5(更新2021)

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

引导5-改变主题颜色

鞋带4

我正在为4.x 重新讨论这个 Bootstrap 定制问题，它现在使用的是 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)

enter image description here

之后(连同 custom.css)

enter image description here

在进行定制时，您应该了解 CSS 特异性。重写 custom.css需要使用与 bootstrap.css相同(或更具体)特异性的选择器。

Note there is no need to use !important in the custom CSS, unless 您正在覆盖一个引导工具 Class . < a href = “ https://developer.mozilla.org/en-US/docs/Web/CSS/Speciity”rel = “ nofollow noReferrer”> CSS 具体点 always works for one CSS class to override another.

2. Customize using SASS

如果您熟悉 SASS(您应该使用这种方法) ，您可以使用自己的 custom.scss定制 Bootstrap。有一个 引导程序文档中的解释这一点，但是文件 别解释了如何利用现有的变量在您的 custom.scss。例如，让我们将正文背景色更改为 #eeeeee，将 更改/覆盖的蓝色 primary上下文颜色更改为 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";

This also works to 创建新的自定义类. For example, here I add purple to the theme colors which creates 所有 the CSS for btn-purple, text-purple, bg-purple, alert-purple, etc...

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

Https://codeply.com/go/7xonykxfvp

有了 SASS 你必须 @ import bootstrap < em > 在 定制之后使他们工作！一旦 SASS 被编译成 CSS (这必须使用 SASS 编译器节点-SASS、 Gulp-SASS、 npm webpack 等来完成。) ，生成的 CSS 就是定制的 Bootstrap。如果你是 not熟悉 SASS，你可以自定义引导使用这样的工具 主题建筑师我创建。

自定义引导演示(SASS)

注意: 与3.x 不同，Bootstrap 4.x 不提供 正式的定制工具。但是，您可以下载 < strong > grid only CSS或使用另一个 4.x 自定义构建工具根据需要重新构建 Bootstrap 4 CSS。

相关阅读:

如何更改引导程序的主颜色？
How to create new set of color styles in Bootstrap 4 with sass
如何自定义引导程序

小开

你可以从这个工具 https://themestr.app/theme开始，看看它是如何覆盖 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";

提交答案