MediaWiki/Extension/Bootstrap: Unterschied zwischen den Versionen
Keine Bearbeitungszusammenfassung |
|||
| Zeile 2: | Zeile 2: | ||
== Beschreibung == | == Beschreibung == | ||
Bootstrap ist ein Framework, das unter vielen Websites liegen kann | |||
* Auch für die Wiki gibt es eine Extension, um Bootstrap zu integrieren | * Auch für die Wiki gibt es eine Extension, um Bootstrap zu integrieren | ||
=== Bootstrap === | === Bootstrap === | ||
Freies CSS-Frontend Framework | |||
* Gestaltungsvorlagen basieren auf HTML und CSS | * Gestaltungsvorlagen basieren auf HTML und CSS | ||
* Vorlagen für Typografie, Formulare, Navigationselemtente etc... | * Vorlagen für Typografie, Formulare, Navigationselemtente etc... | ||
| Zeile 13: | Zeile 13: | ||
Der Code-Block zeigt einen typischen HTML-Aufbau mit Einbindung von Bootstrap | Der Code-Block zeigt einen typischen HTML-Aufbau mit Einbindung von Bootstrap | ||
<syntaxhighlight lang="html" line> | |||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
| Zeile 72: | Zeile 73: | ||
</html> | </html> | ||
</syntaxhighlight> | |||
==Handhabung== | ==Handhabung== | ||
Version vom 19. Oktober 2024, 11:05 Uhr
MediaWiki Bootstrap-Extension -
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 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
- https://www.mediawiki.org/wiki/Extension:Bootstrap
- https://getbootstrap.com/
- https://www.mediawiki.org/wiki/Extension:BootstrapComponents