Wussten Sie, dass Bootstrap mit einer Reihe von CSS-Hilfsklassen ausgestattet ist, die Ihnen bei Ihren Ansichten helfen sollen? Sind Sie daran interessiert, Ihre Themenaktivitäten zu optimieren und das Beste aus Mendix's Bootstrap-Integration? Wenn ja, lesen Sie weiter.
Was eine Hilfsklasse ist
Das Wichtigste zuerst: Was genau ist eine Hilfsklasse? Um das Konzept vollständig zu verstehen, ist es gut, einen Schritt zurückzutreten und sich das Gesamtbild von CSS anzusehen. Obwohl viele Entwickler argumentieren werden, dass CSS keine Programmiersprache ist, ähneln gute CSS-Praktiken ziemlich gut etablierten Best Practices für die Codierung. Insbesondere solche wie DRY (Don't Repeat Yourself) und die Verwendung des Konzepts einer Architektur, auf der und mit der aufgebaut werden kann (BEM, OOCSS und Smaccs sind drei der beliebtesten).
CSS selbst neigt sehr stark dazu, zu „Spaghetticode“ zu werden – was jeder Programmierer wahrscheinlich aus seinem ersten Projekt kennt. Der Code ist überall, es fehlt jede vernünftige Struktur und es handelt sich um eine Kombination aus vielen Codewiederholungen und ungenutzten Codestücken. CSS selbst hat kein Konzept von Gültigkeitsbereich, ist vollständig an HTML gebunden (das ist eine nette Abhängigkeit für Sie) und ist aufgrund von Konzepten wie Spezifität oft ziemlich undurchsichtig.
Logischerweise waren viele Leute der Meinung, dass dies in der heutigen Zeit ein absolutes No-Go ist. Daher entwickelten sie Architekturkonzepte, um CSS-Code modularer, skalierbarer, wartungsfreundlicher und wiederverwendbarer zu machen, selbst wenn sich die HTML-Ansicht selbst ändern würde. Der CSS-Code von Bootstrap ist ein sehr gutes Beispiel für diese Vorgehensweise. Vergleichen Sie die folgenden CSS-Regeln:
#newButton {
display: inline-block;
padding: 6px 12px;
color: #333;
font-size: 14px;
text-align: center;
border: 1px solid transparent;
background-image: none;
background-color: #fff;
}
#deleteButton {
display: inline-block;
padding: 6px 12px;
color: #fff;
font-size: 14px;
text-align: center;
border: 1px solid transparent;
background-image: none;
background-color: #f00;
}
Stellen Sie sich vor, Sie müssten selbst ein mittelgroßes Projekt mit dieser Art von Texten thematisieren (wir müssten jede Schaltfläche in der gesamten Anwendung ansprechen und im Grunde immer wieder denselben Code schreiben). Noch schlimmer: Stellen Sie sich vor, es müsste sogar eine kleine Neugestaltung der Anwendung durchgeführt werden. Glücklicherweise machen eine geeignete Architektur und bewährte Methoden, wie wir sie in Bootstrap finden, das Leben so viel einfacher:
.btn {
display: inline-block;
padding: 6px 12px;
font-size: 14px;
text-align: center;
border: 1px solid transparent;
background-image: none;
}
.btn-default {
color: #333;
background-color: #fff;
}
.btn-warning {
color: #fff;
background-color: #f00;
}
Und da haben wir es, komplett modulares CSS. Es geht nur darum, Klassennamen mit HTML-Elementen zu kombinieren. (Hinweis: Die Vorteile dieser Schreibweise werden deutlicher, wenn Sie beispielsweise zehn Schaltflächen formatieren, aber ich wollte Sie nicht mit so viel sich wiederholendem CSS-Code langweilen).
Im Grunde haben wir aufgehört, einzelne Elemente zu stylen und haben begonnen, ihnen visuelles Verhalten zu verleihen. Wir erstellen ein System oder eine Architektur, die die ganze harte Arbeit für uns erledigt. Und hier kommt ein Konzept wie Hilfsklassen ins Spiel.
Im Wesentlichen kann eine Hilfsklasse als „unabhängige visuelle Verhaltensregel“ beschrieben werden. Das bedeutet, dass sie nicht an ein bestimmtes HTML-Element oder eine Gruppe von Elementen gebunden ist und als zusätzliche Klasse für ein Objekt verwendet wird, um Codewiederholungen zu vermeiden und dennoch das gewünschte Verhalten zu erzielen. Der Vorteil wird im Grunde dann deutlich, wenn Sie nur dieses kleine zusätzliche Verhalten für Ihr Element benötigen, z. B. eine Schaltfläche, die auf der rechten Seite des Bildschirms statt auf der linken Seite positioniert ist.
Obwohl die Anzahl begrenzt ist, hat Bootstrap einige ziemlich raffinierte Hilfsklassen, die wir verwenden können in Mendix Projekte. Ich werde die wichtigsten auflisten und kurz ihre Zwecke beschreiben.
Bootstrap-Farbhilfsklassen
Die Farbhilfsklassen können in zwei Kategorien unterteilt werden: solche, die die Farbe des Textes ändern, und solche, die die Farbe des Hintergrunds ändern.
Textfarben:
- .text-stummgeschaltet
- .text-primär
- .text-erfolg
- .text-info
- .text-warnung
- .text-Gefahr
Hintergrundfarben:
- .bg-primär
- .bg-Erfolg
- .bg-info
- .bg-Warnung
- .bg-Gefahr
Wenn Sie schon einmal mit Bootstrap-Styling herumgespielt haben, erkennen Sie möglicherweise „primär“, „Erfolg“, „Info“ und dergleichen an den Arten von Schaltflächen oder daran, was verwendet werden kann. In Bootstraps werden diese Begriffe verwendet, um einen Farbtyp zu definieren.
Hilfsklassen für die Bootstrap-Positionierung
Häufig sollte die spezifische Gestaltung eines Elements an sich unabhängig von seiner Position auf der Seite sein. Um Positionen zu berücksichtigen, die das normale Layout nicht automatisch unterstützt, haben wir einige Hilfsklassen, die uns dabei helfen, Elemente an der richtigen Stelle zu positionieren.
Schwimmerregler:
- .links ziehen
- .nach rechts ziehen
- .klarfix
Wir können ein Element in unserem Layout schweben lassen, indem wir die Klassen .pull-left und .pull-right verwenden, wodurch ein linkes bzw. rechtes Float erzeugt wird. Das häufigste Problem beim schwebenden Verhalten ist die Tatsache, dass der übergeordnete Container die Abmessungen seines Inhalts nicht mehr kennt. Wir können die Hilfsklasse .clearfix verwenden, um dieses Problem zu lösen und dem übergeordneten Container wieder seine korrekte Höhe zu geben.
Inhalt zentrieren:
- .Mittelblock
Leider ist die Zentrierung von Inhalten sehr kontextabhängig, insbesondere bei vertikaler Zentrierung von Inhalten. Die Hilfsklasse .center-block erleichtert die horizontale Zentrierung von Blockelementen mit bekannter Breite.
Bootstrap-Sichtbarkeits-Hilfsklassen
Abgesehen von der Positionierung von Elementen erfordern interaktive Anwendungen häufig auch Änderungen der Sichtbarkeit, beispielsweise aufgrund des Status der Seite, die wir gerade betrachten.
Standardmäßige Sichtbarkeitshelfer:
- .unsichtbar
- .hidden
- .Show
CSS verwendet zwei Arten, Inhalte zu „verstecken“: die Sichtbarkeit auf „keine“ oder die Anzeige auf „keine“. Eine Sichtbarkeit von „keine“ bedeutet, dass das Element nicht sichtbar ist, aber dennoch ein „Player“ im Seitenlayout ist – und Platz einnimmt. Eine Anzeige von „keine“ bedeutet, dass der Browser das Element ignoriert, als ob es nicht existierte. Wir können .invisible verwenden, um ein Element unsichtbar zu machen, und wir verwenden .hidden, um seine Anzeige wirklich auf „keine“ zu setzen. Die Hilfsklasse .show wird tatsächlich verwendet, um der Klasse .hidden entgegenzuwirken. Diese grundlegenden Hilfsklassen für die Sichtbarkeit können eine enorme Hilfe beim Erstellen benutzerdefinierten interaktiven Verhaltens über benutzerdefinierte JavaScript-Widgets sein.
Exotische Sichtbarkeitshelfer:
- .sr-nur
- .text-ausblenden
Die Klasse .sr-only bedeutet, dass ein Element nur auf einem Screenreader als Medium sichtbar ist. Die Klasse .text-hide verbirgt den Textinhalt eines Elements und wird häufig verwendet, um Text durch ein Hintergrundbild zu ersetzen.
Ein Beispiel
Obwohl die Möglichkeiten endlos sind, kann ein kleines Beispiel leicht gezeigt werden. Unten sind zwei Screenshots einer kleinen Anwendung, die in Mendix. Für den Seitenkopf wurde eine .bg-info zusammen mit .pull-right für den Textinhalt verwendet. Die drei Kachelköpfe wurden mit unterschiedlichen Textfarbklassen angereichert. Alles in weniger als einer Minute erledigt.
Vorher
Nacher
Fazit
Erstellen eines Designs in Mendix bedeutet nicht immer, viel CSS-Code zu schreiben. Manchmal reicht es aus, einen Klassennamen in den Mendix Modeler ist alles, was Sie brauchen, und macht das Beste aus dem, was bereits da ist.
Denken Sie daran: Wenn Ihnen das Konzept der Hilfsklassen bei Ihrer Themenarbeit gefällt, können Sie jederzeit eigene erstellen und diese ebenfalls verwenden.