1

我用 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 站点我都会得到 boots bootstrap.min.css，bootstrap.css但是在 bootsfaces 源代码中我找到bsf.css并theme.css归档在目录中BootsFaces-OSP-master\BootsFaces\css。theme.css在BootsFaces-OSP-master\BootsFaces-OSP-master\BootsFaces\themes目录和目录BootsFaces.css中BootsFaces-OSP-master\BootsFaces\min，我需要用bootstrap.css和替换bootstrap.min.css

4

2 回答 2

2

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

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

  1. 克隆 github 仓库后，下载你喜欢的主题的 bootswatch.less 和 variables.less
  2. 将 variables.less 重命名为 bs-variables.less 并在 less 目录中使用 bootswatch.less 复制它

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

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

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

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

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

  5. 根据 bootswatch 主题自定义，其他文件可能需要您在步骤 3 中所做的更改，例如 bs-alert

  6. 现在使用 Gradle 构建库（阅读 Gradle 构建要求）并享受吧！

于 2015-08-25T19:46:57.747 回答
0

您可以提供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);
    });
});
于 2015-08-23T19:24:26.727 回答