semantic-ui开始使用语义ui


备注

本节概述了semantic是什么,以及开发人员为什么要使用它。

它还应该提到语义ui中的任何大型主题,并链接到相关主题。由于semantic-ui的文档是新的,您可能需要创建这些相关主题的初始版本。

版本

发布日期
[2.2.10] 2017年3月28日
[2.2.9] 2017年2月21日
[2.2.8] 2017年2月21日
[2.2.7] 2016年12月21日
[2.2.6] 2016年10月27日
[2.2.5] 2016年10月27日
[2.2.4] 2016年8月25日
[2.2.3] 2016年8月21日
[2.2.2] 2016年7月7日
[2.2.1] 2016年6月27日
[2.2.0] 2016年7月26日
[2.1] 2015年9月2日
[1.12] 2015年4月13日
[1.0] 情节中字
[0.1] 2013年9月25日

通过NodeJS安装 - 推荐

建议通过NodeJS进行安装。它是首选,因为您可以使用它来构建文件,只选择您想要的组件。

第1步 :安装节点( 链接

第2步 :在您的计算机上全局安装Gulp(-g)

npm install -g gulp
 

语义UI使用Gulp提供命令行工具,仅使用您需要的组件来构建库的主题版本。

第3步 :在本地为您的项目安装Semantic-UI

cd /path/to/your/project

npm install semantic-ui --save
 

步骤4 :导航到保存语义ui的文件夹并运行以下gulp任务(这可能会自动完成)

cd node_modules/semantic-ui    
gulp install
 

这将启动交互式安装程序。只需按照说明选择所需的SUI元素,它将为您构建相关文件。

  • 您首先必须选择安装类型。首次用户可以选择自动模式来构建SUI
  • 然后你必须指定项目文件夹以及你想保存SUI的位置(默认是semantic/
  • 如果是自定义安装,您将获得选择所需组件的选项。

第5步 :链接到您的HTML

在HTML中链接已编译的CSS和JavaScript文件

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

全部完成!