MediaWiki/Extension/Bootstrap: Unterschied zwischen den Versionen
Keine Bearbeitungszusammenfassung |
K Dirkwagner verschob die Seite MediaWiki:Extensions:Bootstrap nach MediaWiki/Extension/Bootstrap, ohne dabei eine Weiterleitung anzulegen |
||
(17 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
Zeile 7: | Zeile 7: | ||
*Zusätliche JavaScript-Erweiterungen | *Zusätliche JavaScript-Erweiterungen | ||
*Entwickelt von Twitter | *Entwickelt von Twitter | ||
Der Code-Block zeigt einen typischen HTML-Aufbau mit Einbindung von Bootstrap | |||
<nowiki><!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></nowiki> | |||
==Handhabung== | ==Handhabung== | ||
Zeile 13: | Zeile 74: | ||
*''BootstrapComponents'' liefert für Editoren einfacheren Zugriff auf Bootstrap-Komponenten | *''BootstrapComponents'' liefert für Editoren einfacheren Zugriff auf Bootstrap-Komponenten | ||
*Benutzbar durch PHP-Befehle in der ''LocalSettings.php'' | *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! | |||
Zeile 18: | Zeile 83: | ||
#https://www.mediawiki.org/wiki/Extension:Bootstrap | #https://www.mediawiki.org/wiki/Extension:Bootstrap | ||
#https://getbootstrap.com/ | #https://getbootstrap.com/ | ||
#https://www.mediawiki.org/wiki/Extension:BootstrapComponents | |||
== Weitere Informationen == | |||
# https://o7planning.org/de/11745/bootstrap | |||
[[Kategorie:MediaWiki/Extension]] | |||
[[Kategorie:CSS]] |
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
- 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