Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.


bootstrap_3_formulare [2023.12.12 16:02] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1
Zeile 1: Zeile 1:
 +====== 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;
 +  }