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.

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;
}

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;
}

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; 
}

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; 
}

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;
}