菜单

入门
开始使用语义 UI

前言

使用构建工具

语义 UI 打包了 Gulp 构建工具,以便你的项目可以保留其自定义主题更改

安装语义 UI 的最简单方法是使用我们的 NPM 包,该包包含特殊的安装脚本,使安装交互式,更新无缝。

有关使用 Ember、React 或 Meteor 等特定集成进行安装,请参阅我们的集成指南

有关将语义 UI 任务集成到自己的构建工具中,或使用 CDN,请参阅我们的食谱部分。

更简单的设置

如果你使用语义 UI 作为依赖项,并且只想使用我们的默认主题,请使用我们更轻量级的semantic-ui-csssemantic-ui-less仓库。如果你只需要文件,可以从 GitHub 下载它们作为 zip。

下载 Zip 查看所有 Semantic-Org 仓库

安装

安装 NodeJS

如果你不熟悉设置 NodeJS,你可以按照以下步骤操作,或者查看下载页面nodejs.org

选项 1:Homebrew

安装homebrew

brew install node

选项 2:Git

git clone git://github.com/nodejs/node.git cd node ./configure make sudo make install

通过 PPA 安装

虽然Chris Lea 的 PPA曾经是安装 node 的最佳方式,但现在已经过时了。

安装语义 UI 的推荐路径是使用Joyent 的包管理器指南。

Ubuntu

curl --silent --location https://deb.nodesource.com/setup_6.x | sudo bash - sudo apt-get install --yes nodejs

Debian

apt-get install curl curl --silent --location https://deb.nodesource.com/setup_6.x | bash - apt-get install --yes nodejs

Red Hat

curl --silent --location https://rpm.nodesource.com/setup | bash - yum -y install nodejs

安装 exe

下载NodeJS 可执行文件

安装 Gulp

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

Gulp 是一个 NPM 模块,必须全局安装

npm install -g gulp

安装语义 UI

语义 UI 在 NPM 上以同名包的形式提供

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

包含在你的 HTML 中

运行 gulp 构建工具将编译 CSS 和 Javascript,以便在你的项目中使用。只需将这些文件链接到你的 HTML 中,以及最新的jQuery即可。

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css"> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="semantic/dist/semantic.min.js"></script>

更新

通过 NPM 更新

Semantic 的 NPM 安装脚本将自动将语义 UI 更新到最新版本,同时保留你的站点和打包的主题。

npm update

下一步

全部设置!

做得好!语义 UI 现在已准备就绪,可以开始使用。

查看如何使用gulp 命令和构建工具
了解有关更改主题的知识
查看食谱,了解如何在项目中使用语义 UI

调光器消息
调光器子标题