MediaWiki/Extension/Bootstrap

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 Bootstrap-Elementen

<!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 in der Wiki führen!)
Auch das angeblich einfache Einfügen der Bootstrap Styles funktioniert so nicht (Führt dazu, dass die Wiki sich nicht lädt!)

Bootstrap

Handhabung

Vorgehensweise/Hinweise

Quellen