Benutzer Diskussion:Geoportop


>> Die Beschreibung des Skins



Alles ist div und class!

Bootstrapskin realisiert die Gestaltung der Seite über divs. divs sind HTML-Blöcke, die zunächst völlig eigenschaftslos sind. Sie haben keine Farbe, keinen Rand, keine Höhe, keine Breite. Bootstrapskin gibt diesen divs nun Eigenschaften: Erst dadurch erhalten die divs eine Breite, eine Höhe, eine Farbe usw.

Beim Bootstrapskin erhält ein div seine Eigenschaften durch das Notieren von Klassen, den sogenannten classes:

<div class="...">Irgendein Inhalt</div>



Die grundlegende Eigenschaft ist die Klasse der Columns. Die Column legt nichts anderes als die Breite des divs fest. Bootstrapskin teilt die Seite in zwölf Teile ein, d.h. wenn man eine Column mit Breite 12 angibt, dann geht das div in horizontaler Richtung über die ganze Breite (minus ein kleiner Rand). Zu beachten ist also, dass die Breite variiert, nämlich je nach Breite des Bildschirms bzw. Displays.

Jede neue Seite soll gleich von Anfang an in ein div mit einer Column-Class gepackt werden, um die Breite des Seiteninhalts festzulegen. Dafür wird folgende class verwendet:

<div class="col-md-12">

Ganz am Ende der Seite muss das div geschlossen werden:

</div>



Wichtig und grundsätzlich

  • Jede Seite soll grundsätzlich ein äußeres div besitzen.
  • Jede Seite soll grundsätzlich immer über die ganze Breite des Bildschirms gehen ("col-md-12").
  • Tabellen in WIKI-Syntax zum Formatieren der Seite sollen nicht verwendet werden.
  • Style-Angaben können manchmal sinnvoll sein, sollten aber in der Regel nicht verwendet werden.

Die divs können mit "pull-left" oder "pull-right" ausgerichtet werden. Das macht besonders Sinn, wenn ein Block mal nicht die ganze Breite einnehmen soll (gilt nicht für die komplette Seite, siehe oben). Das wird wie folgt notiert:

 <div class="col-md-6 pull-right">
   Hier steht Inhalt
 </div> 
 

Hier steht das div am rechten Rand. Nachfolgender Text wird dieses div auf der linken Seite umfließen.

Um das Umfließen des divs zu verhindern (nachfolgender Text soll also unbedingt in einem neuen Absatz unter dem div stehen), wird noch ein "col-md-12" vorangesetzt:

 <div class="col-md-12">
   <div class="col-md-6 pull-right">
     Hier steht Inhalt
   </div> 
 </div>
 

Der Text ist hier und in allen weiteren Beispielen zur besseren Lesbarkeit eingerückt, muss aber unbedingt ohne Leerzeichen am Anfang der Zeile beginnen!

Um eine tabellenartige Anordnung der divs hinzubekommen, wird ausschließlich mit der obigen div-Syntax gearbeitet. Ein Beispiel (die farbige Gestaltung über sog. "Alerts" wird weiter unten beschrieben):

div mit "col-md-12 alert alert-lighter"

div mit "col-md-4 alert alert-neutral"

divs mit Breitenangaben ordnen sich nebeneinander an, wenn sich die Breite auf 12 summiert

div mit "alert alert-success"
div mit "col-md-6 alert alert-danger"

div mit "col-md-6 alert alert-hearts"

div mit "col-md-12 alert alert-meadow"

Die Länge der divs variiert je nach Länge des Inhalts

div mit "col-md-8 alert alert-concrete"

div mit "alert alert-warning"

Die Farben dienen natürlich nur der Hervorhebung und sollen so normalerweise nicht verwendet werden
div mit "alert alert-cocktail"

divs ohne Breitenangaben ordnen sich untereinander an
div mit "alert alert-cello"

Klick auf [Bearbeiten] und schau, wie es gemacht wurde!

Dieses große, umschließende div kann auch entfallen, aber es gibt möglicherweise Schwierigkeiten, wenn - so wie hier - eine Kapitelüberschrift folgt.

Das Inhaltsverzeichnis

Das Inhaltsverzeichnis wird, wenn es nicht erscheinen soll, unterdrückt mit

__NOTOC__

Das Inhaltsverzeichnis wird, wenn es erscheinen soll, eingefügt mit

__TOC__

Bootstrapskin lässt das Inhaltsverzeichnis am rechten Rand erscheinen und lässt den Text links daneben umfließen.

Falls die Inhaltsangabe mit einer Überschrift und/oder einem einleitenden Text und/oder einem einleitenden Bild erscheinen soll, wird folgendes VOR dem einleitenden <div class="col-md-12"> notiert:

  <div class="col-md-12">
     <div class="col-md-7">
       [[Datei:ein_bild.png]]<br>
       Und/oder ein einleitender Text! So ist es übrigens auch am Anfang DIESER Seite gemacht!
     </div>
     <div class="col-md-5">
        __TOC__
     </div>
  </div>
 

Abstände zwischen Absätzen oder divs

Platz ist genug da. Bitte immer für genügend Luft zwischen Absätzen und zwischen Kapiteln sorgen. Gilt auch für unterlegte Absätze, Bilder etc.

Normale Zeilenumbrüche im Text erzeugen Absätze, indem einfache Leerzeilen produziert werden. Genauso können <br> notiert werden.

Um einen vertikalen Abstand zwischen zwei divs zu erreichen (oder auch, wie hier, zwischen Kapitelüberschrift und unterlegtem Absatz), wird ein leeres div wie folgt notiert (Die Pixelangabe ist natürlich variabel):

<div class="col-md-12" style="height:30px;"></div>

Ein Abstand zwischen einem div und dem nachfolgenden Text kann nur mit etwas Probieren erreicht werden: Manchmal ist ein "<br><br>" ausreichend, manchmal braucht es ein leeres div mit einer Höhenangabe.

Abstände zwischen Kapiteln werden vom Wiki zurückgesetzt, wenn nur Leerzeilen angegeben werden. Um Abstände zu produzieren, wird am Besten ein div gesetzt.

Überschriften und Hervorhebungen

Überschriften sollten in der gewohnten Art mit "==" bzw. "===" eingeklammert werden. Es ist auch möglich, Header zu verwenden. "<h2>" entspricht "==" usw.

Texte sollten immer als "normaler" Text erscheinen, d.h. vor allem keine farbigen Texte oder farbige Highlights. Bestimmte Textelemente können, wenn nötig, mit den gewohnten Hochkommas bzw. mit <b> und <i> entweder fett oder kursiv gemacht werden.

Festlegungen zum Hervorheben

  • Die Nennung von kvwmap-Buttons oder kvwmap-Links (mit Ausnahme der Menüpunkte) soll fettkursiv erfolgen: Der Button Daten-Export
  • Die zweite, dritte, ... Nennung eines kvwmap-Buttons oder kvwmap-Links soll kursiv erfolgen: Der Button Daten-Export wurde oben schon mal genannt
  • * Die Nennung von kvwmap-Menüpunkten (Ober- und Untermenüs) soll fett erfolgen: Das Menü Import/Export mit dem Untermenüpunkt Daten-Export
  • Alle weiteren Hervorhebungen können mit Anführungsstrichen erfolgen: Das Thema "Flurstücke"

Normale Absätze im Text

Ein normaler Absatz kann erreicht werden durch das Einfügen von Leerzeilen oder <br>-Tags.

Absätze können auch in <div>-Tags eingefügt werden. <div>-Tags können dann vom Skin Formatierungen in Form von classes bekommen, siehe z.B. nächstes Kapitel.

Texte unterhalb von divs haben zunächst keinen richtigen Abstand zum div bzw. umfließen das div.

Unterlegte Absätze

Absätze können zur Hervorhebung mit einem Alert farbig unterlegt werden. Dazu wird folgendes notiert:

 <div class="alert alert-lighter">
   Ein wichtiger Hinweis!
 </div>
 

Überschriften in einem alert-Absatz könne durch ein <p>-Tag erreicht werden:

 <div class="alert alert-lighter">
   <p>
     <strong>Achtung:</strong>
   </p>
   Ein wichtiger Hinweis!
 </div>
 

Ganz wichtige Absätze, z.B. wenn Sie ganz am Anfang der Seite zur Einleitung erscheinen sollen, können durch ein Jumbotron farbig hervorgehoben werden. Dazu wird folgendes notiert:

 <div class="jumbotron jumbotron-lighter">
   <h3>Achtung:</h3>
   <p class="small">Hier ist ein ganz wichtiger Hinweis!</p>
 </div>
 

Die Größe der Überschrift wird durch den <h3>-Tag beeinflusst (aber Achtung: <h>-Tags sind Überschriften!). Der Text muss in <p class="small">-Tags stehen, um normale Schriftgröße zu haben.

Alert- oder Jumbotron-Absätze sollten etwas schmaler gemacht werden, aber dabei zentriert bleiben:

 <div class="col-md-1"></div>
 <div class="col-md-10">
   <div class="alert alert-lighter">
     Hier steht wieder wichtiger Text.
   </div>
 </div>
 <div class="col-md-1"></div>
 

Oder gleich so:

 <div class="col-md-1"></div>
 <div class="col-md-10 alert alert-lighter">
   Hier steht wieder wichtiger Text.
 </div>
 <div class="col-md-1"></div>
 

Und wenn nachfolgende Elemente definitiv unter dem Absatz erscheinen sollen:

 <div class="col-md-12"> 
   <div class="col-md-1"></div>
   <div class="col-md-10 alert alert-lighter">
     Hier steht wieder wichtiger Text.
   </div>
   <div class="col-md-1"></div>
 </div>
 

Aufzählungen

In der Regel werden Aufzählungen normal mit "*" eingeleitet. Wenn es wichtig genug und passend erscheint, können Aufzählungen in ein Panel eingefügt werden. Passend ist es vor allem dann, wenn eine Überschrift möglich ist, siehe auch Beispiel oben. Dabei sollte das Panel "Coloured head and footer (bordered)" zum Einsatz kommen. Dazu wird folgendes notiert:

 <div class="panel panel-darker-border"> 
   <div class="panel-heading">
     Das hier ist die Überschrift:
   </div>
   <div class="panel-body">
     * Punkt 1 der Aufzählung
     * Punkt 2 der Aufzählung
     * Punkt 3 der Aufzählung
   </div>
   <div class="panel-footer">Das Footer-div kann ganz entfallen</div> 
 </div>
 

Zurück nach oben

Wenn die Seite länger wird, sollte unten am Ende der Seite ein Link "nach oben" eingefügt werden. Dasselbe, wenn eine Seite mehrere Kapitel enthält. Dann kann der Link "nach oben" nach jedem Kapitel erscheinen. Dazu muss folgendes notiert werden:

 <div class="going-top">[[#top|TOP]] <i class="fa fa-level-up fa-fw"></i></div>
 


Links und Buttons

Verweise können wie gewohnt in eckige Klammern gesetzt werden. Im Bootstrapskin funktioniert die Angabe von "<a>"-Tags nicht.

Im normalen Text sind Link-Texte nur schwer zu erkennen. Deswegen sollten sie zusätzlich noch fett gemacht werden, Beispiel für die Hilfe-Seite:

'''[[Hilfe|Hier gehts zur Hilfe]]'''

Links, auf die besonders hingewiesen werden soll, können als Buttons angelegt werden:

<div class="btn btn-lighter"><i class="fa fa-exclamation-triangle"></i> [[Hilfe]]</div>
Zu den Icons, die in den Buttons verwendet werden können, siehe

Icons

Wenn Buttons verwendet werden sollen, können passende Icons verwendet werden. Icons können aber auch so im Text Verwendung finden. Dazu muss folgendes notiert werden:

<i class="fa fa-rub"></i>

"fa-rub" ist der Teil, der gegen den Namen des gewünschten Icons ausgetauscht werden muss. Das Icon kann vergrößert werden, maximale Vergrößerung ist 5-fach:

<i class="fa fa-rub fa-5x"></i>


Bilder

Wiki-Syntax

Bilder können mit normaler Wiki-Syntax wie folgt eingefügt werden:

  • [[Datei:geoport_18.jpg]] -- Das Bild wird links in voller Größe erzeugt, nachfolgender Text wird rechts umfließend geschrieben.
  • [[Datei:geoport_18.jpg|none]] -- Das Bild wird links in voller Größe erzeugt, nachfolgender Text wird als neuer Absatz unter das Bild geschrieben.
  • [[Datei:geoport_18.jpg|right]] -- Das Bild wird rechts in voller Größe erzeugt, nachfolgender Text wird links umfließend geschrieben.
  • [[Datei:geoport_18.jpg|200px]] -- Das Bild wird mit einer Breite von 200 Pixeln erzeugt (Das ist mit den anderen Optionen kombinierbar)


Skin-Syntax

Lk-vr mini.png

Ein Bild in Skin-Syntax. Hier bestimmt das div die Größe des angezeigten Bildes (siehe weiter unten).

Bilder können mit Bootstrapskin-Syntax ebenfalls eingefügt werden, allerdings hat Bootstrapskin das Problem, dass ein Element mit einer statischen Breite in ein div mit einer dynamischen Breite eingefügt werden soll. Bootstrapskin geht dann so vor, dass das Bild immer so vergrößert/verkleinert wird, dass es in das div passt. Wenn also das Bild in seiner originalen Größe angezeigt werden soll oder wenn das Vorschaubild aus irgendwelchen Gründen eine ganz bestimmte Breite haben soll, müssen Bild und div mit einer konkreten Breite definiert werden:

 <div class="mwbs-color-white" style="width:209px">
   <div class="thumbnail lighter-background">[[Datei:geoport_18.jpg|200px]]
     Eine Bildunterschrift, die auch über mehrere Zeilen gehen kann
   </div>
 </div>
 

Hier wird der anschließende Text unterhalb des Bildes angeordnet.

Ganz wichtig:

  • Damit nachfolgen Absätze nicht auf Kollisionskurs geraten, ist es notwendig, das Bild-div und den Text, der das Bild umfließen soll, in ein div mit "col-md-12" zu packen.
  • Das div erzeugt einen inneren Rand zum Bild. Wenn das div eine bestimmte Breite bekommt, wird das Bild so verkleinert, dass es passt. Umgekehrt also: Wenn das Bild in seiner originalen Größe erscheinen soll, muss das div mindestens um den Faktor 1,047 vergrößert werden. Wenn das Bild 200px breit ist, muss die Breite des div demnach mit mindestens "209" angegeben werden. Größere Werte erzeugen einen breiteren Rahmen, das Bild selber wird nicht vergrößert.


Die Position des Bildes und das Umfließen des Textes kann mit "pull-left" bzw. "pull-right" gesteuert werden. Das muss so notiert werden:

 <div class="mwbs-color-white pull-right" style="width:200px; margin:30px;">
   <div class="thumbnail lighter-background">[[Datei:geoport_18.jpg|200px]]
     Eine Bildunterschrift, die auch über mehrere Zeilen gehen kann
   </div>
 </div>
 

Hier erscheint das Bild rechts und der anschließende Text umfließt das Bild links davon. Das "margin" gibt dem Bild einen kleinen Freiraum zum Text.

Ohne konkrete Breitenangabe im div wird die Größe des Vorschaubildes durch die relative Breite des divs bestimmt (siehe das Beispiel oben):

 <div class="col-md-4 mwbs-color-white" style="margin:30px;">
   <div class="thumbnail lighter-background">[[Datei:geoport_18.jpg]]
     Eine Bildunterschrift, die auch über mehrere Zeilen gehen kann
   </div>
 </div>
 

Hier erscheint das Bild links und der anschließende Text umfließt das Bild rechts davon. Das "margin" gibt dem Bild einen kleinen Freiraum zum Text.