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