MediaWiki/Extension/Bootstrap: Unterschied zwischen den Versionen

Aktuelle Version vom 20. Oktober 2024, 08:33 Uhr

MediaWiki Bootstrap-Extension - Bootstrap in MediaWiki integrieren

Beschreibung

Bootstrap ist ein Framework, das unter vielen Websites liegen kann

Auch für die Wiki gibt es eine Extension, um Bootstrap zu integrieren

Bootstrap

Freies CSS-Frontend Framework

Gestaltungsvorlagen basieren auf HTML und CSS
Vorlagen für Typografie, Formulare, Navigationselemtente etc...
Zusätliche JavaScript-Erweiterungen
Entwickelt von Twitter

Der Code-Block zeigt einen typischen HTML-Aufbau mit Einbindung von Bootstrap

 <!DOCTYPE html>
 <html>
 
   <head>
     <title>Bootstrap Beispiel</title>
     <meta charset="UTF-8">

     <!-- Einbinden des Bootstrap-Stylesheets -->
     <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">

     <!-- optional: Einbinden der jQuery-Bibliothek -->
     <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

     <!-- optional: Einbinden der Bootstrap-JavaScript-Plugins -->
     <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
   </head>
 
   <body>
     <section class="container">
       <h1>Suche</h1>

       <p>Beispiel für ein einfaches Suchformular.</p>

       <!-- Suchformular mit Eingabefeld und Button -->
       <form class="well form-search">
         <input type="text" class="input-medium search-query"/>
         <button type="submit" class="btn btn-primary">Search</button>
       </form>

       <h2>Ergebnisse</h2>

       <!-- Tabelle mit abwechselnder Zellenhintergrundfarbe und Außenrahmen -->
       <table class="table table-striped table-bordered">
         <thead>
           <tr>
             <th>#</th>
             <th>Title</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>1</td>
             <td>Lorem ipsum dolor sit amet</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Consetetur sadipscing elitr</td>
           </tr>
           <tr>
             <td>3</td>
             <td>At vero eos et accusam</td>
           </tr>
         </tbody>
       </table>
     </section>
   </body>
 
 </html>

Handhabung

Die Extension Bootstrap liefert das Framework
Koppelbar mit Themes wie Chameleon, die Bootstrap verwenden
BootstrapComponents liefert für Editoren einfacheren Zugriff auf Bootstrap-Komponenten
Benutzbar durch PHP-Befehle in der LocalSettings.php

Vorgehensweise/Hinweise

Einfach die Extension Bootstrap installieren reicht nicht (Kann zu Fehlern im Wiki führen!)
Auch das angeblich einfache Einfügen der Bootstrap Styles funktioniert nicht (Führt dazu, dass die Wiki sich nicht lädt!)

Anhang

Siehe auch

MediaWiki/Extension/Bootstrap

Links

Weblinks

@@ Zeile 1: / Zeile 1: @@
-Bootstrap ist ein Framework, das unter vielen Websites liegen kann. Auch für die Wiki gibt es eine Extension, um Bootstrap zu integrieren.
+'''MediaWiki Bootstrap-Extension''' - [[Bootstrap]] in MediaWiki integrieren
-==Bootstrap==
+== Beschreibung ==
-*Freies CSS-Frontend Framework
+Bootstrap ist ein Framework, das unter vielen Websites liegen kann
-*Gestaltungsvorlagen basieren auf HTML und CSS
+* Auch für die Wiki gibt es eine Extension, um Bootstrap zu integrieren
-*Vorlagen für Typografie, Formulare, Navigationselemtente etc...
-*Zusätliche JavaScript-Erweiterungen
-*Entwickelt von Twitter
-==Extension==
+=== Bootstrap ===
-*Liefert Bootstrap 4
+Freies CSS-Frontend Framework
-*Derzeit ist die Extension auf Version 4.2
+* Gestaltungsvorlagen basieren auf HTML und CSS
+* Vorlagen für Typografie, Formulare, Navigationselemtente etc...
+* Zusätliche JavaScript-Erweiterungen
+* Entwickelt von Twitter
-===Installation===
+Der Code-Block zeigt einen typischen HTML-Aufbau mit Einbindung von Bootstrap
-*Zwei Möglichkeiten: Als Tar herunterladen oder per Composer
+<syntaxhighlight lang="html" line>
-*Die Tar-Vorgehensweise ist relativ neu
+ <!DOCTYPE html>
+ <html>
+   <head>
+     <title>Bootstrap Beispiel</title>
+     <meta charset="UTF-8">
-===Handhabung===
+     <!-- Einbinden des Bootstrap-Stylesheets -->
-*Einsatz von Themes z.b. ''Chameleon''
+     <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
+     <!-- optional: Einbinden der jQuery-Bibliothek -->
+     <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
-==Quellen==
+     <!-- optional: Einbinden der Bootstrap-JavaScript-Plugins -->
-#https://www.mediawiki.org/wiki/Extension:Bootstrap
+     <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
-#https://getbootstrap.com/
+   </head>
+   <body>
+     <section class="container">
+       <h1>Suche</h1>
+       <p>Beispiel für ein einfaches Suchformular.</p>
+       <!-- Suchformular mit Eingabefeld und Button -->
+       <form class="well form-search">
+         <input type="text" class="input-medium search-query"/>
+         <button type="submit" class="btn btn-primary">Search</button>
+       </form>
+       <h2>Ergebnisse</h2>
+       <!-- Tabelle mit abwechselnder Zellenhintergrundfarbe und Außenrahmen -->
+       <table class="table table-striped table-bordered">
+         <thead>
+           <tr>
+             <th>#</th>
+             <th>Title</th>
+           </tr>
+         </thead>
+         <tbody>
+           <tr>
+             <td>1</td>
+             <td>Lorem ipsum dolor sit amet</td>
+           </tr>
+           <tr>
+             <td>2</td>
+             <td>Consetetur sadipscing elitr</td>
+           </tr>
+           <tr>
+             <td>3</td>
+             <td>At vero eos et accusam</td>
+           </tr>
+         </tbody>
+       </table>
+     </section>
+   </body>
+ </html>
+</syntaxhighlight>
+==Handhabung==
+*Die Extension ''Bootstrap'' liefert das Framework
+*Koppelbar mit Themes wie ''Chameleon'', die Bootstrap verwenden
+*''BootstrapComponents'' liefert für Editoren einfacheren Zugriff auf Bootstrap-Komponenten
+*Benutzbar durch PHP-Befehle in der ''LocalSettings.php''
+==Vorgehensweise/Hinweise==
+# Einfach die Extension ''Bootstrap'' installieren reicht nicht (Kann zu Fehlern im Wiki führen!)
+# Auch das angeblich einfache Einfügen der Bootstrap Styles funktioniert nicht (Führt dazu, dass die Wiki sich nicht lädt!)
+<noinclude>
+== Anhang ==
+=== Siehe auch ===
+{{Special:PrefixIndex/{{BASEPAGENAME}}}}
+==== Links ====
+===== Weblinks =====
+# https://www.mediawiki.org/wiki/Extension:Bootstrap
+# https://getbootstrap.com/
+# https://www.mediawiki.org/wiki/Extension:BootstrapComponents
+# https://o7planning.org/de/11745/bootstrap
+[[Kategorie:MediaWiki/Extension]]
+[[Kategorie:CSS]]
+</noinclude>