Я ищу более разумный способ интеграции классов начальной загрузки в мой файл менее?

На данный момент я делаю, но у этого есть недостаток, заключающийся в том, что не каждый «подкласс» или связанный класс будет наследоваться для моего собственного контроля:

.BWForm_form-control {
    .form-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 */

Чтобы гарантировать полную функциональность начальной загрузки для моего личного контроля. Но я уверен, что это не умная, стабильная душа, это просто исправление и временное решение.

Но каков наилучший подход к созданию персональных элементов управления, унаследованных от начальной загрузки (или даже от другого файла CSS / Less) со всей функциональностью?

Некоторые общие сведения для моего проекта: Важные пакеты NuGet:

Bootstrap (v 3.0.0) -> импортировано на главной страницеBootstrap.Less (v 2.3.2) -> эти файлы, которые я использую для импорта в "Site.less")без точек (v 1.4.0.0)html5shiv (v 0.1.0.8)Modernizr (v 2.6.2) -> импортировано на главной страницеОтветить JS (v 1.2.0)

На самом деле я не использую этот пакет "Bootstrap.Less (v 2.3.2)" - nuget, я просто взял файл bootstrap.css и переименовал его в bootstrap.less "и использовал его для наследования от этого нового файла less.

Потому что у меня все еще есть некоторые проблемы с этим:

Ссылка 1Ссылка 2Ссылка 3

Visual Studio 2013

MVC5

С наилучшими пожеланиями Мартин