Dies ist eine alte Version des Dokuments!


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.

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;
}
Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
  • bootstrap_3_formulare.1568455708.txt.gz
  • Zuletzt geändert: 14/09/2019 12:08
  • von Thomas Berscheid