如何更改bootsfaces中的主题

Question

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

Customization

Until there is a new version of the customizer, you can still customize the look and feel taking advantage of the build system. There are many Bootstrap customizers on the net, for example Bootswatch . What you need is a file with the variables to customize the build. Some customizers will provide you a .less file as well.

Put the files in the BootsFaces/less directory of the build and tweak the bs-* files to use your variables / .less file.

Bootswatch 我可以下载variables.less、bootswatch.less，但是bootsfaces里面有alerts.less、badges.less、bsf.less等文件。我不确定如何自定义主题。我完全迷失了尝试更改主题。

更新

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

Answer 1

您可以给 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>

JS

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

Answer 2

@Karthik BootsFaces 团队仍在努力在构建中获取 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 构建要求）并享受！

如何更改bootsfaces中的主题

How to change themes in bootsfaces

bootsfaces