如何在 bootstrap 3 中使用 bootstrap-theme.css？

Posted 2023-03-05

【中文标题】如何在 bootstrap 3 中使用 bootstrap-theme.css？

【英文标题】：How to use bootstrap-theme.css with bootstrap 3?

【发布时间】：2013-08-22 01:27:57

【问题描述】：

从http://getbootstrap.com下载完整的bootstrap 3包后，我注意到主题有一个单独的css文件。如何利用它？请解释一下？

我在现有的引导项目中包含了bootstrap-theme.css，但输出没有区别。

【参考方案1】：

下载 Bootstrap 3.x 后，您将获得 bootstrap.css 和 bootstrap-theme.css（更不用说这些文件的缩小版本）存在）。

bootstrap.css

bootstrap.css 完全样式化并且可以使用，如果您愿意的话。它可能有点简单，但它已经准备好了，它就在那里。

如果你不想，你不需要使用 bootstrap-theme.css，一切都会好起来的。

bootstrap-theme.css

bootstrap-theme.css 正是文件名试图暗示的内容：它是引导程序的主题，创造性地被认为是“引导程序主题”。文件的名称有点混淆，因为基础bootstrap.css 已经应用了样式，并且我认为这些样式是默认样式。但根据 Bootstrap 文档的示例部分中关于此 bootstrap-theme.css 文件的内容，该结论显然是不正确的：

“加载可选的 Bootstrap 主题以获得视觉增强体验。”

以上引用可在此处http://getbootstrap.com/getting-started/#examples 找到链接到此示例页面的缩略图http://getbootstrap.com/examples/theme/。这个想法是 bootstrap-theme.css 是 THE 引导主题，它是可选的。

BootSwatch.com 上的主题

关于 BootSwatch.com 上的主题：这些主题没有像 bootstrap-theme.css 那样实现。 BootSwatch 主题是原始bootstrap.css 的修改版本。因此，您绝对不应该同时使用 BootSwatch 中的主题和 bootstrap-theme.css 文件。

自定义主题

关于您自己的自定义主题：您可以在创建自己的主题时选择修改bootstrap-theme.css。这样做可以更轻松地进行样式更改，而不会意外破坏任何内置的 Bootstrap 优点。

【讨论】：

这应该是选择的答案。

关于 Bootswatch.com 的通知非常有帮助。谢谢。

@Daniel ...但它应该根据 twbs/bootstrap 新方向进行重构，以便为他的主题客户提供稳定、一致的功能

bootstrap-theme.css 文件不是更多的替代，即 bootstrap.css 以这样一种方式设置您，您可以使用带有所有相关样式的引导程序。 Bootstrap-theme.css 可以在不更改基本 css 文件的情况下覆盖样式。这里的重要性在于，如果您升级到 bootstrap X.X，您将替换基本 css 文件，您不必担心丢失所有自定义项。您可能需要调整您的主题文件，但这不是问题。也许你在说什么。

最令人困惑的是，如果您使用引导站点 (getbootstrap.com/customize) 上的自定义功能，它会将您的自定义设置在 bootstrap.css 而不是主题文件中。该页面也不包含用于修改与主题 (tm) 相关的任何内容的选项。据我所知，主题文件只是添加了一堆渐变和阴影，并没有做其他任何事情。

【参考方案2】：

有关 css 样式的示例，请查看：http://getbootstrap.com/examples/theme/

如果您想查看示例的外观没有 bootstrap-theme.css 文件，请打开浏览器开发人员工具并从示例的 中删除链接，然后你可以比较一下。

我知道这是一个老问题，但发布它以防万一有人正在寻找我的样子。

更新

bootstrap.css = 主要的 css 框架（网格、基本样式等）

bootstrap-theme.css = 扩展样式（3D 按钮、渐变等）。 这个文件是可选的，根本不影响引导程序的功能，它只是增强了外观。

更新 2

随着 v3.2.0 的发布，Bootstrap 添加了在文档页面上查看主题 css 的选项。如果您转到其中一个文档页面（css、components、javascript），您应该会在侧导航的底部看到一个“预览主题”链接，您可以使用它来打开和关闭主题 css .

【讨论】：

感谢您跟进此问题，因为您的回答最有意义。我想知道，你知道吗，我是否可以像那里所说的那样，用 Bootswatch.com 的主题替换 bootstrap.css 的内容，即使使用 Bottswatch 主题，我仍然可以使用 bootstrap-theme.css？

bootstrap.css = 主 css 框架（网格、基本样式等） bootstrap-theme.css = 扩展样式（3D 按钮等） 我从未使用过它，但只是看看它和 Bootswatch似乎编辑 bootstrap.css 文件以满足自己的需要。因此，要使用它，您只需从 Bootswatch 下载 bootstrap.css 文件并使用它。不要使用 bootstrap-theme.css，因为它可能会与 Bootswatch 中的 css 冲突。

谢谢老哥，感谢您的回答！这也是我注意到的，只是没有回到这里。如果不进行修改，您似乎无法将 bootstrap-theme 与 Bootswatch 一起使用。无论如何，它把我的网站弄得一团糟。

【参考方案3】：

首先，bootstrap-theme.css 仅相当于 Bootstrap 3 中的 Bootstrap 2.x 样式。如果您真的想使用它，只需将其与 bootstrap.css 一起添加（缩小版也可以使用）。

【讨论】：

请注意，如果您使用第三方引导主题 c​​ss 文件，最好注释掉官方 bootstrap-theme.css。

为什么这是一个公认的答案。这甚至不是一个答案。对不起。所有这一切都是在 Bootstrap 2 中的文件的等价物，任何不熟悉 Bootstrap 2 的人现在都必须搜索另一个答案来找出这个文件的作用。

但这就是我想知道的。

同意@MarioAwad，这不是答案。这也令人困惑，因为我认为这只是对旧 Bootstrap css 的支持，这只是部分正确。

在 BS 3.2 中，包括主题 CSS 确实通过为按钮和其他东西添加 3D 阴影来改变外观。有关详细信息，请参阅 joshhunt 的回答。

【参考方案4】：

Bootstrap-theme.css 是附加的 CSS 文件，您可以选择使用它。它为按钮和其他一些元素提供 3D 效果。

【参考方案5】：

正如其他人所说，文件名 bootstrap-theme.css 非常混乱。我会选择像 bootstrap-3d.css 或 bootstrap-fancy.css 这样更能描述它实际作用的东西。世界所认为的“Bootstrap 主题”是您可以从 BootSwatch 获得的东西，它是一种完全不同的野兽。

话虽如此，效果还是相当不错的——渐变和阴影等等。不幸的是，这个文件会对 BootSwatch 主题造成严重破坏，所以我决定深入研究如何让它与它们配合得很好。

少

Bootstrap-theme.css 是从 Bootstrap 源代码中的 theme.less 文件生成的。受影响的元素是（自 Bootstrap v3.2.0 起）：

列出项目 按钮 图片 下拉菜单 导航栏 警报 进度条 列出组 面板 井

theme.less 文件依赖于：

@import "variables.less";
@import "mixins.less";

代码在几个地方使用了 variables.less 中定义的颜色，例如：

// Give the progress background some depth
.progress 
    #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)

这就是为什么 bootstrap-theme.css 完全搞砸了 BootSwatch 主题。好消息是 BootSwatch 主题也是从 variables.less 文件创建的，因此您可以简单地为您的 BootSwatch 主题构建 bootstrap-theme.css。

构建 bootstrap-theme.css

正确的方法是更新主题构建过程，但这里是快速而肮脏的方法。将 Bootstrap 源代码中的 variables.less 文件替换为 Bootswatch 主题中的文件并构建它，瞧，您的 Bootswatch 主题就有了 bootstrap-theme.css 文件。

构建引导程序本身

构建 Bootstrap 可能听起来令人生畏，但实际上非常简单：

下载 Bootstrap 源代码 下载并安装 NodeJS 打开命令提示符并导航到引导源文件夹。键入“npm 安装”。这会将“node_modules”文件夹添加到项目中并下载您需要的所有 Node 内容。 通过键入“npm install -g grunt-cli”全局安装 grunt（-g 选项） 将“dist”文件夹重命名为“dist-orig”，然后通过键入“grunt dist”重建它。现在检查是否有一个新的“dist”文件夹，其中包含使用自定义 Bootstrap 构建所需的所有内容。

完成。瞧，这很容易，不是吗？

【参考方案6】：

我知道这篇文章有点老了，但是......

 正如“威特尼斯”所指出的那样。

关于您自己的自定义主题您可以在创建自己的主题时选择修改 bootstrap-theme.css。这样做可以更轻松地进行样式更改，而不会意外破坏任何内置的 Bootstrap 优点。

 我认为，Bootstrap 多年来一直认为，每个人都想要一些不同于核心风格的东西。虽然您可以修改 bootstrap.css，但它可能会破坏事情，并且可能会使更新到新版本变得非常痛苦和耗时。从“主题”站点下载意味着您​​必须等待 if 创作者更新了该主题，有时是大型 if，对吧？

  有些人构建了自己的“custom.css”文件，这没关系，但如果您使用“bootstrap-theme.css”，很多东西已经构建好了，这让您可以更快地推出自己的主题，“而不会”破坏bootstrap.css 的核心。我大部分时间都不喜欢 3D 按钮和渐变，所以使用 bootstrap-theme.css 更改它们。添加边距或填充，更改按钮的半径，等等...