如何在 bootsfaces 中更改主题答案

【问题标题】：How to change themes in bootsfaces如何在 bootsfaces 中更改主题
【发布时间】：2015-08-23 19:16:43
【问题描述】：

我已经使用 BootsFaces 创建了 webapp 应用程序。现在我想更改当前使用的主题。我已经克隆了 git 存储库并尝试通过按照下面提供的文档从 bootswatch 下载主题来更改主题。

定制

在定制器有新版本之前，您仍然可以利用构建系统自定义外观。网上有很多 Bootstrap 定制器，例如靴子。您需要的是一个包含要自定义的变量的文件构建。一些定制器也会为您提供一个 .less 文件。

将文件放在构建和调整的 BootsFaces/less 目录中 bs-* 文件以使用您的变量/.less 文件。

Bootswatch 我可以下载 variables.less、bootswatch.less，但在 bootsfaces 中有诸如 alerts.less、badges.less、bsf.less 之类的文件。我不确定如何自定义主题。我在尝试更改主题时完全迷失了方向。

更新

这正是问题所在；从 bootswatch 或任何 Bootstrap 站点我会得到 boots bootstrap.min.css 和 bootstrap.css，但是在 bootsfaces 源代码中，我在目录 BootsFaces-OSP-master\BootsFaces\css 中找到 bsf.css 和 theme.css 文件。和theme.css 在BootsFaces-OSP-master\BootsFaces-OSP-master\BootsFaces\themes 目录和BootsFaces.css 在BootsFaces-OSP-master\BootsFaces\min 目录中我需要替换为bootstrap.css 和bootstrap.min.css

【问题讨论】：

您必须将 *.less 文件编译为 *.css 文件。但我想有一种更简单的方法：Bootswatch 还允许您直接下载 CSS 文件（至少在我检查的一个示例中）。
@StephanRauh 可以多解释一下，如何将 *.less 编译为 *.css，在 git 源代码中我找到了 .less 和 *.css 文件
首先，我希望你不需要编译LESS文件，因为已经有一组预编译的CSS文件。但是，如果您需要，或者如果您愿意，请看这里：getbootstrap.com/getting-started/#grunt 和这里：lesscss.org。您必须安装 node.js 和 Grunt。那是 30 分钟的事情（除非您开始思考而不是逐字遵循说明:)）。
更新问题以提高可读性
BootsFaces 默认主题是theme.css 文件。您必须在 web.xml 中手动激活它才能使用它。因此，理论上，将 bootstrap.min.css 手动包含到每个 JSF 页面就足够了。或者，您可以包含 bootstrap.css 文件 - 它速度较慢，但可以被人类读取（即您:)）。

标签： bootsfaces

【解决方案1】：

@Karthik BootsFaces 团队仍在努力在 Build 中获取 Bootswatch 主题，因此我们可以获得多种风格的 BootsFaces 库。

当然不是那么容易，实际上需要在进行一些更改后构建库，方法如下：

克隆 github 存储库后，下载您喜欢的主题的 bootswatch.less 和 variables.less
将 variables.less 重命名为 bs-variables.less 并用 bootswatch.less 复制到 less 目录中

编辑 bs-core.less 以导入 bs-variables.less 文件以覆盖原始变量

// Core variables
@import "variables.less";
// Custom Variables override
@import "bs-variables.less";

编辑 bs-theme.less 以导入 bs-variables.less 和 bootswatch.less 以覆盖原始变量并将更改应用于主题

// Core variables
@import "variables.less";
@import "bs-variables.less";

@import "theme.less";
@import "bootswatch.less";

根据 bootswatch 主题自定义，其他文件可能需要您在步骤 3 中所做的更改，例如bs-警报
现在使用 Gradle 构建库（阅读 Gradle 构建要求），尽情享受吧！

【讨论】：

是的，我会按照这个步骤而不是添加 bootstrap.min.css，因为我发现复制了重复的主题......
更新：v0.8.0 添加了 Bootswatch 主题支持see Themes section

【解决方案2】：

您可以给 link 一个 id 并在特定事件上将 href 属性更改为您想要的 css 文件。

例子：

HTML

// Inside head of document
<link id="currentCSS" rel="stylesheet" type="text/css" href="">


<select id="cssSelector" class="form-control">
    <option value="https://bootswatch.com/cerulean/bootstrap.min.css">Cerulean</option>
    <option value="https://bootswatch.com/cosmo/bootstrap.min.css">Cosmo</option>
    <option value="https://bootswatch.com/cyborg/bootstrap.min.css">Cyborg</option>
</select>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

$(function () {
    $('#cssSelector').on('change', function(event) {
        var css = $(this).val();
        $('#currentCSS').attr('href', css);
    });
});

【讨论】：