• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

mehrere CSS Klassen in einer Klasse zusammenfassen

LudwigM

Mitglied
Hi,
Kann man mehrere CSS Klassen in einer Klasse zusammenfassen, sodass eine Definition nur einmal vorgenommen wird, aber mehrfach verwendet werden kann?

Z.B. habe ich diesen Code für ein Label-Element. Dieselben Klassen sollen weiteren Label-Elementen zugewiesen werden. Wäre also gut, wenn man stattdessen allen Labels die Klasse "clsLabel" zuweist, und für diese Klasse die bootstrap-Klassen definiert.

HTML:
<div class="col-12 col-sm-auto d-flex justify-content-md-end">
    <label for="datDate" class="form-label mb-0 d-flex justify-content-md-end" style="width:130px" >Datum</label>
</div>
 
Werbung:
Einer der großen Nachteile von Bootstrap, der HTML-Code wird reichlich aufgebläht. Du könntest hergehen, und alle Classes zusammen suchen und in eine eigene Klasse schreiben, aber ob das unbedingt schön ist ...
 
Was Du beschreibst kann man teilweise mit Variablen und/oder LESS lösen - aber nicht mit Bootstrap alleine.
 
Werbung:
Also ich meinte sowas wie:

CSS:
<style>
.meineKlasseDiv {
    .col-12;
    .col-sm-auto;
    .d-flex;
    .justify-content-md-end
}

.meineKlasseLabel {
    .form-label;
    .mb-0;
    .d-flex;
    .justify-contend-md-end
}
</style>

// dadurch wird der Code aus Post#1 zu:
<div class="meineKlasse">
    <label for="datDate" class="meineKlasseLabel" style="width:130px" >Datum</label>
</div>

Ist das machbar?
 
Auch in Bootstrap kannst du eigene Klassen erstellen, dort dann die Inhalte der von dir gewünschten Klassen reinkopieren und die dann verwenden.
 
Werbung:
Zurück
Oben