bootstrap table

Code-Editor



Hier eine kurze Einführung in den Code-Editor von Mobirise

Den Code-Editor kann man käuflich erwerben. Hier eine Ansicht des zusätzlich erworbenen Blocks. Weiter zum Tutorial »

Code-Editor

Klickt oben links im Menü auf "Extensions & Themes".
Dort werden Euch alle zur Verfügung stehenden Erweiterungen für Mobirise angezeigt. Einige Erweiterungen sind kostenlos und werden lediglich mittels Klick auf das + Zeichen zu den bereits im Programm vorhandenen Blocks hinzugefügt. Bereits erworbene Erweiterungen müssen an einem 2. PC nicht neu gekauft werden, sondern werden am + Zeichen nur neu installiert. Den Code-Editor muss man käuflich erwerben. Die Updates für diesen Editor werden danach für 1 Jahr automatisch geladen. Updates darüber hinaus, müsst Ihr erneut zu einem reduzierten Preis erwerben. Den Code-Editor benötigt Ihr nur, wenn Ihr vorhabt eigene HTML-Codes, wie z.B. externe Skripte oder eigene CSS, in Mobirise einzubauen. Beispiele habe ich in meinem Menü unter "Weiteres" eingebaut. Man kann ebenfalls den bereits vorhandenen Blocks zusätzliche Formatierungen über diesen Editor geben.

zurück

Verwendung des Code-Editors


Ich beschreibe hier als Beispiel die Verwendung meiner geschützten Mitgliederseite.
Zum besseren Verständnis guckt Euch auch mein Tutorial zum Einbau dieses externen Skriptes in NOF an. Weiter ...

Page Settings

In den Seiten-Einstellungen kann man für jeden denkbaren Bereich, nachdem man den Code-Editor erworben hat, zusätzliche Einträge machen. Für das Skript "PHP-Webseitenschutz" von Werner-Zenk.de habe ich den PHP-Teil seiner Seite "anmeldung.php" hier vor den <!DOCTYPE> Bereich kopiert. Für Details dazu guckt bitte in mein Tutorial,  von dem Ihr Euch auch diese Skripte vom Werner downloaden könnt.

zurück

Symbole

Grundsätzlich stehen Euch nun diese Symbole für jeden Block zur Verfügung.

Es ist also das Symbol </> für den Code-Editor hinzu gekommen.

Man kann jetzt alternativ einen ganzen Code-Editor-Block aufziehen (in den man ausschließlich eigenen Code einbaut) oder auch jeden beliebigen anderen Block mit dem Code-Editor bearbeiten. Es macht oft Sinn einen bereits vorhandenen Block, mittels Klick auf </>, umzustellen. Dann kann man die bereits vorhandenen Formatierungen dieses Blocks mit nutzen.  Nach dem ersten Klick auf den Code-Editor erhält man bis Mobirise 3 eine Warnung, denn man kann vom Code-Editor nicht wieder auf die automatische Generierung des HTML-Codes zurückstellen. Die Aktivierung betrifft dann aber nur immer diese eine "Section" des Codes. Es kommt also darauf an, wie viele "Sections" ein Block besitzt. Die nicht umgestellten Sektionen und Blocks, kann man weiterhin über das Zahnrad-Symbol bearbeiten.


Seit Mobirise 4 muss man diesen Editor gar nicht mehr aktivieren, dieser ist bereits aktiv und man kann dennoch weiterhin die Einstellungen am Zahnrad vornehmen.

zurück

Aktiver Editor

Hier eine Ansicht des aktivierten Code-Editors.
Im Beispiel dieses externen Skriptes, das ich hier zeige, habe ich lediglich in einen vorhandenen Textblock mein <form> Tag, zur Anmeldung im geschützten Bereich, kopiert.
Im unteren Bereich habe ich noch zusätzliche CSS-Klassen für den Button "Anmelden" eingetragen. Das ist ein besonders schönes Feature, da dieser CSS-Editor immer nur auf die IDs der jeweiligen "Section" wirkt und nicht über die gesamte Seite. Diese CSS-Klassen werden einer vorhandenen CSS-Datei:
/assets/mobirise/css/mbr-additional.css
automatisch hinzugefügt.

Hier könnt Ihr den kompletten Quelltext meiner Seite "Mitglieder" auf GitHub ansehen.

zurück

Mobirise 4  Editor

Hier eine Ansicht des Code-Editors ab Mobirise 4, der nicht mehr aktiviert werden muss und der nun unabhängig von den Einstellungen am Zahnrad ist.


zurück

Video

Guckt Euch auch mal dieses Video an. Es zeigt insbesondere die Formatierungen von Text und hilft zum Verständnis von Bootstrap und den Spalten der Grids.

zurück

Bootstrap Grid System

Hier der Aufbau vom Grid System, das sich in 12 Spalten aufteilt. Gehe mit der Maus über das Grid.
Jede Spalte ist einzeln ansprechbar und jeder Spalte kann man ein Offset nach links geben. Am Smartphone werden sich diese Spalten dann entsprechend untereinander verschieben.

Grid System

Sp. 1
Sp. 2
Sp. 3
Sp. 4
Sp. 5
Sp. 6
Sp. 7
Sp. 8
Sp. 9
Sp. 10
Sp. 11
Sp. 12
Spalten 1 bis 8
Spalten 9 bis 12
Spalten 1 bis 4
Spalten 5 bis 8
Spalten 9 bis 12
Spalten 1 bis 6
Spalten 7 bis 12

Guckt Euch auch mal diese Code Snippets von bootsnipp.com an, die man vielleicht gut verwenden kann.