Html 如何在 bootstrap 3 中使用 bootstrap-theme.css？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18327543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use bootstrap-theme.css with bootstrap 3?
提问by Yuvaraj P
After downloading a complete pack of bootstrap 3 from http://getbootstrap.com, I noticed that there is a separate css file for theme. How to make use of it? Please explain?
从http://getbootstrap.com下载完整的 bootstrap 3 包后，我注意到主题有一个单独的 css 文件。如何利用它？请解释？
I included bootstrap-theme.cssin my existing bootstrap project, but there is no difference in output.
我包含bootstrap-theme.css在我现有的引导项目中，但输出没有区别。
回答by witttness
Upon downloading Bootstrap 3.x, you'll get bootstrap.cssand bootstrap-theme.css(not to mention the minified versions of these files that are also present).
下载 Bootstrap 3.x 后，您将获得bootstrap.css和bootstrap-theme.css（更不用说这些文件的缩小版本也存在）。
bootstrap.css
bootstrap.css
bootstrap.cssis completely styled and ready to use, if such is your desire. It is perhaps a bit plain but it is ready and it is there.
bootstrap.css如果这是您的愿望，则完全样式化并随时可用。它可能有点简单，但它已经准备好并且就在那里。
You do not need to use bootstrap-theme.css if you don't want to and things will be just fine.
如果你不想，你不需要使用 bootstrap-theme.css，一切都会好起来的。
bootstrap-theme.css
bootstrap-theme.css
bootstrap-theme.cssis just what the name of the file is trying to suggest: it is a theme for bootstrap that is creatively considered 'THE bootstrap theme'. The name of the file confuses things just a bit since the base bootstrap.cssalready has styling applied and I, for one, would consider those styles to be the default. But that conclusion is apparently incorrect in light of things said in the Bootstrap documentation's examples section in regard to this bootstrap-theme.cssfile:
bootstrap-theme.css正是文件的名称试图暗示的：它是引导程序的主题，被创造性地认为是“引导程序主题”。文件的名称使事情有点混乱，因为基础bootstrap.css已经应用了样式，例如，我会将这些样式视为默认样式。但是，鉴于 Bootstrap 文档示例部分中关于此bootstrap-theme.css文件的内容，该结论显然是不正确的：
"Load the optional Bootstrap theme for a visually enhanced experience."
“加载可选的 Bootstrap 主题以获得视觉上增强的体验。”
The above quote is found here http://getbootstrap.com/getting-started/#exampleson a thumbnail that links to this example page http://getbootstrap.com/examples/theme/. The idea is that bootstrap-theme.cssis THEbootstrap theme AND it's optional.
上面的引用可以在这里找到http://getbootstrap.com/getting-started/#examples在链接到此示例页面http://getbootstrap.com/examples/theme/的缩略图上。这个想法是，bootstrap-theme.css是的引导主题，它是可选的。
Themes at BootSwatch.com
BootSwatch.com 上的主题
About the themes at BootSwatch.com: These themes are not implemented like bootstrap-theme.css. The BootSwatch themes are modified versions of the original bootstrap.css. So, you should definitely NOT use a theme from BootSwatch AND the bootstrap-theme.cssfile at the same time.
关于 BootSwatch.com 上的主题：这些主题不像bootstrap-theme.css. BootSwatch 主题是原始bootstrap.css. 所以，你绝对不应该同时使用 BootSwatch 和bootstrap-theme.css文件中的主题。
Custom Theme
自定义主题
About Your Own Custom Theme: You might choose to modify bootstrap-theme.csswhen creating your own theme. Doing so may make it easier to make styling changes without accidentally breaking any of that built-in Bootstrap goodness.
关于您自己的自定义主题：您可以bootstrap-theme.css在创建自己的主题时选择进行修改。这样做可以更轻松地进行样式更改，而不会意外破坏任何内置的 Bootstrap 优点。
回答by joshhunt
For an example of the css styles have a look at: http://getbootstrap.com/examples/theme/
有关 css 样式的示例，请查看：http: //getbootstrap.com/examples/theme/
If you want to see how the example looks withoutthe bootstrap-theme.css file open up your browser developer tools and delete the link from the <head> of the example and then you can compare it.
如果您想查看没有bootstrap-theme.css 文件的示例的外观，请打开您的浏览器开发人员工具并从示例的 <head> 中删除链接，然后您可以进行比较。
I know this is an old question but posted it just in case anyone is looking for an example of how it looks like I was.
我知道这是一个老问题，但发布它以防万一有人正在寻找一个例子来说明我的样子。
Update
更新
bootstrap.css= main css framework (grids, basic styles, etc)
bootstrap.css= 主要 css 框架（网格、基本样式等）
bootstrap-theme.css= extended styling (3D buttons, gradients etc). This file is optional and does not effect the functionality of bootstrap at all, it only enhances the appearance.
bootstrap-theme.css= 扩展样式（3D 按钮、渐变等）。此文件是可选的，完全不影响引导程序的功能，它只会增强外观。
Update 2
更新 2
With the release of v3.2.0 Bootstrap have added an option to view the theme css on the doc pages. If you go to one of the doc pages (css, components, javascript) you should see a "Preview theme" link at the bottom of the side nav which you can use to turn the theme css on and off.
随着 v3.2.0 的发布，Bootstrap 添加了在文档页面上查看主题 css 的选项。如果您转到其中一个文档页面（css、components、javascript），您应该会在侧面导航底部看到一个“预览主题”链接，您可以使用它来打开和关闭主题 css。
回答by androphone
First, bootstrap-theme.cssis nothing else but equivalent of Bootstrap 2.x style in Bootstrap 3. If you really want to use it, just add it ALONG with bootstrap.css(minified version will work too).
首先，bootstrap-theme.css除了 Bootstrap 3 中的 Bootstrap 2.x 样式之外别无他物。如果你真的想使用它，只需添加它bootstrap.css（缩小版也可以）。
回答by Jowen
Bootstrap-theme.css is the additional CSS file, which is optional for you to use. It gives 3D effects on the buttons and some other elements.
Bootstrap-theme.css 是附加的 CSS 文件，您可以选择使用它。它为按钮和其他一些元素提供 3D 效果。
回答by ThisGuy
As stated by others, the filename bootstrap-theme.cssis very confusing. I would have chosen something like bootstrap-3d.cssor bootstrap-fancy.csswhich would be more descriptive of what it actually does. What the world sees as a "Bootstrap Theme" is a thing you can get from BootSwatch which is a totally different beast.
正如其他人所说，文件名bootstrap-theme.css非常混乱。我会选择像bootstrap-3d.css或bootstrap-fancy.css这样的东西，它们会更能描述它的实际作用。世界所看到的“Bootstrap 主题”是您可以从 BootSwatch 获得的东西，这是一个完全不同的野兽。
With that said, the effects are quite nice - gradients and shadows and such. Unfortunately this file will wreak havoc on BootSwatch Themes, so I decided to dig into what it would take to make it play nice with them.
话虽如此，效果非常好 - 渐变和阴影等。不幸的是，这个文件会对 BootSwatch 主题造成严重破坏，所以我决定深入研究如何让它与它们配合得很好。
LESS
较少的
Bootstrap-theme.css is generated from the theme.lessfile in the Bootstrap source. The affected elements are (as of Bootstrap v3.2.0):
Bootstrap-theme.css 是从Bootstrap 源中的theme.less文件生成的。受影响的元素是（从 Bootstrap v3.2.0 开始）：
- List items
- Buttons
- Images
- Dropdowns
- Navbars
- Alerts
- Progress bars
- List Groups
- Panels
- Wells
- 列出项目
- 纽扣
- 图片
- 下拉菜单
- 导航栏
- 警报
- 进度条
- 列出组
- 面板
- 威尔斯
The theme.less file depends on:
theme.less 文件取决于：
@import "variables.less";
@import "mixins.less";
The code uses colors defined in variables.less in several places, for example:
代码在几个地方使用了 variables.less 中定义的颜色，例如：
// Give the progress background some depth
.progress {
#gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}
This why bootstrap-theme.css totally messes up BootSwatch Themes. The good news is that BootSwatch Themes are also created from variables.less files, so you can simply build a bootstrap-theme.css for your BootSwatch Theme.
这就是 bootstrap-theme.css 完全搞砸 BootSwatch 主题的原因。好消息是 BootSwatch 主题也是从 variables.less 文件创建的，因此您可以简单地为您的 BootSwatch 主题构建一个 bootstrap-theme.css。
Building bootstrap-theme.css
构建 bootstrap-theme.css
The right way to do it is to update the Theme build process, but here here is the quick and dirty way. Replace the variables.less file in the Bootstrap source with the one from your Bootswatch Theme and build it and voila you have a bootstrap-theme.css file for your Bootswatch Theme.
正确的方法是更新主题构建过程，但这里是快速而肮脏的方法。将 Bootstrap 源中的 variables.less 文件替换为您的 Bootswatch 主题中的文件并构建它，瞧您有一个用于您的 Bootswatch 主题的 bootstrap-theme.css 文件。
Building Bootstrap itself
构建 Bootstrap 本身
Building Bootstrap may sound daunting, but it is actually very simple:
构建 Bootstrap 听起来可能令人生畏，但实际上非常简单：
- Download the Bootstrap source code
- Download and install NodeJS
- Open a command prompt and navigate to the bootstrap source folder. Type "npm install". This will add the "node_modules" folder to the project and download all the Node stuff you need.
- Install grunt globally (the -g option) by typing "npm install -g grunt-cli"
- Rename the "dist" folder to "dist-orig" then rebuild it by typing "grunt dist". Now check that there is a new "dist" folder which contains all you need to use your custom Bootstrap build.
- 下载 Bootstrap 源代码
- 下载并安装 NodeJS
- 打开命令提示符并导航到引导源文件夹。输入“npm 安装”。这会将“node_modules”文件夹添加到项目中并下载您需要的所有节点内容。
- 通过键入“npm install -g grunt-cli”全局安装 grunt（-g 选项）
- 将“dist”文件夹重命名为“dist-orig”，然后通过键入“grunt dist”来重建它。现在检查是否有一个新的“dist”文件夹，其中包含使用自定义 Bootstrap 构建所需的所有内容。
Done. See, that was easy, wasn't it?
完毕。看，这很容易，不是吗？
回答by user1946683
I know this post is kinda old but...
我知道这篇文章有点旧，但是...
As 'witttness' pointed out.
正如“智慧”所指出的那样。
About Your Own Custom ThemeYou might choose to modify bootstrap-theme.css when creating your own theme. Doing so may make it easier to make styling changes without accidentally breaking any of that built-in Bootstrap goodness.
关于您自己的自定义主题您可以在创建自己的主题时选择修改 bootstrap-theme.css。这样做可以更轻松地进行样式更改，而不会意外破坏任何内置的 Bootstrap 优点。
I see it as Bootstrap has seen over the years that everyone wants something a bit different than the core styles. While you could modify bootstrap.css it might break things and it could make updating to a newer version a real pain and time consuming. Downloading from a 'theme' site means you have to wait on ifthat creator updates that theme, big ifsometimes, right?
我认为这是 Bootstrap 多年来看到的，每个人都想要与核心风格略有不同的东西。虽然您可以修改 bootstrap.css，但它可能会破坏某些内容，并且可能会使更新到新版本变得非常痛苦和耗时。从“主题”的网站意味着你必须等待下载，如果是创作者的更新，主题，大的，如果有时候，对不对？
Some build their own 'custom.css' file and that's ok, but if you use 'bootstrap-theme.css' a lot of stuff is already built and this allows you to roll your own theme faster 'without' disrupting the core of bootstrap.css. I for one don't like the 3D buttons and gradients most of the time, so change them using bootstrap-theme.css. Add margins or padding, change the radius to your buttons, and so on...
有些构建自己的“custom.css”文件，这没问题，但是如果您使用“bootstrap-theme.css”，则已经构建了很多东西，这使您可以更快地滚动自己的主题，而不会“破坏”引导程序的核心.css。我大部分时间都不喜欢 3D 按钮和渐变，所以使用 bootstrap-theme.css 更改它们。添加边距或填充，更改按钮的半径，等等......
