Question

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

定制

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

将文件放在构建的BootsFaces / less目录中并进行调整   bs- *文件使用你的变量/ .less文件。

Bootswatch我可以下载variables.less，bootswatch.less，但在bootsfaces中有一些文件，例如alerts.less，badges.less，bsf.less。我不确定如何自定义主题。我完全不想改变主题。

更新

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

Answer 1

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

当然不是那么容易，实际上需要在做出一些改动之后建立库，这是如何：

克隆github存储库后，下载最喜欢的主题的bootswatch.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构建要求）并享受！

Answer 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>

<强> JS

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

如何更改靴面中的主题

2 个答案: