• 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>
 

m.scatello

Senior HTML'ler
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 ...
 

threadi

Moderator
Teammitglied
Moderator
Was Du beschreibst kann man teilweise mit Variablen und/oder LESS lösen - aber nicht mit Bootstrap alleine.
 

LudwigM

Mitglied
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?
 

MrMurphy

Senior HTML'ler
Auch in Bootstrap kannst du eigene Klassen erstellen, dort dann die Inhalte der von dir gewünschten Klassen reinkopieren und die dann verwenden.
 
Werbung:

Neueste Beiträge

Oben