Bootstrap CSS Angaben für Tabellen, Formulare, Buttons

Bootstrap kommt bekanntlich mit einer Fülle von CSS Formatierungen daher, die man sich – relativ mühsam – auf der „Customize“ Seite (http://getbootstrap.com/customize/) für die eigenen Zwecke anpassen kann. Möchte man Formatierungen, z.B. die für Tabellen, Formulare und Buttons für ein Projekt verwenden, ohne das komplette Bootstrap zu verwenden so muss man sich die entsprechenden Angaben – noch mühsamer – zusammen suchen.

Hier eine Beispielseite, die die minimal nötigen Angaben für die genannten Elemente (Tabellen, Formulare, Buttons) darstellt:

Demo

Interessant ist der Effekt beim Klicken in ein Input Feld. Dabei wird die Eigenschaft box-shadow in der CSS Formatierung für .form-control:focus aktiviert. Bootstrap verwendet hier ein Standardblau, das man auf der „Customize“ Seite im Feld für @input-border-focus ändern kann.

.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

Will man es selbst direkt in der CSS Datei ändern, so benötigt man einen Konverter, der den RGBA Wert einer Farbe errechnen kann (http://hex2rgba.devoth.com/).

Weiterhin interessant ist die Formatierung der Input Felder mit folgenden Werten: width: 100%; und padding: 6px 12px;
Da das Padding normalerweise auf die Breite hinzugerechnet wird, ergibt sich immer eine Breite von über 100%, also z.B. ein waagerechter Scrollbalken. Abhilfe schafft die Eigenschaft box-sizing mit dem Wert border-box. Bootstrap wendet diese Formatierung auf alle Elemente an:

*, *:before, *:after {
  box-sizing: border-box;
}

Der Button Primary war in früheren Bootstrap Versionen übrigens mit einem Verlauf versehen, z.B. so:

background-image: linear-gradient(to bottom,#0088cc,#0044cc);
background-repeat: repeat-x;

Wer es nicht so ganz flat mag, nehme dieses.

Hier der für die Demoseite verwendete Bootstrap CSS Code:

/* Tabellen */
table {
  border-collapse: collapse;
  border-spacing: 0;
  max-width: 100%;
}
th {
  text-align: left;
}
.table {
  width: 100%;
  margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.428571429;
  vertical-align: top;
  border-top: 1px solid #dddddd;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #dddddd;
}
/* Formulare und Buttons */
/**, *:before, *:after {
  box-sizing: border-box;
}*/
label {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  /* IE8-9 */
  line-height: normal;
}
.radio,
.checkbox {
  display: block;
  min-height: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 20px;
  vertical-align: middle;
}
.radio label,
.checkbox label {
  display: inline;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  float: left;
  margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
  margin-top: -5px;
}
.form-group {
  margin-bottom: 15px;
}
.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  box-sizing: border-box;
}
.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.form-control:-moz-placeholder {
  color: #999999;
}
.form-control::-moz-placeholder {
  color: #999999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999999;
}
.form-control::-webkit-input-placeholder {
  color: #999999;
}
.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.btn:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus {
  color: #333333;
  text-decoration: none;
}
.btn-default {
  color: #333333;
  background-color: #ffffff;
  border-color: #cccccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
  color: #333333;
  background-color: #ebebeb;
  border-color: #adadad;
}
 
.btn-primary {
  color: #ffffff;
  background-color: #428bca;
  border-color: #357ebd;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #ffffff;
  background-color: #3276b1;
  border-color: #285e8e;
}