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

Question

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

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

Answer 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 优点。

Answer 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 .

Answer 3

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

Answer 4

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

Answer 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 可能听起来令人生畏，但实际上非常简单：

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

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

Answer 6

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

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

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

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

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