一个更聪明的方式来整合引导(或甚至从另一个较少,CSS文件)类到我的较少的文件?(继承) [英] A smarter way for integrating bootstrap(or even from another less,css file) classes into my less file ?(Inheritance)
问题描述
我正在寻找一种更聪明的方式将bootstrap类集成到我的less文件中。
I am looking for a smarter way for integrating bootstrap classes into my less file ?
我现在做的是,但是这有一个缺点, 子类或连接类将继承为我自己的控制:
What I do at the moment is ,but this has the drawback that not every "subclass" or connected class is going to be inherit for my own control:
.BWForm_form-control {
.form-control;
}
我解决了这个问题(连接类)我从bootstrap和adjust它对我的控制:
I solved that issue( connected classes) I took the classes from bootstrap and adjust it to my control:
/*#region ".BWForm_form-control" addition from bootstrap */
.BWForm_form-control:-moz-placeholder {
color: #999999;
}
.BWForm_form-control::-moz-placeholder {
color: #999999;
}
.BWForm_form-control:-ms-input-placeholder {
color: #999999;
}
.BWForm_form-control::-webkit-input-placeholder {
color: #999999;
}
.BWForm_form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.BWForm_form-control[disabled],
.BWForm_form-control[readonly],
fieldset[disabled] .BWForm_form-control {
cursor: not-allowed;
background-color: #eeeeee;
}
textarea.BWForm_form-control {
height: auto;
}
.has-warning .BWForm_form-control {
border-color: #c09853;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .BWForm_form-control:focus {
border-color: #a47e3c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
}
.has-error .BWForm_form-control {
border-color: #b94a48;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .BWForm_form-control:focus {
border-color: #953b39;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}
.has-success .BWForm_form-control {
border-color: #468847;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .BWForm_form-control:focus {
border-color: #356635;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
}
@media (min-width: 768px) {
.form-inline .BWForm_form-control {
display: inline-block;
}
}
.input-group .BWForm_form-control {
width: 100%;
margin-bottom: 0;
}
.input-group-lg > .BWForm_form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
height: 45px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-group-lg > .form-control,
select.input-group-lg > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn {
height: 45px;
line-height: 45px;
}
textarea.input-group-lg > .BWForm_form-control,
textarea.input-group-lg > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn {
height: auto;
}
.input-group-sm > .BWForm_form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-group-sm > .BWForm_form-control,
select.input-group-sm > .input-group-addon,
select.input-group-sm > .input-group-btn > .btn {
height: 30px;
line-height: 30px;
}
textarea.input-group-sm > .BWForm_form-control,
textarea.input-group-sm > .input-group-addon,
textarea.input-group-sm > .input-group-btn > .btn {
height: auto;
}
.input-group-addon,
.input-group-btn,
.input-group .BWForm_form-control {
display: table-cell;
}
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .BWForm_form-control:not(:first-child):not(:last-child) {
border-radius: 0;
}
.input-group .BWForm_form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group .BWForm_form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
@media (min-width: 768px) {
.navbar-form .BWForm_form-control {
display: inline-block;
}
}
/*#endregion */
保证我的个人控制引导的完整功能。但是我相信这不是一个聪明,稳定的灵魂,它只是一个修复和临时的解决方案。
To guarantee the full functionality of bootstrap for my personal controls. But I am sure that is not a clever, stable soultion it's just a fix and temporary solution.
但是什么是最好的方法来创建继承自bootstrap甚至从另一个css / less文件)所有的功能?
But what is the best approach to create personal controls inherited from bootstrap(or even from another css/less file) whith all the functionality ?
一些背景信息为我的项目:
重要NuGet Pakages:
Some Background informations for my project: Important NuGet Pakages:
- Bootstrap(v 3.0.0) - >导入母版页
- Bootstrap.Less(v 2.3.2) >这些文件用于
Site.less中的impor - dotless(v 1.4.0.0)
- html5shiv 0.1.0.8)
- Modernizr(v 2.6.2) - >导入母版页
- 回应JS(v 1.2.0) li>
- Bootstrap (v 3.0.0 ) -> imported in the master page
- Bootstrap.Less (v 2.3.2 ) ->these files I use for impor in "Site.less")
- dotless (v 1.4.0.0)
- html5shiv (v 0.1.0.8)
- Modernizr (v 2.6.2) -> imported in the master page
- Respond JS (v 1.2.0)
其实我没有使用这个Bootstrap.Less(v 2.3.2) - nuget包,我只是我的bootstrap.css和重命名为bootstrap.less,并使用它继承这个新的less文件。
Actually I am not using this "Bootstrap.Less (v 2.3.2 )"-nuget package, i just took my bootstrap.css and renamed it to bootstrap.less" and used it to inherit from that new less-file.
因为我仍然有一些问题whith:
Because I still have some issues whith it:
- Link 1
- Link 2
- Link 3
- MVC5
Best regards Martin
Best regards Martin
推荐答案
您可以使用 extend :
.BWForm_form-control:extend(.form-control all);
这篇关于一个更聪明的方式来整合引导(或甚至从另一个较少,CSS文件)类到我的较少的文件?(继承)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!