Es gibt die Möglichkeit, einige CSS-Klassen aus dem Bootstrap[1] in SEBLOD zu übernehmen. Diese Klassen können an verschiedenen Stellen in SEBLOD eingebunden werden und bewirken teilweise sehr unterschiedliche Formatierungen. Dieses Kapitel soll ein wenig Überblick geben.
A.1 Eingabe direkt im Feld
Wenn Sie direkt im Feld arbeiten, können Sie am unteren Rand im Speicherbereich die orangefarbenen Pfeile anklicken. Es klappt dann der Bereich Mittel auf, in dem Sie CSS-Klassen direkt eingeben können.
Bild A.1: CSS-Klassen direkt beim Feld eingeben.
Legen Sie Textfelder an, können Sie die Länge der Felder in der Ansicht mit CSSKlassen festlegen:
Bild A.2: CSS-Klassen für die Länge der Eingabefelder-
Die Klassen von oben nach unten:
- input-mir
- input-small
- input-medium
- input-large
- input-xlarge
- input-xxlarge
Wenn Sie Buttons benutzen möchten, bieten sich einige Klassen zur Gestaltung an, darunter auch eine, die aus dem Button einen optischen Link macht:
Bild A.3: Buttongestaltung mit CSS-Klassen aus dem Bootstrap.
Ganz oben ist ein Button ohne Klassenangabe, und darunter:
- btn-primary
- btn-info
- btn-success
- btn-warning
- btn-danger
- btn-inverse
- btn-link
Unterschiedliche Größen sind ebenfalls möglich:
Bild A.4: Buttons unterschiedlich groß
Die Klassennamen unter dem Standard von oben nach unten:
- btn-large
- btn-small
- btn-mini
- btn-block
btn-block macht den Button exakt so lang, wie die Beschriftung breit ist. Alle anderen Klassen fügen rechts und links ein paar Pixel bis zum Buttonrand hinzu.
A.2 Eingabe im Markup
Sie können Klassen auch über die Nummer 6 – Markup einfügen. Der Effekt ist dann etwas anders, als wenn Sie die Klassen direkt in die Felder eingeben.
Bild A.5: Klassen direkt in der Übersicht eingeben.
Für die Buttons gelten die gleichen Klassen wie oben, sie haben jedoch Auswirkung auf den Hintergrund und lassen den Button selber im Defaultmodus:
Bild A.6: Nicht der Button wird formatiert, sondern der Hintergrund.
Die CSS-Klassen für die Größenangaben können auch benutzt werden, lassen den Button aber stets auf Defaultgröße und verändern den Schriftzug oder Abbrechen. Die CSS-Klasse btn-block hat allerdings die gleichen Formatierungen wie der Default-button.
Bild A.7: Der Schriftzug wird größer und kleiner.
Sie können die einzelnen Klassen natürlich nach Belieben kombinieren und so alle Effekte nutzen.
[1] Bootstrap ist ein Framework und enthält eine Sammlung von Hilfsmitteln für die Gestaltung von Websites. Dazu gehören auch fertige CSS-Formatierungen für Typografie, Formulare, Buttons und andere.