菜单

开始使用
开始使用 Semantic UI

前言

使用构建工具 (Using Build Tools)

Semantic UI 打包了 Gulp 构建工具,所以你可以使用 自己修改过的主题

安装 Semantic UI 的最简单的方式是使用我们的 NPM 包管理,它包含了我们特殊的安装脚本,能很好的进行交互式安装和无缝的更新。

安装特定的集成,比如:Ember, React, 或者 Meteor, 请看 集成指南

想将 Semantic UI 集成到我们自己的构建工具中,或者想知道如何使用 CDN,请查看 高级 部分。

最简单的安装

如果你只想最简单的使用 Semantic UI,不需要自定义设置,只是用默认的主题,那么可以使用我们轻量级的 semantic-ui-css 或者 semantic-ui-less 。从下面下载 GitHub 中的最新 ZIP 压缩包。

下载 Zip 查看 Semantic-Org

安装

安装NodeJS (Install 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 安装

虽然 PPA 曾经是node最好的安装方法,但现在已经过时了。

我们建议的安装方法是使用 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 (Install Gulp)

Semantic UI 使用 Gulp 的命令行工具来构建你的主题。

Gulp 是 NPM 的一个模块,首先必须全局安装。

npm install -g gulp

安装 Semantic UI

Semantic UI 在 NPM 中是一个可用的名称

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

在HTML中包含 (Include in Your HTML)

运行 gulp 构建工具将会在你的项目中编译出 CSS 和 Javascript 文件。把编译出的文件和最新的 jQuery 一起包含到HTML中就可以使用 Semantic UI了。

<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更新 (Updating via NPM)

Semantic 的 NPM 安装脚本将自动将 Semantic UI 更新到最新版本,同时能保存当前站点的设置和主题。

npm update

下一步

准备就绪 (All Set!)

现在,Semantic UI 就可以随时使用了。

查看 gulp 命令行 以及 构建工具 的使用
了解 修改主题
查看 Semantic UI 的 高级 使用