Semantic UI入门

安装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是上一步中下载生成的内容。

第二步：创建页面

网页源代码：

    
        
        按钮
        
        
        
    
    
        按钮的样式
        标准按钮
        
        标准按钮
        
        

        紧凑按钮
        基础按钮
        
            个人信息
        
        
        

        
        主要
        次要
        
        

        积极
        消极
        
        

        
        激活状态
        禁用状态
        加载状态
        
        

        
        正常
        
        

        
        
            
            Facebook
        
        
            
            Twitter
        
        
            
            LinkedIn
        
        
            
            Instagram
        
        
            
            YouTube
        
        
            
            Google
        
        
            
            Google Plus
        
    

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

默认效果：

修改样式

首先进入semantic目录，然后执行gulp watch命令： 然后打开源代码theme.config，按如下所示修改： 修改后保存文件，控制台会自动编译： 最终浏览器查看效果： 若修改为amazon 则效果：