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


174

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

我已包含bootstrap-theme.css在现有的引导程序项目中,但是输出没有差异。

Answers:


382

下载Bootstrap 3.x后,您将获得bootstrap.cssbootstrap-theme.css(更不用说这些文件的缩小版本了)。

bootstrap.css

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

如果您不需要,则不需要使用bootstrap-theme.css,这样就可以了。

bootstrap-theme.css

bootstrap-theme.css正是文件名试图建议的名称:它是引导程序的主题,被创造性地认为是“ THE bootstrap theme”。该文件的名称使事情有些混乱,因为该库bootstrap.css已经应用了样式,我想将这些样式作为默认样式。但是,根据Bootstrap文档的示例部分中有关此bootstrap-theme.css文件的内容,该结论显然是错误的:

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

以上报价位于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优点。


68
这应该是选定的答案。
帕特里克·库伦

11
关于Bootswatch.com的通知非常有帮助。谢谢。
Daniel Kmak 2014年

@Daniel ...但应该根据twbs / bootstrap新方向进行重构,以使其主题客户具有稳定,一致的功能
Luca G. Soave 2015年

bootstrap-theme.css文件不是一个替代品,也就是说,bootstrap.css以一种可以将bootstrap用于所有相关样式的方式进行设置。Bootstrap-theme.css可以覆盖样式,而无需更改基本css文件。这里的重要性在于,如果您升级到引导程序XX,则可以替换基本的CSS文件,而不必担心丢失所有自定义设置。您可能需要调整主题文件,但这并不是很多问题。也许你在说什么。
雅克

2
最令人困惑的是,如果您在引导站点(getbootstrap.com/customize)上使用“定制”功能,则会将您的自定义置于bootstrap.css中,而不是主题文件中。该页面也没有任何选项可以修改与主题(tm)相关的任何内容。据我所知,主题文件仅在整个位置添加了一堆渐变和阴影,而其他功能却很少。
C.List,
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.