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

时间：2013-08-20 05:27:17

标签： html css twitter-bootstrap-3

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

我在现有的bootstrap项目中包含bootstrap-theme.css，但输出没有差异。

6 个答案:

答案 0 :(得分：380)

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

bootstrap.css

bootstrap.css完全风格化，随时可以使用，如果您愿意的话。它可能有点简单，但它已经准备就绪，它就在那里。

  

如果你不想，你不需要使用bootstrap-theme.css。事情会很好。

自举-theme.css

bootstrap-theme.css正是该文件的名称试图建议的内容：它是一个创造性地考虑的引导程序主题＆＃39;引导主题＆＃39;。由于基础bootstrap.css已经应用了样式，因此文件的名称会使事情稍微混淆，因此，我认为这些样式是默认样式。但是根据Bootstrap文档的示例部分中有关此bootstrap-theme.css文件的内容，这个结论显然是不正确的：

  

＆＃34;加载可选的Bootstrap主题，以获得视觉上增强的体验。＆＃34;

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

BootSwatch.com主题

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

自定义主题

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

答案 1 :(得分：90)

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

如果你想看看示例如何看没有 bootstrap-theme.css文件打开浏览器开发人员工具并从＆lt; head＆gt;中删除链接例子然后你可以比较它。

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

<强>更新

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

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

更新2

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

答案 2 :(得分：72)

首先，bootstrap-theme.css只不过是Bootstrap 3中的Bootstrap 2.x样式。如果你真的想要使用它，只需将它添加到bootstrap.css（缩小版本也可以）

答案 3 :(得分：31)

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

答案 4 :(得分：14)

正如其他人所说，文件名 bootstrap-theme.css 非常令人困惑。我会选择像 bootstrap-3d.css 或 bootstrap-fancy.css 之类的东西，它可以更直观地描述它的实际功能。世界所谓的“Bootstrap主题”是你可以从BootSwatch获得的东西，这是一个完全不同的野兽。

据说，效果非常好 - 渐变和阴影等。不幸的是，这个文件会对BootSwatch主题造成严重破坏，所以我决定深入了解它可以让它与它们玩得很好。

LESS

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

  • 列出项目
  • 按钮
  • 图片
  • Dropdowns的
  • 导航栏
  • 警报
  • 进度条
  • 列出群组
  • 面板
  • 井

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

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

    6. 完成。看，这很简单，不是吗？

答案 5 :(得分：2)

我知道这篇文章有点陈旧但是......

正如'诙谐'指出的那样。

  

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

我认为这是多年来Bootstrap所看到的每个人都想要的东西与核心风格有点不同。虽然你可以修改bootstrap.css，但它可能会破坏一些东西，它可能会使更新到新版本真正的痛苦和耗时。从“主题”网站下载意味着你必须等待如果该创作者更新该主题，有时候 ，对吗？

有些人建立了他们自己的'custom.css'文件，这没关系，但是如果你使用'bootstrap-theme.css'已经构建了许多东西，这可以让你更快地滚动你自己的主题，而不会中断bootstrap.css的核心。我大多数时候不喜欢3D按钮和渐变，所以使用bootstrap-theme.css更改它们。添加边距或填充，将半径更改为按钮，等等 ...

相关问题
最新问题