自定义 Bootstrap CSS 模板

关键词：

【中文标题】自定义 Bootstrap CSS 模板【英文标题】：Customizing Bootstrap CSS template 【发布时间】：2012-01-25 16:14:17 【问题描述】：

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

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

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

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

提前感谢您的意见。

【问题讨论】：

嗨@Pabluez，是的，你回答了，见下文。很抱歉延迟回复 - 我一直在忙假期。 相信这篇文章会对你有所帮助prideparrot.com/blog/archive/2014/6/… 这个帖子内容丰富***.com/questions/10451317/… 【参考方案1】：

引导程序 5（2021 年更新）

如 Bootstrap 文档中所述，modifying the existing "theme" colors 是使用 SASS 完成的。与之前的版本一样，您还可以通过添加 bootstrap.css 之后的 CSS 规则来覆盖 Bootstrap CSS，并使用正确的 CSS 特性。

Bootstrap 5 - change theme colors

引导程序 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 相同（或更具体）的选择器。

注意没有必要在自定义 CSS 中使用!important，除非 您正在覆盖Bootstrap Utility classes 之一。 CSS specificity 总是适用于一个 CSS 类来覆盖另一个。

---

2。使用 SASS 自定义

如果您熟悉SASS（并且您应该使用此方法），您可以使用自己的custom.scss 自定义Bootstrap。有一个section in the Bootstrap docs 对此进行了解释，但是文档没有解释如何利用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";

这也适用于创建新的自定义类。例如，在这里我将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，您必须@import bootstrap 在自定义之后才能使它们正常工作！一旦 SASS 被编译为 CSS（这必须使用 SASS 编译器 node-sass、gulp-sass、npm webpack 等来完成。），生成的 CSS 就是定制的 Bootstrap。如果您不熟悉 SASS，则可以使用我创建的 theme builder 这样的工具自定义 Bootstrap。

Custom Bootstrap Demo (SASS)

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

---

相关：How to extend/modify (customize) Bootstrap 4 with SASSHow to change the bootstrap primary color?How to create new set of color styles in Bootstrap 4 with sassHow to Customize Bootstrap

【讨论】：

注意 - 为新的自定义按钮设置背景、边框、字体的自定义颜色怎么样？ 生成的CSS文件160Kb左右（压缩后130Kb）正常吗？例如，是否可以只覆盖原色？ 注意：编译后记得使用Autoprefixer【参考方案2】：

我最近写了一封post，讲述了过去几年我在Udacity 的工作方式。这种方法意味着我们可以随时更新 Bootstrap，而不会出现合并冲突、抛出工作等问题。

这篇文章通过示例进行了更深入的介绍，但基本思想是：

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

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

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

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

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

带有演练的博文是here。

github上的代码示例是here。

【讨论】：

【参考方案3】：

你可以从这个工具开始，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";

【讨论】：

【参考方案4】：

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

来自Bootstrap docs，以下是动态覆盖 bootstrap.css 样式的方法：

下载最新的 Less.js 并将其路径（和 Bootstrap）包含在 <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

【讨论】：

这是首选方式 :)【参考方案5】：

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

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

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

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

【讨论】：

【参考方案6】：

在 Bootstrap 中使用 LESS...

Here are the Bootstrap docs for how to use LESS

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

【讨论】：

如果文档已移动，请编辑其他答案以反映这一点 具有讽刺意味的是，此答​​案中的链接已失效。【参考方案7】：

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

使用：Bootswatch 生成您的 bootstrap.css

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

【讨论】：

您能否详细说明使用它的最佳方式。我下载了 bootswatch 并使用 grunt swatch:theme 构建了我的 css，但我仍然对应该将哪些文件放在哪里感到困惑。我试图达到一种情况，我可以下载更新版本的引导程序或引导程序主题并使用它，但仍使用我的自定义变量。 （如果这有所作为，我正在使用 VisualStudio2013 Pro）。我不想使用 javascript 进行编译。现在，我可以运行构建命令。稍后，我会尝试找到一种自动化的好方法。谢谢马克【参考方案8】：

您可以使用来自

的引导模板

http://www.initializr.com/

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

【讨论】：

【参考方案9】：

最好的办法是。

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

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

2。不要修改 bootstrap.css 文件

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

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

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

【讨论】：

+1 好答案。只是补充他的第三点：除了旧类之外，您可以创建一个新类来应用，或者只是覆盖/添加您想要更改的属性。 这就是我对 mycustomcss 的意思...除了 zebra-striped (bootstrap-class) 之外，我会将其编辑到 mycustomclass 中 关于如何以“新的”less/sass 方式执行此操作，您有什么可以添加的吗？即：您如何子类化“引导”样式？继承所有+扩充。我还没有弄清楚这是一个混合、扩展还是一个??对不起，我很笨。 +1感谢您的回答。我一直在这样做，它有效，但感觉不是最可持续的答案。如果我得到更新的 bootstrap.css 文件，我可能必须更改我的自定义覆盖类以适应任何更改。像@alexgray 一样，我想了解一种使用less 或mixins 的方法。或者，更好的方法是创建一个不应用引导程序的沙箱，这样我就可以使用我的样式而不必覆盖引导程序。如果有人有好的教程，请传递它 如果您只想对自己的 CSS 文件添加更改，那么分叉 Bootstrap 有什么意义？

C# MVC Core 自定义 Bootstrap CSS

】C#MVCCore自定义BootstrapCSS【英文标题】：C#MVCCoreCustomizeBootstrapCSS【发布时间】：2018-10-2415:42:56【问题描述】：我从VisualStudio模板创建了一个新的MVC核心项目。我想自定义提供的引导css文件。在Bootstrap中，它显示“有现有配置？上... 查看详情

Bootstrap5 和其他自定义 CSS 未在 .net core web api 中加载

】Bootstrap5和其他自定义CSS未在.netcorewebapi中加载【英文标题】：Bootstrap5andothercustomCSSnotloadedin.netcorewebapi【发布时间】：2021-10-2922:11:22【问题描述】：您好，目前我正在进行一个api项目，该项目在本地呈现cshtml模板以用于报告目... 查看详情

CSS/Bootstrap 3 自定义进度跟踪器

】CSS/Bootstrap3自定义进度跟踪器【英文标题】：CSS/Bootstrap3customProgressTracker【发布时间】：2019-12-1011:50:09【问题描述】：我正在开发一个使用Bootstrap3/CSS和可能Jquery的自定义进度跟踪器。我已经设法取得了一些进展，但无法使其与... 查看详情

Bootstrap 样式优先于自定义 CSS

】Bootstrap样式优先于自定义CSS【英文标题】：BootstrapStylesTakingPrecedenceOverCustomCSS【发布时间】：2019-09-2209:41:42【问题描述】：我有一个Vue-2项目，它使用（应该相关的）Vue-Router、Webpack和Bootstrap-Vue。我在我的应用程序的根目录中... 查看详情

错误多个指令 [bar, bar] 在使用自定义指令和 angular-bootstrap 时要求模板

】错误多个指令[bar,bar]在使用自定义指令和angular-bootstrap时要求模板【英文标题】：ErrorMultipledirectives[bar,bar]askingfortemplateonwhenusedcustomdirectiveandangular-bootstrap【发布时间】：2014-11-1719:18:53【问题描述】：我试图创建一个自定义指令... 查看详情

css自定义网格css1/5与bootstrap断点(代码片段)

查看详情

将自定义 css 添加到 React-Bootstrap 组件

】将自定义css添加到React-Bootstrap组件【英文标题】：AddingcustomcsstoReact-BootstrapComponent【发布时间】：2020-06-1903:36:44【问题描述】：如何在Nav组件中添加一些自定义CSS样式来管理nav项之间的填充并使其浮动在页面右侧？constnavbar=prop... 查看详情

如何使用自定义 css 文件覆盖 react-bootstrap

】如何使用自定义css文件覆盖react-bootstrap【英文标题】：howtooverridereact-bootstrapwithcustomcssfile【发布时间】：2016-01-0709:38:59【问题描述】：我使用react-bootstrap，但是我想修改一些元素，所以我自己写了custom.css。但是它没有做任何... 查看详情

testng自定义模板第二版(代码片段)

解决日志弹出框不落地到点击出通过bootstrap模态框实现，问题出现样式有点问题效果：点击日志弹出对话框，关闭对话框并且落地点击处<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"c... 查看详情

使用 bootstrap-sass 时如何自定义引导 css [关闭]

】使用bootstrap-sass时如何自定义引导css[关闭]【英文标题】：Howtocustomizebootstrapcsswhenusingbootstrap-sass[closed]【发布时间】：2013-04-2521:26:07【问题描述】：我想更改很多东西，例如按钮颜色或更改导航栏（标题）上的背景图像颜色。... 查看详情

Bootstrap 4.0自定义汉堡图标[重复]

】Bootstrap4.0自定义汉堡图标[重复]【英文标题】：Bootstrap4.0customizehamburgericon[duplicate]【发布时间】：2018-07-2623:37:49【问题描述】：我正在尝试改变三行的颜色和图标周围的边框通过css但不确定调用哪些标签来修改它。CSS：.navbar-to... 查看详情

如何自定义 react-bootstrap 组件？

】如何自定义react-bootstrap组件？【英文标题】：Howtocustomisereact-bootstrapcomponents?【发布时间】：2017-04-0522:17:56【问题描述】：覆盖css类/自定义react-bootstrap组件的最佳方法是什么？-（我已阅读文档，除非我遗漏了什么，否则不包括... 查看详情

Bootstrap cdn 覆盖了我在 react js 中的自定义 css 样式

】Bootstrapcdn覆盖了我在reactjs中的自定义css样式【英文标题】：Bootstrapcdnoverridesmycustomcssstylesinreactjs【发布时间】：2020-10-1906:13:00【问题描述】：我使用CSS在ReactJS中设计了一个网页。对于其中一个组件，我使用Bootstrap进行样式设... 查看详情

左侧垂直菜单

 1.前言最近需要做一个后台管理系统，我打算使用bootstrap弄一个好看的后台模板。网上的好多模板我觉的css和js有点重。于是就打算完全依靠bootstrap搭建一个属于自己的模板。首先从左侧的折叠菜单开始。看图。  2.CSS... 查看详情

将自定义 css 添加到 wordpress 中的页面模板

】将自定义css添加到wordpress中的页面模板【英文标题】：Addcustomcsstoapagetemplateinwordpress【发布时间】：2015-03-3017:57:35【问题描述】：嗨我需要一些帮助来为我的页面模板创建自定义css文件。关于这个问题有很多主题，但我阅读的... 查看详情

在 bootstrap-vue 中渲染自定义样式

】在bootstrap-vue中渲染自定义样式【英文标题】：Renderingcustomstylesinbootstrap-vue【发布时间】：2018-11-1815:54:43【问题描述】：我正在尝试向使用Bootstrap-Vue的下拉菜单组件添加一些自定义样式。我正在使用文档here。这是我的模板：<... 查看详情

bootstrap多按钮共用模态框传自定义参

<!DOCTYPEhtml><html><head><title>Bootstrap实例-模态框（Modal）插件事件</title><linkhref="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"rel="stylesheet"><scrip 查看详情

如何制作自定义列css？ [复制]

...uplicate]【发布时间】：2018-08-0213:20:52【问题描述】：使用Bootstrap或W3很容易，但在此应用程序中，我不想使用它来制作列。如何使用纯CSS处理列问题？我需要做这样的事情：我再说一遍……不使用bootstrap、w3或任何其他css框架，... 查看详情