Semantic UI Guide

Programmierung

Was ist die semantische Benutzeroberfläche?

Die semantische Benutzeroberfläche ist ein Front-End-Entwicklungsframework, das dem für das Theming entwickelten Bootstrap ähnelt. Es enthält vorgefertigte semantische Komponenten, mit denen mithilfe von benutzerfreundlichem HTML schöne und reaktionsschnelle Layouts erstellt werden können.

Laut der Semantic UI-Website verwendet das Framework präzises HTML, intuitives JavaScript und vereinfachtes Debugging, um eine Front-End-Entwicklung zu einer unterhaltsamen und reizvollen Erfahrung zu machen.

Es lässt sich in React, Angular, Meteor, Ember und viele andere Frameworks integrieren, um die UI-Ebene neben der Anwendungslogik zu organisieren.

Versionsverlauf der semantischen Benutzeroberfläche

Die erste Vorveröffentlichung erscheint im September 2013 auf Github, erstellt von Jack Lukic.

Die semantische Benutzeroberfläche 1.xwurde erstmals im November 2014 mit grundlegenden Änderungen an früheren Vorabversionen veröffentlicht.

Die semantische Benutzeroberfläche 2.xwurde erstmals im Juni 2015 veröffentlicht und führte eine neue Benutzeroberfläche , mehrere Fehlerkorrekturen, Verbesserungen und Standard-Themenverbesserungen ein.

Unterstützung für semantische UI-Browser

Die aktuelle Version 2.2.xunterstützt die folgenden Browser

  • Letzte 2 Versionen FF, Chrome, Safari Mac
  • IE 11+
  • Android 4.4+, Chrome für Android 44+
  • iOS Safari 7+
  • Microsoft Edge 12+

So installieren Sie die semantische Benutzeroberfläche

Es gibt verschiedene Möglichkeiten, die semantische Benutzeroberfläche zu installieren. Einige der einfachsten sind die folgenden:

Über das Content Delivery Network (CDN)

Es ist bei weitem das einfachste für Anfänger. Erstellen Sie eine HTML-Datei wie folgt

   Semantic UI

NOTE:Der obige CDN-Link in Zeile 5 enthält alle verfügbaren Komponenten in der semantischen Benutzeroberfläche. Wenn Sie eine bestimmte Komponente installieren möchten, klicken Sie hier, um den entsprechenden CDN-Link anzuzeigen.

Build Tools verwenden

Dies setzt voraus, dass Sie Ubuntu Linux OS verwenden nodeund npminstalliert haben. Für andere Betriebssysteme klicken Sie hier

Installieren Sie gulp in Ihrem Projektverzeichnis global mit npm

npm install -g gulp

Installieren Sie die semantische Benutzeroberfläche

npm install semantic-ui --save cd semantic/ gulp build

In HTML einbinden

Update über npm

npm update

Integration mit anderen Frameworks

Sie können die semantische Benutzeroberfläche in andere Front-End-Entwicklungsframeworks wie React, Angular, Ember oder Meteor integrieren. Klicken Sie hier, um weitere Informationen und Integrationsanweisungen zu erhalten.

Weitere Informationen zur semantischen Benutzeroberfläche:

Die semantische Benutzeroberfläche verfügt über eine gründliche und sehr gut organisierte Dokumentation, mit der Sie in kürzester Zeit einsatzbereit sind. Die folgenden Links sind hilfreich für Ihre Reise zur semantischen Benutzeroberfläche.

  • Semantische UI-Website
  • Erste Schritte mit der semantischen Benutzeroberfläche
  • Beispielvorlagen für semantische Benutzeroberflächen
  • Anpassen und Erstellen semantischer UI-Designs