Auf GitHub anzeigen

Bootstrap Table Online Editor

Online-Editor-Erklärung.

Auf dieser Seite

Diese Seite erklärt, wie Sie unseren Online-Editor verwenden können.

Der Online-Editor sollte für jedes Issue und jeden Pull Request verwendet werden!

Bootstrap Table Live Editor

Wie man sich anmeldet

Die Anmeldung ist ganz einfach, klicken Sie einfach auf die Schaltfläche Mit GitHub anmelden oben rechts und melden Sie sich über GitHub an.

Grundfunktionen und Seitenstruktur

Unser Online-Editor wurde entwickelt, um einfach Beispiele/Demos für die Bootstrap-Table zu erstellen.

Die Seite ist wie folgt strukturiert:

obere Navigationsleiste

Wir haben 5 Schaltflächen:

  • Ausführen: Die Schaltfläche Ausführen zeigt die aktuelle Version Ihres Beispiels.
  • Speichern: Die Schaltfläche Speichern speichert Ihr Beispiel. Nachdem Sie auf Speichern geklickt haben, ändert sich die URL z. B. in https://live.bootstrap-table.com/code/<username>/<ID>.
  • Bibliotheken: Diese Schaltfläche öffnet eine Konfigurationsseite. Auf dieser Seite können Sie die Umgebung des Beispiels konfigurieren:
    • Bootstrap Table-Quelle: Diese Option definiert, welche Version der Quelle (CDN oder von GitHub als Quelle) verwendet werden soll. Wenn Sie Von GitHub src auswählen, können Sie einen Branch festlegen, der für das Beispiel verwendet wird. Für Issues verwenden Sie normalerweise immer Von veröffentlichtem CDN.
    • Veröffentlichte CDN-Version: Hier können Sie die Version der Bootstrap-Table auswählen, um ein Beispiel für ältere Bootstrap-Table-Versionen zu erstellen.
    • Theme: Hier können Sie zwischen unseren unterstützten Themes auswählen, z. B. um ein Problem mit einem bestimmten Theme zu zeigen.
    • Erweiterungen: Wenn Sie erklären, eine Erweiterung zu verwenden, können Sie sie hier einfach auswählen. Das bedeutet, dass Sie sie nicht selbst in das Beispiel einfügen müssen!
  • Beispiele laden: Diese Option öffnet eine Seite, auf der Sie bestehende Beispiele laden können (es ist ein “Spiegel” unserer Beispielseite).
  • Links: Die letzte Schaltfläche enthält einfach einige Links, z. B. zu unserer Website, GitHub-Seite usw.

Linke Seite

Sie können Ihre Beispiele schreiben. Dazu gehören HTML, CSS und JavaScript (CSS und JavaScript benötigen ein <style></style>- und/oder <script></script>-Tag!

Das grundlegende Template lautet:

<!-- Includes custom css and js files -->
<link rel="stylesheet" href="https://example.com/custom.css">
<script src="https://example.com/custom.js"></script>

<!-- Define custom style -->
<style>
</style>

<!-- No need to write <html> and <body> tags -->
<table id="table">
</table>

<script>
  $(function () {
    $('#table').bootstrapTable()
  })
</script>

Hinweis: Sie müssen die Initialisierungsfunktion in $(function () {}) einfügen, um sicherzustellen, dass jQuery und Bootstrap-Table geladen wurden.

Rechte Seite

Sie können Ihr laufendes Beispiel sehen (nachdem Sie auf die Schaltfläche Ausführen gedrückt haben).

Sie können auch auf Ergebnis (Vollbild) klicken, um den Vollbildmodus des laufenden Beispiels umzuschalten.

Workflow für Issues

Jedes Issue sollte ein Beispiel (erstellt im Online-Editor) des Problems enthalten.

  1. Öffnen Sie den Online-Editor.
  2. Gehen Sie zur Bibliotheksseite und konfigurieren Sie die Umgebung des Beispiels.
  • Version
  • Theme
  • Erweiterungen
  1. Schreiben Sie Ihr Beispiel (oder kopieren Sie es aus Ihrem lokalen Projekt).
  2. Überprüfen Sie, ob Sie Ihr Problem auf dem Beispiel reproduzieren können.
  3. Speichern Sie das Beispiel (drücken Sie die Schaltfläche Speichern) und kopieren Sie die URL.
  4. Öffnen Sie ein Issue mit der URL zum Beispiel.

(Vielleicht können Sie auch unsere Schaltfläche Beispiele laden verwenden, um ein bestehendes Beispiel zu laden, statt Punkt 2 und 3).

Workflow für Pull-Requests

Der Workflow für PRs ist dem Workflow für Issues ziemlich ähnlich.

Der einzige Unterschied besteht darin, dass Sie Ihren Branch auswählen müssen (der Editor verwendet Ihren Code, um das Beispiel zu erstellen). Dazu müssen Sie die Bibliotheksseite öffnen, Von GitHub src in der Option Bootstrap Table-Quelle auswählen und Ihren Branch-Namen in das Eingabefeld GitHub src Branch schreiben. Die Syntax für den Branch-Namen ist <username>:<branch>. Sie können diese Zeichenkette auch von der Pull-Request-Seite kopieren.