Formulare Bootstrap 3
Twitter Bootstrap bringt in seiner Standard Konfiguration schon eine Menge Möglichkeiten zur Gestaltung des Frontend mit sich. Nicht jedem gefallen allerdings die Gestaltung von Rahmen und Farben. Hier ein paar Tipps, Tricks und Kniffe, wie man das Frontend individualisieren kann.
Standards von Bootstrap überschreiben
Breite der DIV row anpassen
Je nach Layout der Webseite kann es sinnvoll sein, die Ausrichtung der Klasse div class=„row“
zu überschreiben. Das Element greift als Standard 15 Pixel nach links und rechts über das sichtbare Fenster hinaus. Dies stellt sicher, dass die als Kinder in diesem <DIV>
liegenden Spalten bei allen Plattformen mit dem richtigen Abstand nach links und rechts ausgerichtet werden.
Man kann diesen Standard überschreiben:
.row { margin-left: 0; margin-right: 0; }
Eingabefelder in Formularen anpassen
Bootstrap
liefert eine Menge Layouts für Elemente in Formularen
mit. Eingabefelder
und Buttons
sind per se gerundet. Will man dieses Design abschalten, bietet sich folgender CSS Code an:
.btn { border-radius: 0; }
Buttons für mehrseitiges Formular
button.btn.btn-default { border: 1px #63BD82 solid; background: #E2F8EA; } button.btn.btn-primary { background: #63BD82; } button.btn.btn-danger { background: #FFE7E9; border: 1px #c94c4c solid; color: #c94c4c; } input.btn.btn-primary { background: #0B7F35; width: 100%; } input.btn.btn-primary:hover { background: #0F4522; } a.btn.btn-primary.pull-right, a.btn.btn-warning { background: #0B7F35; border: none; } a.btn.btn-primary.pull-right:hover, a.btn.btn-warning:hover { background: #0F4522; } input.btn.btn-primary, input.btn.btn-primary:hover, a.btn.btn-primary.pull-right, a.btn.btn-warning { transition: all ease 0.3s; }
Buttons in Bootstrap Frontend
Weisen Sie den Buttons eigene Farben, Abstände und eigene Breiten zu:
a.btn.btn-default.btn-read-more, .btn.btn-default.btn-login { border: 1px #4B778A solid; background-color: #efefe7; width: 100%; color: #4B778A; margin-bottom: 15px; font-weight: bold; } a.btn.btn-default.btn-read-more:hover, .btn.btn-default.btn-login:hover { border: 1px #fff solid; color: #ddd; background-color: #4B778A; }
Die Krönung:
Den Hover-Effekt mit einer Verzögerung animinieren
a.btn.btn-default.btn-read-more { transition: all ease 1.5s; } .btn.btn-default.btn-login { transition: all ease 0.8s; }
Login Formular mit Bootstrap
Das Standard Login Formular von TYPO3 kann mit einem eigenen Template überschrieben werden. Dabei kann man die Formulare auf Bootstrap Layout bringen. Diese Tags sind dann recht einfach zu formatieren:
.row.userform { margin-bottom: 15px; } input.form-control { background: #fafafa; border: 1px #ccc solid; } input.form-control:focus { background: #f3f3f3; border: 2px #4B778A solid; padding: 10px; }