安装Semantic UI

semantic UI可以有两种方式安装：

直接下载压缩包，解压后调用就可以使用了
用gulp进行安装

用gulp安装的优点是可以自己修改sementic ui中的样式，这样就更灵活一点，而最简化安装方式下不能修改，只能用默认样式。

要先安装gulp，而安装gulp是NPM的一个模块，所以需要先安装NPM，而NPM又是node.js的一个模块，所以，就需要安装node.js，所以：

第一步：安装node.js

提示：官网有两个版本可以选择，最好是选LTS版本，这个是长期支持版本。node自带npm，所以不需要额外安装。

第二步：安装gulp：

安装命令： npm install -g gulp

第三步就是安装semantic UI

CD到需要安装semantic的文件夹，然后输入：

下载Semantic UI的源代码：npm install semantic-ui --save

其中：

Automatic：自动配置，一切都用默认的设置。
Express：快速设置，只需要设置组件还有输出的目录。
Custom：自定义，完全自己去定义 src/dist 目录
选择默认的 Automatic ，回车执行，又会提示：

问我们当前目录是不是我的项目的目录， Yes ，再回车执行

意思是要把 Semantic UI 放在项目目录的哪个目录的下面，默认这个目录就是 semantic 。回车执行，会完成安装，查看项目目录下面的东西，会看到：

编译SemanticUI

cd到目录semantic-ui/semantic

命令：gulp build

编译后会生成目标文件夹dist，以后我们要使用的就是这个文件夹下面生成的文件。

使用Semantic UI

示例：修改默认样式。

第一步：创建项目导入文件

按如下所示创建目录：

说明：上面semantic-ui是上一步中下载生成的内容。

第二步：创建页面

网页源代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>按钮</title><link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css"><script type="text/javascript" src="js/jquery3.3.1.js"></script><script type="text/javascript" src="semantic-ui/semantic/dist/semantic.min.js"></script></head><body><h2>按钮的样式</h2><button class="ui button">标准按钮</button><!--除了<button>标签外，<div>标签也可以创建按钮--><div class="ui button">标准按钮</div><br><br><button class="ui compact button">紧凑按钮</button><button class="ui basic button">基础按钮</button><button class="ui basic button"><i class="user icon"></i>个人信息</button><br><br><!--优先级按钮--><button class="ui primary button">主要</button><button class="ui secondary button">次要</button><br><br><button class="ui positive button">积极</button><button class="ui negative">消极</button><br><br><!--表示状态的按钮--><button class="ui active button">激活状态</button><button class="ui disabled button">禁用状态</button><button class="ui teal huge loading button">加载状态</button><br><br><!--表示状态切换的按钮--><button class="ui toggle button">正常</button><br><br><!--社交 (Social)--><button class="ui facebook button"><i class="facebook icon"></i>Facebook</button><button class="ui twitter button"><i class="twitter icon"></i>Twitter</button><button class="ui linkedin button"><i class="linkedin icon"></i>LinkedIn</button><button class="ui instagram button"><i class="instagram icon"></i>Instagram</button><button class="ui youtube button"><i class="youtube icon"></i>YouTube</button><button class="ui google button"><i class="google icon"></i>Google</button><button class="ui google plus button"><i class="google plus icon"></i>Google Plus</button></body>
</html>

注：emantic-ui的使用需要引入jQuery。

默认效果：

修改样式

首先进入semantic目录，然后执行gulp watch命令：

然后打开源代码theme.config，按如下所示修改：

修改后保存文件，控制台会自动编译：

最终浏览器查看效果：

若修改为amazon

则效果：

Semantic UI入门相关推荐

Semantic UI入门示例
1.下载Semantic UI包引入相关文件遇到各种各样的问题,比如icon找不到.无动效等问题,所以通过链接的方式引入文件. 2.在页面引入文件(按照顺序) 引入文件内容如下: <li ...
php ci框架后台管理,ci: 羽翼后台管理平台是一个简单的博客系统，后端基于CodeIgniter，前端基于Semantic UI 2.2.10...
羽翼后台管理平台(博客系统) 羽翼的由来羽翼的故事是9月20日的晚上,我突然就想到--造翼者小说.我通过自己构思不少的东西.羽毛代表着轻松.纯洁和神圣的:翼代表着升天和梦想,两者在一起的含义:带着一 ...
Semantic UI 之图标 icon
第一步:创建项目添加JQuery和Semantic UI包.创建icon.html页面: 第二步:icon.html页面 <!DOCTYPE html> <html lang=&q ...
semantic ui html5,Semantic UI ：安装 Semantic UI
对 Semantic UI 有兴趣可以参考宁皓网的 Semantic UI 课程包,订阅宁皓网就可以学习全部课程了. Semantic UI 是一套开源的 CSS 与 JavaScript 框架,提供 ...
semantic.css,CSS框架：Semantic UI的优缺点
Semantic UI 作为一名全栈开发人员,Jack Lukic使用自然语言原理创建了Semantic UI框架.凭借着jQuery和LESS功能,Semantic UI提供了光滑.平整且精细的外观 ...
semantic ui html5,css中什么是Semantic UI框架？
什么是Semantic UI框架? Semantic UI是一个用户友好度爆表的响应式前端框架,具备3000多个主题变量和50多个UI组件,可以快速搭建漂亮的网页.Semantic UI还集成了许多第 ...
Semantic Ui 之容器 container
第一步:创建项目添加JQuery和Semantic UI包.创建container.html页面: 第二步:container.html页面 <!DOCTYPE html> <ht ...
Semantic UI术语
Semantic UI 的特定术语术语类型一.组件类型 (Types of Components) 二.工程术语 (Project Terminology) 三.定义术语 (Definition ...
【新手必读】Unreal Engine 4 UI入门教程（下）
本文是<Unreal Engine 4 UI 入门教程的下半部分,上半部分请见<Unreal Engine 4 UI 入门教程(上)> 作者|Tommy Tran Aug 3 201 ...

Semantic UI入门