Bootstrap Sandbox

Mit den richtigen Werkzeugen ist es, auch mit einfachen Voraussetzungen oder kleinen Projekten mit wenig Aufwand, mögich Bootstrap einzusetzen. Die hier abgebildeten Beispiele beginnen mit nur einer verlinkten Bootstrap-Datei (bootsstrap.css).

Um die "Ersten Schritte" mit Bootstrap übersichtich zu gestalten, habe ich diesen "Sandbox-Editor" gebaut. Damit kann die Bootstrap-Welt spielerisch untersucht werden. Einige praktische Tools sind im Editor integriert:

  • Die Ausgabe des Quelltext erfolgt dynamisch und direkt im darunterliegenden Frame
  • CSS-Eigenschaften können direkt mit internen Regeln erstellt werden
  • Zusätzliche Bibliotheken können im frei editierbaren head-Bereich verlinkt werden
  • Die gesamte Ausgabe lässt sich mit einem Klick in die Zwischenabage kopieren (und in einer eigenen Datei wieder einfügen)
  • Farbgebung des Codes, Zeilennummern und Einzüge sind bereitgestellt
  • Die Kurzschreibweise von "Emmet" lässt sich anwenden und mit der Taste (TAB) entpacken
  • Die Editor-Fenster bieten verschiedene Grösseneinstellungen (Responsiv, Hhe 300px, Höhe geasmter-Code Fullscreen (Taste F11)

In der Spalte neben dem Editor finden sich teils Anregungen, Tipps, Links oder Code-Snippets zu experimentieren.

Viel Spass mit Bootstrap und dem Sandbox-Editor, Albert America

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.
HTML Elemente