Sie befinden sich hier: start » bootstrap_3_formulare

Formulare Bootstrap 3

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