Twitter Bootstrap

From Cloudrexx Development Wiki
Jump to: navigation, search

Ab Version 3.2 wird Twitter Bootstrap ein fester Bestandteil von Contrexx sein.

Versionen

Die installierten Twitter Bootstrap Versionen sind im Ordner /lib/javascript/twitter-bootstrap/ abgelegt:

  • 2.3.2
  • 3.0.0
  • 3.0.1
  • 3.0.2
  • 3.0.3
  • 3.1.0

Verwendung

Sie können Twitter Bootstrap ohne eine Zeile Code im Template einbinden indem Sie unter Administration > Layout > Designvorlagen beim jeweiligen Design bei den "Verwendete Bibliotheken" Twitter Bootstrap aktivieren.

Twitter bootstrap settings.png

Was folgt noch?

Backend aufgebaut mit Twitter Bootstrap

Im Backend wird dann Bootstrap 3 verwendet (aktuellste Version momentan).
Für das Backend ein spezielles Boostrap.css machen: http://getbootstrap.com/customize/
Dieses wird als Customizing der original Version im /lib/bootstrap in /cadmin/lib/bootstrap o.ä. abgelegt.

z.B deaktivieren. Glyphicons, Breadcrumps, Pager, Badges, Jumbotron, Thumbnails, Progress bars, Media items, Panels, Wells, JavaScript components (except Modals)

  • Tables
    • .adminlist muss die Styles von .table-responsive (bootstrap) haben, mittels LESS Styles
.adminlist {
   .table-responsive;
}
http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html (ist auch empfohlen von Twitter)
  • Forms
    • Formulare sollten einen neuen Aufbau haben. Hier könnte man sicherlich auch mit einer externen CSS-Datei (contrexx-bootstrap.css) die Labels und

      umändern, damit diese Responsive sind.

  • Paging
    • Paging.class.php umändern, damit diese dem <ul> die Klasse „pagination“ gibt: <ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> ... </ul>
  • Warnboxes
    • Die Contrexx Warnungsmeldungen im css umändern, damit diese die Styles von .alert übernehmen, ähnlich wie bei Tables
  • Kategorien-Übersichten (v2)
    • Könnte man so umsetzen: <span class="badge pull-right">42</span>
    • erzeugt hinter dem Namen ein Badge mit der Anzahl Einträge (zum Beispiel)
  • jQuery-UI Dialog durch http://getbootstrap.com/javascript/#modals ersetzen (Responsives modales Fenster)
    Auch im Frontend einsetzen für Gallery, falls Bootstrap aktiv ist (v2)
  • Navigationen
    • Eventuell funktionert es schon nachdem das Grid angepasst ist. Ansonsten müsste man noch die Navigationen (Header und Subnavigation) anpassen.
  • Jede Seite muss mit dem Grid-System ausgestattet werden. (Aufwand 4+ Tage)
  • Jede fixe Breite muss aus dem base.css verschwinden.

Die Idee und vor allem auch die Empfehlung von anderen Entwicklern im Internet ist, dass man abgesehen vom 12-Spalten-Gitter nicht die HTML-Struktur der Applikation anpasst sondern ein LESS-Stylesheet macht, welcher dann Bootstrap und den eigenen Stylesheet vereint.

Update von Twitter Bootstrap

Es gibt bei jeder Version von Twitter Bootstrap ein Migration-Guide, daher ist es nicht schwierig ein Template auf die neue Bootstrap Version anzupassen.
http://bootply.com/bootstrap-3-migration-guide (inoffiziell, das wichtigste klar ersichtlich)

http://getbootstrap.com/getting-started/#migration (offiziell, viele Infos, sicherlich hilfreich)