Plug-in Bootstrap

Beschreibung

Bootstrap ist ein Front-End Framework für HTML5 Webseiten.
Dieses Plug-in stellt einige Elemente des Frameworks im moziloCMS zur Verfügung.

Lizenz

LGPL 3.0 (http://www.gnu.org/licenses/lgpl) (Deutsch: http://www.gnu.de/documents/lgpl-3.0.de.html)

Bild "moziloCMS Plug-ins:lgplv3-88x31.png"

Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0.html) for Bootstrap

Download

Die Aktuelle Version gibt es im moziloCMS Forum:

und direkt auf GitHub:

Installation

Das Archiv in einen Ordner entpacken, in dem entpackten Ordner befindet sich eine Datei "Bootstrap.zip" diese im Adminbereich unter Plugins Verwalten intallieren.

Anpassungen

Die CSS Datei von Bootstrap wird am Anfang des Head Bereich eingebunden. Damit können nachfolgende CSS Datei die Eigenschaften überschreiben.
Unter Bootstrap Customize kann man sich auch seine eigene Bootstrap CSS Datei erstellen. Diese muss dann nach Plugin/Bootstrap/css kopiert werden.

Da Bootstrap das border-box Model verwendet, empfielt sich die Verwendung nur mit einem darauf ausgelegten Layout. Zum Beispiel bnBootstrapBasic oder bnBootstrapSinglePage .

Syntax

Button

{Bootstrap|Button|Text}
{Bootstrap|Button|Text|Type}
{Bootstrap|Button|Text|Type|Größe}

Erstellt einen Button mit in Text angebenen Text. Type darf einen der folgenden Werte haben: Primär,Erfolg,Info,Warnung,Risiko. Größe darf einer der Werte: XS,S,L haben. Type und Größe können auch entfallen.
Der Button kann zum Beispiel mit einem Link verbunden werden:

[link={Bootstrap|Button|Download}|http://]

Badges sind kleine Embleme die hauptsächlich verwendet werden um eine Anzahl für etwas darzu stellen.

{Bootstrap|Badge|Zahl}

Erstellt ein Badge mit dem als Zahl angegebenen Wert. Kann mit anderen Elementen verwendet werden.

Labels sind farbig hervorgehobene Texte

{Bootstrap|Label|Text|Type}
{Bootstrap|Label|Text}

Erstellt ein Label mit dem Inhalt aus Text. Type darf einen der folgenden Werte haben: Primär,Erfolg,Info,Warnung,Risiko. Type kann auch entfallen.

Media Element aus einem Bild und einem Text. Kann zum Beispiel für News Einträge verwendet werden.

{Bootstrap|Media|Bild|Titel|Text}

Erstellt einen Media Eintrag. Bild kann externe URL oder hochgeladnes Bild sein oder leer für kein Bild.

Panels Eine Box mit optionaler Kopf und Fußzeile.

{Bootstrap|Panel|Titel|Text|Fuß}
{Bootstrap|Panel|Titel|Text|Fuß|Type}

Erstellt eine Panel mit optionaler Kopf und Fußzeile. Type darf einen der folgenden Werte haben: Primär,Erfolg,Info,Warnung,Risiko.

Wells eignen sich für Zitate oder andere Quellen

{Bootstrap|Well|Text}
{Bootstrap|Well|Text|Type}

Erstellt eine Well. Type darf einen der folgenden Werte haben: s oder l. Type kann auch entfallen.

Tab eignen sich für die Darstellung verschiedener Inhalte

{Bootstrap|Tab|Titel|Text}

Erstellt ein Tab. Titel und Text dürfen dabei beliebig oft wiederholt werden.

Collaps eignen sich für FAQ Bereiche

{Bootstrap|Collaps|Titel|Text}

Erstellt ein Collaps. Titel und Text dürfen dabei beliebig oft wiederholt werden.

Grid Gliedert den Inhalt in ein Grid mit 12 Spalten. Für jede Auflösung (Handy = xs, Tablet = s, PC = m, HD = l) kann eine Spaltenbreite definiert werden. Möchte man zum Beispiel auf dem PC 3 Spalten auf dem Tablet 2 und auf dem Handy nur eine würde dies wie folgt aussehen:

{Bootstrap|Grid|m=4,s=6|Hier kommt der Text von Spalte 1}
{Bootstrap|Grid|m=4,s=6|Hier kommt der Text von Spalte 2}
{Bootstrap|Grid|m=4,s=12|Hier kommt der Text von Spalte 3}
{Bootstrap|Grid|Clear}

Mit Clear wird die Aufteilung auf Spalten wieder deaktiviert.

Carousel Zeigt eine Slidshow mit je einem Hintergrundbild und beliebigen Text darauf an. Für den Text kann der moziloCMS Syntax verwendet werden. Die Verwaltung verschiedener Carousels erfolgt über die Adminoberfläche. Der Aufruf in der Inhaltsseite erfolgt mit:

{Bootstrap|Carousel|Name}

Jumbotron Muss vom Layout unterstützt werden (Defintion im Layout durch  außerhalb des "container"). Zeigt ein über die ganze Seite reichende Fläche mit dem übergebenen Text an.

{Bootstrap|Jumbotron|Text}

Beispiele

Verschiedene Beispiele sind unter: http://bn-app.de/Bootstrap zu finden.

Kommentare

Neuen Kommentar erfassen