semantic-uiAan de slag met semantic-ui


Opmerkingen

Deze sectie biedt een overzicht van wat semantic-ui is en waarom een ontwikkelaar het misschien wil gebruiken.

Het moet ook alle grote onderwerpen binnen semantic-ui vermelden en naar de gerelateerde onderwerpen verwijzen. Aangezien de documentatie voor semantic-ui nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.

versies

Versie Publicatiedatum
[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

Installatie via NodeJS - Aanbevolen

Installatie via NodeJS is de aanbevolen methode. Het heeft de voorkeur omdat u het kunt gebruiken om de bestanden samen te stellen die alleen de gewenste componenten selecteren.

Stap 1 : Installeer knooppunt ( link )

Stap 2 : Installeer Gulp wereldwijd (-g) op uw computer

npm install -g gulp
 

Semantic UI gebruikt Gulp om opdrachtregelprogramma's te bieden voor het bouwen van themaversies van de bibliotheek met alleen de componenten die u nodig hebt.

Stap 3 : Installeer Semantic-UI lokaal voor uw project

cd /path/to/your/project

npm install semantic-ui --save
 

Stap 4 : Navigeer naar de map waarin semantic-ui is opgeslagen en voer de volgende sliktaak uit (dit kan automatisch worden gedaan)

cd node_modules/semantic-ui    
gulp install
 

Hiermee wordt het interactieve installatieprogramma gestart. Volg gewoon de instructies om de gewenste SUI-elementen te selecteren en het zal de relevante bestanden voor u bouwen.

  • U moet eerst het type installatie kiezen. Gebruikers kunnen voor het eerst de Automatische modus kiezen om SUI te bouwen
  • Vervolgens moet u de projectmap opgeven en waar u SUI wilt opslaan (standaard is semantic/ )
  • In het geval van een aangepaste installatie, krijgt u de optie om de gewenste componenten te kiezen.

Stap 5 : Link naar uw HTML

Koppel het gecompileerde CSS- en JavaScript-bestand in uw HTML

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

Helemaal klaar!