Ich suche nach einer intelligenteren Möglichkeit, Bootstrap-Klassen in meine less-Datei zu integrieren.

Was ich im Moment mache, ist, aber dies hat den Nachteil, dass nicht jede "Unterklasse" oder verbundene Klasse für meine eigene Kontrolle geerbt wird:

.BWForm_form-control {
    .form-control;
}

Ich habe dieses Problem behoben (verbundene Klassen). Ich habe die Klassen von bootstrap genommen und an meine Kontrolle angepasst:

  /*#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 */

Um die volle Funktionalität von Bootstrap für meine persönlichen Steuerelemente zu gewährleisten. Aber ich bin mir sicher, dass dies keine clevere, stabile Lösung ist, sondern nur eine vorübergehende Lösung.

Aber was ist der beste Ansatz, um persönliche Steuerelemente zu erstellen, die von Bootstrap (oder sogar von einer anderen CSS / Less-Datei) mit allen Funktionen geerbt wurden?

Einige Hintergrundinformationen zu meinem Projekt: Wichtige NuGet-Pakete:

Bootstrap (v 3.0.0) -> in die Masterseite importiertBootstrap.Less (v 2.3.2) -> diese Dateien verwende ich für den Import in "Site.less")Punktlos (v 1.4.0.0)html5shiv (v 0.1.0.8)Modernizr (v 2.6.2) -> in die Masterseite importiertAntworte JS (v 1.2.0)

Eigentlich verwende ich dieses "Bootstrap.Less (v 2.3.2)" - Nuget-Paket nicht, ich habe nur meine bootstrap.css genommen und in bootstrap.less umbenannt und sie verwendet, um von dieser neuen less-Datei zu erben.

Weil ich noch ein paar Probleme damit habe:

Link 1Link 2Link 3

Visual Studio 2013

MVC5

Viele Grüße Martin