Semantic UI入门

第一步：安装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">
        <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>
        <h2>按钮的样式</h2>
        <button class="ui button">标准按钮</button>
        <!--除了<button>标签外，<div>标签也可以创建按钮-->
        <div class="ui button">标准按钮</div>
        <button class="ui compact button">紧凑按钮</button>
        <button class="ui basic button">基础按钮</button>
        <button class="ui basic button">
            <i class="user icon"></i>个人信息
        </button>
        <!--优先级按钮-->
        <button class="ui primary button">主要</button>
        <button class="ui secondary button">次要</button>
        <button class="ui positive button">积极</button>
        <button class="ui negative">消极</button>
        <!--表示状态的按钮-->
        <button class="ui active button">激活状态</button>
        <button class="ui disabled button">禁用状态</button>
        <button class="ui teal huge loading button">加载状态</button>
        <!--表示状态切换的按钮-->
        <button class="ui toggle button">正常</button>
        <!--社交 (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 UIsemantic UI可以有两种方式安装一种是直接下载压缩包，解压后调用就可以使用了；另一种方式是用gulp进行安装。用gulp安装的优点是可以自己修改sementic ui中的样式，这样就更灵活一点，而最简化安装方式下不能修改，只能用默认样式。要先安装gulp，而安装gulp是NPM的一个模块，所以需要先安装NPM，而NPM又是node.js的一个模块，所以，就需要安装node.js， 所以：第一步：安装node.js，提示：官网有两个版本可以选择，最好是选LTS版本，
				Semantic UI 是一套开源的 CSS 与 JavaScript 框架，提供了一些设计好的界面组件，你可以在项目里直接使用这些组件。只需要引入相应的CSS和JavaScript即可使用啦。
<link rel="stylesheet" href="https://ninghao.net/semantic/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.mi
				Semantic UI是一个逼格很高的前端框架，用了他，可以让你随时啪啪打设计经理、产品经理的脸。
但Semantic UI也是一个上手难度非常高的框架，尤其是他零散的className，而且这些className各自又能互相组合使用，所以，没有一定的耐性，可能会觉得他是一个巨啰嗦的框架。
虽然，Semantic UI也提供了很多Module View的套路样式封装，然而他的思想和Boo...
				好久又没有写博客了，总是以忙为借口，哎，知识如果只图一时的学习之快，不加以总结输出，总是会忘记。希望自己可以好好规划一下吧。最近任务需要，学习了semantic-ui这个前端框架。这里先基本记录一下如何去使用它。
我在网上找到了一个semantic-ui的中文文档网站：semantic-ui文档
这里面，讲述了semantic-ui各个组件的使用方法，非常详细。具体的使用方法，就是在HTML中...
      **Semantic UI**框架是前端的一个框架，最近在一直学习这个框架。从个人的感觉上来说，相比于其他框架，它的优势在于对于移动端页面和客户端页面的响应式布局，以及强大的UI组件库等。在页面组件设计上，它的组件灵活生动，不那么直板僵硬，冗余度和创造性较高。在语法方面，相较于前端其他框架，也容易上手理解。下面就是我的Semantic框架学习日志，虽然我的文笔有限，写的可能不太好，但我争取分享一些干货，也算是帮助大家一起学习共同进步。
    争取每日一更吧，希望各位大佬能够多多指点~
在项目中引入三个文件。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script src="http://code