Question

我显然很新，对新手问题不那么光鲜。我试图创建一个可以在我的网站中使用的常见CSS，但是正在使用Bootstrap。例如，我想使用Bootstrap的面板类。目前我们正在使用＆＃34; .panel-primary＆＃34;在几个地方上课。但是，如果我们决定使用不同的颜色，例如＆＃34; .panel-default＆＃34;我不想要去我的所有可能有几个面板的页面来进行更改。相反，我希望创建一个可以继承Bootstrap类的通用CSS类，这样我只有一个位置可以进行更改。

有人建议我考虑使用less或SAAS，从我已经看过的基础知识来看，我认为我需要的更少。

我正在使用ASP.Net MVC项目，因此我使用NuGet来安装＆＃34; dotless＆＃34;。然后我将我的css文件更改为site.less，看起来好像正在工作。现在我尝试使用扩展来做我想要的但是我显然遗漏了一些东西，因为CSS没有应用Bootstrap类。

这是我最初使用的Bootstrap课程。

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">
            Available Stations
        </h3>
    </div>
    <div class="panel-body">
        <div class="col-md-9">
            @Html.DropDownList("City", Model.CityList, new { @class = "form-control" })
        </div>
        @Html.Raw("&nbsp;")
        <input type=submit name=submit value="Set Station" class="btn btn-info">
    </div>
</div>

这是我尝试使用less并将其应用到我的页面。

.vtc-panel{
    &:extend(.panel);
    &:extend(.panel-primary);
}

<div class="vtc-panel">
    <div class="panel-heading">
        <h3 class="panel-title">
            Available Stations
        </h3>
    </div>
    <div class="panel-body">
        <div class="col-md-9">
            @Html.DropDownList("City", Model.CityList, new { @class = "form-control" })
        </div>
        @Html.Raw("&nbsp;")
        <input type=submit name=submit value="Set Station" class="btn btn-info">
    </div>
</div>

更新

以下是我尝试过的其他一些事情，但仍无法让它发挥作用。

首先我想也许它没有看到Bootstrap文件所以我在我的较少文件的顶部做了一个@import。这似乎包括Bootstrap，但我尝试对css类进行以下更改，但它仍未应用Bootstrap样式。

@import (inline) '../Content/bootstrap.min.css';

.vtc-panel:extend(.panel, .panel-primary){

}

Answer 1

确保已将Bootstrap文件包含为LESS文件，而不是CSS文件。

Answer 2

因此，经过一些更深入的挖掘，我终于得到了这个工作。我传递它，以便它有希望帮助别人。这假设您没有安装和设置。

首先需要做的是将Bootstrap文件更改为更少。将bootstrap.min.css重命名为bootstrap.min.less。这使引导程序通过LESS编译引擎。

然后在主LESS文件中导入引导程序文件。我把它放在我的site.less文件的顶部。

@import (inline) '../Content/bootstrap.less';

然后在我的site.less文件中添加了一个名为＆＃34; vtc-panel＆＃34;的类。和继承＆＃34;小组＆＃34;来自bootstrap的类。

.vtc-panel{
    .panel;
    .panel-primary;
}

如何在{less}中扩展Bootstrap类？

2 个答案: