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.
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
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())
Javascript
Eigenes Javascript schreiben in (die von meinem compile.sh erzeugte) assets/js/application.js.