Bootstrap anpassen

Stylesheets

Übersicht

Hier eine Übersicht über die less Dateien.

bootstrap.less: Hauptdatei, inkludiert alle anderen

variables.less:
Hauptvariablen für die Erzeugung, Parametrisierung aller anderen Dateien
mixins.less:
Eine Art Funktions-Bibliothek zur Verwendung in den anderen Dateien

reset.less:
Reset mittels normalize.css
scaffolding.less:
Grund Klassen - body und a
utilities.less:
Allgemeine Klassen - pull-left, hide, show
type.less:
Typografie - fonts, listen, Überschriften, blockquote

responsive.less:
inkludiert die anderen styles, die dann die media queries enthalten (z.B. responsive-767px-max.less usw.)

Die restlichen Dateien sind für allerlei Elemente wie buttons, navigation etc - pro Thema eine Datei, die Namen sind relativ selbsterklärend.

Vorlage mit allen Elementen

Aus der Doku (https://github.com/twbs/bootstrap/blob/master/docs/css.html) habe ich alle Elemente zusammenkopiert in eine Seite. Damit kann ich die Änderungen an den less Dateien direkt sehen mit allen möglichen Elementen.

Der Quellcode ist zu lange, deshalb eine Preview unter www.typo3-nürnberg.de/fileadmin/static/rsys.html.

Erstellt: 07/2013| Geändert: 10/2015

Scrollspy

Der Scrollspy funktioniert nicht perfekt, nicht einmal auf der Bootstrap Seite selbst. Grund: Wenn oben die Navigation sich ändert für Mobiltelefone oder eben ein schmales Browserfenster wird der Header Bereich grösser. Der Scrollspy bekommt dies aber nicht mit. Ein setzen des Attributs data-offset-top wirkt sich allerdings nicht aus. Einzige funktionierende Lösung ist, das Attribut mit einer Funktion zu belegen:

<body data-target=".bs-docs-sidebar" data-spy="scroll">

<ul class="nav nav-list bs-docs-sidenav">

                   
$(function () {
  $('.bs-docs-sidenav').addClass("affix").each(function (){
    var $self = $(this);
    var offsetFn = function () {
      var h_navbar = $('.navbar-fixed-top').outerHeight();
      var h_subhead = $('.subhead').outerHeight();
      var h = h_navbar + h_subhead;
     
      if ($(".btn-navbar").is(":visible") ) {
        h = h_navbar + h_subhead;
      } else {
        h = h_subhead;
      }
      return h;
    }
    $self.affix({offset: {top: offsetFn}});
  });
});

Update Version 3.3.5

Der scrollspy funktioniert nun soweit. Allerdings damit er mit TYPO3 funktioniert musste ich folgende Anpassungen vornehmen:

Zeile 1931:

var href  = $el.data('target') || $el.attr('href')
var href = href.substring(href.indexOf('#')); // rsys

Zeile 1983:

 this.selector + '[href$="' + target + '"]' // rsys $= instead of =

 Damit funktionieren auch Anker wie z.B. /seite.html#c123

 

Erstellt: 07/2013| Geändert: 10/2015

Carousel

Das Carousel ignoriert die Attribute data-wrap="true" data-interval="3000" data-pause="hover". Ich habe das Javascript in bootstrap/js/carousel.js angepasst:

// rsys replaced: var options = $.extend({}, Carousel.DEFAULTS, $this.data(), option, typeof option == 'object' && option)
var options = $.extend({}, Carousel.DEFAULTS, option, $this.data())

Erstellt: 10/2013| Geändert: 10/2015

Javascript

Eigenes Javascript schreiben in (die von meinem compile.sh erzeugte) assets/js/application.js.

Erstellt: 07/2013| Geändert: 10/2015