MediaWiki/Extension/Bootstrap: Unterschied zwischen den Versionen

Versionsgeschichte interaktiv durchsuchen

Aktuelle Version vom 31. Mai 2024, 12:35 Uhr

Bootstrap ist ein Framework, das unter vielen Websites liegen kann. Auch für die Wiki gibt es eine Extension, um Bootstrap zu integrieren.

Bootstrap[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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!

Quellen[Bearbeiten | Quelltext bearbeiten]

Weitere Informationen[Bearbeiten | Quelltext bearbeiten]

https://o7planning.org/de/11745/bootstrap