t3_bootstrap_render

t3_bootstrap_render

TYPO3-Erweiterung, die Twitter Bootstrap 3 Elemente im Backend / Frontend ermöglicht

Worum geht es bei dieser Erweiterung?

Rendering von Twitter Bootstrap 3 Inhaltselementen durch Anpassungen von css_styled_content, TsConfig und RTE Konfiguration.

Installation

Fügen Sie statisches TypoScript in Ihre root page ein. Zur Zeit wird TYPO3 6.1 unterstützt und sollte funktionieren, solange keine anderen Erweiterungen Anpassungen an den gleichen Objekten vornehmen. Um sicherzustellen, dass diese Erweiterung die Einstellungen anderer Erweiterungen überschreibt, setzen Sie das statische TypoScript hinter alle anderen Erweiterungen.

Verwendung

Das Layout der einzelnen Inhaltselemente gibt Ihnen die Wahl zwischen mehreren Twitter Bootstrap Inhaltselementen.

• das Layout enthält mehrere Inhaltsstil-Wrapper für jedes Inhaltselement
• section_frames beinhalten einen Sichtbarkeitsbereich zum Anzeigen/Verbergen von Inhaltselementen durch CSS-Medienabfragen

Das Bild und das Text/Bildelement werden süchtig, um ein ansprechendes Verhältnis zwischen Text und Bild zu erhalten.

• Jedes Bild kann in eine Zeile mit spezifiziertem Spaltenraster eingepackt werden
• Das Verhältnis von Bild zu Text kann mit "Nebentext, rechts", "Nebentext, links" ausgewählt werden.

HTMLArea-Konfiguration

Diese Erweiterung wird mit der RTE-Konfiguration ausgeliefert. Du musst auf deine lokale Twitter-Bootstrap-CSS-Datei zeigen, indem du deine TSConfig der Seite.

Ihre RTE würde Twitter-Stile für "Blockstile", "Textstil" und "Blockformat" hinzufügen. Dein rte könnte in deinem Backend so aussehen:

Weniger Anpassungen

Damit alle Styles funktionieren, sind einige CSS/LESS-Anpassungen notwendig. Hier ein Beispiel mit dem Platzieren von WENIGEREM Code nach dem Twitter weniger Dateien.

// Bildrahmen
.img-gerundet-wrap img:extend(.img-gerundet){}
.img-Kreisumwicklung img:extend(.img-Kreis){}
.img-thumbnail-wrap img:extend(.img-thumbnail){}
.img-responsive-wrap img:extend(.img-responsive){}

// Kopfzeilen-Stile erweitern
.right:extend(.text-rechts){}
.center:extend(.text-center){}
.left:extend(.text-left){}
.p-head:extend(.page-header){}

// Inline-Inhalt Text/Bild
.media-inline.media-body {
  anzeige: inline;
}

// verlängern align für htmlarea
.align-left:extend(.text-left){}
.align-right:extend(.text-right){}
.align-center:extend(.text-center){}

Wichtig

Diese Erweiterung wurde mit TYPO3 6.1.5 erstellt und geschrieben. Da css_styled_content zwischen den einzelnen Versionen wechselt, kann ich nicht garantieren, dass alle Funktionen erfüllen ihre Aufgabe wie in anderen Versionen erwartet. Aber ich plane, das Rendering für TYPO3 LTS 6.2 und vielleicht noch später anzupassen.

Links

• Informieren Sie sich über die Verwendung von Inhaltselementen und Grids: http://getbootstrap.com/
• Projektseite des Twitter-Frameworks: https://github.com/twbs/bootstrap