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

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

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

128530 次浏览
小开

首先，bootstrap-theme.css只是相当于 Bootstrap 3中的 Bootstrap 2.x 风格。如果你真的想使用它，只需要将它与 bootstrap.css一起添加(简化版也可以)。

小开

鞋带主题。CSS 是附加的 CSS 文件，您可以选择使用它。它给按钮和其他一些元素提供了3D 效果。

小开

有关 css 样式的示例，请参见: http://getbootstrap.com/examples/theme/

如果你想看看这个例子看起来如何 没有引导主题。Css 文件打开你的浏览器开发工具，从例子的 < head > 中删除链接，然后你可以比较它。

我知道这是一个老问题，但发布它只是为了以防有人正在寻找一个例子，如何看起来像我。

更新

主 css 框架(网格、基本样式等)

扩展造型(3D 按钮，渐变等)

更新2

随着 v3.2.0的发布，Bootstrap 添加了一个选项，可以在文档页面上查看主题 css。如果你去其中一个文档页面(CSS，组件，Javascript) ，你应该看到一个“预览主题”链接在侧面导航的底部，你可以用它来打开和关闭主题 css。

小开
最佳答案

下载 Bootstrap 3.x 后，您将获得 Bootstrap.css和 引导主题(更不用说还有这些文件的缩小版本)。

Bootstrap.css

bootstrap.css是完全样式化和准备使用，如果这是你的愿望。它可能有点平淡，但它是准备好了，它是存在的。

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

引导主题

bootstrap-theme.css正是这个文件的名字试图暗示的: 它是 bootstrap 的一个主题，被创造性地认为是“ THE bootstrap 主题”。文件的名称有点混淆，因为基本的 bootstrap.css已经应用了样式，我认为这些样式是默认的。但是，根据 Bootstrap 文档中关于这个 bootstrap-theme.css文件的示例部分所说的内容，这个结论显然是不正确的:

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

上面的报价是在这里 译自: 美国《 http://getbootstrap.com/getting-started/#examples 》杂志网站(http://getbootstrap.com/getting-start/# example)原著:的缩略图，链接到这个示例页面 译自: 美国《 http://getbootstrap.com/examples/theme/》杂志网站(http://getbootstrap.com/example/theme/)。这个想法是，bootstrap-theme.css是 THE引导主题和它是可选的。

BootSwatch 网站的主题

关于 BootSwatch. com 的主题: 这些主题不像 bootstrap-theme.css那样实现。BootSwatch 主题是原始 bootstrap.css的修改版本。所以，你绝对不应该同时使用 BootSwatch 和 bootstrap-theme.css文件的主题。

定制主题

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

小开

正如其他人所说，文件名 引导主题非常令人困惑。我会选择像 Bootstrap-3d. css或 引导-幻想这样的东西，它会更多地描述它实际上做什么。世界所看到的“ Bootstrap 主题”是一个你可以从 BootSwatch 得到的东西，这是一个完全不同的野兽。

也就是说，效果相当不错-渐变和阴影等等。不幸的是，这个文件将对 BootSwatch 主题造成严重破坏，所以我决定深入研究一下如何让它与 BootSwatch 主题良好地兼容。

更少

Bootstrap-theme. css 是从 Bootstrap 源代码中的 主题，更少文件生成的，受影响的元素包括(从 Bootstrap v3.2.0开始) :

  • 列出项目
  • 纽扣
  • 图像
  • 下降
  • 导航栏
  • 警报
  • 进度条
  • 列出组别
  • 展板
  • 威尔斯

Less 文件取决于:

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

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

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

这就是为什么。Css 完全搞砸了 BootSwatch 主题。好消息是 BootSwatch 主题也是由 variable.less 文件创建的，所以您可以简单地构建 bootstrap 主题。你的 BootSwatch 主题的 css。

构建 bootstrap-theme. css

正确的方法是更新主题构建过程，但是这里有一种快速而简单的方法。将 Bootstrap 源代码中的 variable.less 文件替换为 Bootswatch 主题中的文件，然后构建它，瞧，您就有了一个 Bootstrap 主题。你的 Bootswatch 主题的 css 文件。

构建 Bootstrap 本身

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

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

好了，看，这很简单，不是吗？

小开

我知道这个帖子有点老，但是..。

正如“证人”所指出的。

关于你自己的自定义主题 你可以选择修改 bootstrap-Theme。创建自己的主题时使用 css。这样做可以更容易地进行样式更改，而不会意外地破坏任何内置的 Bootstrap 优点。

我认为 Bootstrap 在过去几年中已经看到，每个人都想要一些不同于核心风格的东西。虽然您可以修改 bootstrap.css，但它可能会破坏一些东西，并且可能使更新到新版本变得非常痛苦和耗时。从一个“主题”网站下载意味着你必须等待 如果的创建者更新该主题，大 如果有时，对不对？

有些人建立自己的‘ custom.css’文件，这没问题，但是如果你使用‘ bootstrap-theme。Css’已经构建了很多东西，这使得你可以更快地滚动你自己的主题，而不会破坏 bootstrap.css 的核心。我不喜欢3D 按钮和渐变大部分时间，所以改变他们使用引导主题。CSS.添加边距或填充，改变半径到您的按钮，诸如此类..。


提交答案