semantic-uiErste Schritte mit Semantic-Ui


Bemerkungen

Dieser Abschnitt bietet einen Überblick über Semantic-Ui und warum ein Entwickler sie verwenden möchte.

Es sollte auch alle großen Themen innerhalb von Semantic-Ui erwähnen und auf die verwandten Themen verweisen. Da die Dokumentation für Semantic-Ui neu ist, müssen Sie möglicherweise erste Versionen dieser verwandten Themen erstellen.

Versionen

Ausführung Veröffentlichungsdatum
[2.2.10] 2017-03-28
[2.2.9] 2017-02-21
[2.2.8] 2017-02-21
[2.2.7] 2016-12-21
[2.2.6] 2016-10-27
[2.2.5] 2016-10-27
[2.2.4] 2016-08-25
[2.2.3] 2016-08-21
[2.2.2] 2016-07-07
[2.2.1] 2016-06-27
[2.2.0] 2016-07-26
[2.1] 2015-09-02
[1.12] 2015-04-13
[1.0] 2014-11-24
[0,1] 2013-09-25

Installation über NodeJS - Empfohlen

Die Installation über NodeJS ist die empfohlene Methode. Dies wird bevorzugt, da Sie damit Dateien erstellen können, die nur die gewünschten Komponenten auswählen.

Schritt 1 : Knoten installieren ( Link )

Schritt 2 : Installieren Sie Gulp global (-g) auf Ihrem Computer

npm install -g gulp
 

Semantic UI verwendet Gulp, um Befehlszeilentools zum Erstellen themenspezifischer Versionen der Bibliothek mit den benötigten Komponenten bereitzustellen.

Schritt 3 : Installieren Sie Semantic-UI lokal für Ihr Projekt

cd /path/to/your/project

npm install semantic-ui --save
 

Schritt 4 : Navigieren Sie zu dem Ordner, in dem Semantic-Ui gespeichert wurde, und führen Sie die folgende Schluckaufgabe aus.

cd node_modules/semantic-ui    
gulp install
 

Dadurch wird das interaktive Installationsprogramm gestartet. Folgen Sie einfach den Anweisungen, um die gewünschten SUI-Elemente auszuwählen, und die relevanten Dateien werden für Sie erstellt.

  • Sie müssen zuerst die Art der Installation auswählen. Zum ersten Mal können Benutzer den automatischen Modus zum Erstellen von SUI auswählen
  • Dann müssen Sie den Projektordner und den Ort angeben, an dem Sie SUI speichern möchten (Standardeinstellung ist semantic/ ).
  • Im Falle einer benutzerdefinierten Installation können Sie die gewünschten Komponenten auswählen.

Schritt 5 : Link zu Ihrem HTML-Code

Verknüpfen Sie die kompilierte CSS- und JavaScript-Datei in Ihrem HTML-Code

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>
 

Alles erledigt!