Bootstrap auf Version 3 aktualisieren

So praktisch Bootstrap für optisch ansprechende Webseiten auch ist, so gibt es doch etwas was man bedenken muss: Wie jede andere Abhängigkeit in einem Software-Projekt muss auch Bootstrap aktualisiert werden. Was harmlos tönt kann schnell recht aufwendig werden, vor allem wenn so viel geändert wurde wie beim Wechsel von 2.x auf 3.0.

Zahlreiche Veränderungen

Zwischen Version 2 und 3 gab es bei Bootstrap zahlreiche Veränderungen. Unzählige CSS-Klassen wurden umbenannt, JQuery wird nun direkt verwendet und Responsive Webdesign ist ab sofort zwingend. Wenn diese Veränderungen auch allesamt in die richtige Richtung gehen, so bedeutet dies vor allem Arbeit.

Bevor man sich an die Arbeit macht auf Version 3 zu aktualisieren sollte man sich unbedingt den Migrationsleitfaden anschauen. Darin werden alle Klassen aufgeführt die verändert, entfernt oder neu hinzugekommen sind. Da alles was in dieser Liste enthalten ist angepasst werden muss sollte man sich die nötige Zeit nehmen und die Liste in Ruhe durchlesen.

Beim Grid-System gibt es ebenfalls Änderungen. Neu gibt es 4 Grid-Grössen die über die col-XX- Klasse definiert werden. Wenn man vor hat das Grid zu verändern sollte man dies gleich von Anfang an machen. Ansonsten darf man ein zweites Mal die CSS-Klassen umbenennen.

Suchen und Ersetzen

Der Wechsel von den alten auf die neuen Klassen lässt sich am einfachsten mittels Suchen und Ersetzen bewerkstelligen. Wer sich an die Standardvorlage gehalten hat dürfte mit dieser Tabelle schon weit kommen:

2.x	3.0
btn-danger	btn btn-danger
btn-success	btn btn-success
alert alert-error	alert alert-danger
row-fluid	row
span2	col-md-2
span3	col-md-3
span4	col-md-4

Die Vorlage plündern

Wer noch den Internet Explorer 8 unterstützen muss schaut sich am besten gleich das Starter-Template an und kopiert dort die entsprechenden Header-Zeilen heraus:

  <!-- Bootstrap core CSS -->
  <link href="../../dist/css/bootstrap.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="starter-template.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
    <script src="../../assets/js/html5shiv.js"></script>
    <script src="../../assets/js/respond.min.js"></script>
  <![endif]-->
</head>

JQuery und die JavaScript-Teile von Bootstrap können ebenfalls dort entnommen werden und gehören ans Ende der Seite direkt vor den Body-Tag:

  <!-- Bootstrap core JavaScript
  ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="../../assets/js/jquery.js"></script>
  <script src="../../dist/js/bootstrap.min.js"></script>
</body>

Wo es komplizierter wird

Die Probleme beginnen meist bei den eigenen Anpassungen. Durch Veränderungen in der Vererbungshierarchie stimmen plötzlich die Abstände zwischen den Rändern nicht mehr ganz genau überein. Bis dies wieder stimmt kann man in den CSS Dateien hin und her experimentieren. Allerdings kann es so vorkommen dass der eine CSS-Fehler den man in der Liste jagt seine Ursprung an einer ganz anderen Stelle hat.

Statt sich diesen Problemen auszusetzen sollte man besser eine Seite wie Bootply.com benutzen. Dort kann man im Browser eine Bootstrap-Vorlage nach seinen Wünschen verändern und sich die Auswirkungen gleich anzeigen lassen.

Wenn es dort geht und bei der eigenen Datei nicht liegt es wohl doch eher am eigenen Code und nicht an Bootstrap…

Fazit

Ich bin nach wie vor von Bootstrap überzeugt. Man muss sich allerdings bewusst sein das man sich den Zeitgewinn bei der Erstellung der Seite mit einem zusätzlichen Wartungsaufwand erkauft. Dies gilt nicht nur für Bootstrap, sondern für jede Abhängigkeit. Ob sich dieser Zusatzaufwand lohnt muss jeder für sich selber entscheiden.