时间戳

首页 > 解决方案 > 在不同的视图中在引导程序中获取不同的主题

sass - 在不同的视图中在引导程序中获取不同的主题

问题描述

我想用引导程序为页面设置主题，但在某些页面中，我只想为按钮设置主题并保持输入字段不变，而在其他页面中，我想以相反的方式进行，只为输入字段设置主题而不是按钮。

我希望能够写出类似的东西

在第 1 页中：

@import input-theming.css ... 使用按钮的默认样式

在第 2 页：

@import button-theming.css ... 对输入使用默认样式

我已经考虑过在组件中模块化我的custom.scss以便我在每个组件中为不同的部分设置主题，例如输入、按钮、表格等。但是我必须为每个组件创建一个 custom.scss 文件那些看起来很复杂的模块的组合。

我想要的是一种恢复引导程序某些部分的默认行为的方法，尽管我在 custom.scss 中对它们进行了不同的主题化。如果不生成仅以引导程序的不同部分为主题的不同 custom.scss 文件，这是否可能？

标签： sassbootstrap-4modularization

解决方案

SASS 允许您嵌套导入。因此，您可以为每个“主题”（自定义组合）使用父类，然后将适当的主题 CSS 类添加到每个页面的 HTML 父容器（html、body、.container 等）。这允许您将所有 SASS 覆盖/更改保存在一个custom.scss文件中。

@import "bootstrap/functions";
@import "bootstrap/mixins";
@import "bootstrap/variables";

.theme-1 {
    /* change the button style */
    .btn-primary {
        @include button-variant(green, green);
    }
}

.theme-2 {
    /* change the input style */
    $input-bg: #ddd;
    @import "bootstrap/forms"
}

@import "bootstrap"

HTML 第 1 页（自定义按钮）

<body class="theme-1">    
    <div class="container py-2">
        <div class="row">
            <div class="col">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Username">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="button" id="addon">Button</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

HTML 页 2（自定义输入）

<body class="theme-2">    
    <div class="container py-2">
        <div class="row">
            <div class="col">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Username">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="button" id="addon">Button</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

演示

推荐阅读