Question

我建立了一个具有不错的导航栏和布局的引导站点。我想利用asp.net主题来更改应用程序的外观。

问题在于，引导程序中的许多类不一定是语义类的，因此很难将css应用于具有某些目的的html片段，否则该目的可以通过语义上命名的类来识别。

使用引导导航栏很容易看出这一点，它需要navbar-light或navbar-dark类，它们控制导航栏中各种元素的文本颜色。

如果我想要一个带有深色背景/浅色文本的主题，而又想要一个带有浅色背景/深色文本的主题，则很难在本地进行引导，因为这些类需要在标记中指定。

我只是不使用这些类，而是复制引导scss的这一部分，并制作出与主题更兼容的东西，还是有更好的方法？

这里是一个例子：

<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-0 flex-wrap pt-1 pb-1 shadow-none ">
    <div class="d-flex flex-nowrap flex-fill minw-0">
        <a class="app-link navbar-brand text-truncate mr-auto mt-auto mb-auto d-flex align-items-center" href="../../../"/>
        <img class="app-logo mt-auto mb-auto" src="../../../App_Themes/IHClean/img/app/applogo.svg">
            <span class="text-truncate font-weight-normal">Non-semantic Css</span>
        </a>

        <button class="navbar-toggler my-1 ml-auto bg-dark-heavy" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"/>
        </button>
    </div>

    <div class="collapse navbar-collapse flex-wrap d-md-inline-flex justify-content-end">
        <div class="d-md-inline-flex">
            <ul class="navbar-nav nav">
                <li class="active nav-item">
                    <a href="../../../" class="nav-link icon-mmnu-home">Home</a>
                </li>
                <li class="nav-item">
                    <a href="../../../Samples" class="nav-link icon-mmnu-info">Samples

                        <span class="badge badge-balloon badge-light">
                            <span class="d-xs-inline d-sm-none text-primary">XS</span>
                            <span class="d-none d-md-none d-sm-inline text-success">SM</span>
                            <span class="d-none d-md-inline d-lg-none text-danger">MD</span>
                            <span class="d-none d-lg-inline d-xl-none text-warning">LG</span>
                            <span class="d-none d-xl-inline text-dark">XL</span>
                        </span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="d-md-inline-flex">
        </div>
    </div>
</nav>

navbar-dark类需要浅背景色，否则文本将不会显示。如果我希望能够在Web窗体应用程序中使用ASP.Net主题，则由于使用了navbar-dark，我只能使用主题颜色。我不能轻易地改变黑暗，仍然保留语义。也许我只需要放弃语义，并覆盖导航栏的深色变量即可。

ASP.Net引导程序和App_Themes

0 个答案: