Yuv*_*j P 174 html css twitter-bootstrap-3
从http://getbootstrap.com下载完整的bootstrap 3后,我注意到主题有一个单独的css文件.如何利用它？请解释？
我包含bootstrap-theme.css在我现有的bootstrap项目中,但输出没有区别.
wit*_*ess 380
下载Bootstrap 3.x后,您将获得bootstrap.css和bootstrap-theme.css(更不用说这些文件的缩小版本也存在).
bootstrap.css完全风格,随时可以使用,如果这是你的愿望.它可能有点简单,但它已经准备好了,它就在那里.
如果你不想,你不需要使用bootstrap-theme.css,事情就好了.
bootstrap-theme.css正是文件的名称正在尝试建议:它是一个创造性地被认为是"引导主题"的bootstrap主题.由于基础bootstrap.css已经应用了样式,因此文件的名称会让人感到困惑,因此,我认为这些样式是默认样式.但是根据Bootstrap文档的示例部分中有关此bootstrap-theme.css文件的内容,该结论显然是不正确的:
"加载可选的Bootstrap主题,以获得视觉上增强的体验."
以上引用可在http://getbootstrap.com/getting-started/#examples上找到,该缩略图链接到此示例页面http://getbootstrap.com/examples/theme/.这个想法是,bootstrap-theme.css是的引导主题,它是可选的.
关于BootSwatch.com的主题:这些主题没有像bootstrap-theme.css.BootSwatch主题是原始版本的修改版本bootstrap.css.所以,你绝对不应该同时使用BootSwatch和bootstrap-theme.css文件中的主题.
关于您自己的自定义主题:您可以选择bootstrap-theme.css在创建自己的主题时进行修改.这样做可以更容易地进行样式更改,而不会意外地破坏任何内置的Bootstrap优点.
jos*_*unt 90
有关css样式的示例,请查看:http://getbootstrap.com/examples/theme/
如果你想看看如何在没有 bootstrap-theme.css文件的情况下查看示例,打开浏览器开发人员工具并从示例的<head>中删除链接,然后你可以比较它.
我知道这是一个老问题,但发布它以防万一有人正在寻找一个如何看起来像我的例子.
更新
bootstrap.css =主要css框架(网格,基本样式等)
bootstrap-theme.css=扩展样式(3D按钮,渐变等).这个文件是可选的,根本不影响bootstrap的功能,它只增强了外观.
更新2
随着v3.2.0的发布,Bootstrap添加了一个选项来查看doc页面上的主题css.如果您转到其中一个文档页面(css,components,javascript),您应该会在侧面导航栏的底部看到一个"预览主题"链接,您可以使用该链接打开和关闭主题css.
小智 72
首先,bootstrap-theme.css它只不过是Bootstrap 3中的Bootstrap 2.x样式.如果你真的想要使用它,只需将它添加到ALONG中bootstrap.css(缩小版本也可以使用).
Thi*_*Guy 14
正如其他人所说,文件名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源中的variables.less文件替换为Bootswatch主题中的一个并构建它,并为您的Bootswatch主题创建一个bootstrap-theme.css文件.
构建Bootstrap可能听起来令人生畏,但它实际上非常简单:
完成.看,这很容易,不是吗？