Semantic UI

Install Semantic UI

Semantic UI is available in an eponymous package on NPM

npm install semantic-ui --save
cd semantic/
gulp build
Include in Your HTML

Running the gulp build tools will compile CSS and Javascript for use in your project. Just link to these files in your HTML along with the latest jQuery.



文章目录

后续此博客不再更新,欢迎大家搜索关注微信公众号“测开之美”,测试开发工程师技术修炼小站,持续学习持续进步。
Semantic UI_第1张图片

简介

网页开发中,CSS控制网页样式。作为测试开发工程师,我个人不太擅长手写CSS、样式微调、兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题。前端框架百花齐放,我们公司的产品使用了Bootstrap,我个人使用的是Semantic UI。

安装Semantic UI

首先需要安装node、全局安装gulp(我使用的是Mac环境):

  • brew install node
  • sudo npm install -g gulp

然后进入项目的静态文件目录,比如我的是/learnflask/static,执行npm install semantic-ui --save,进行一些Semantic UI的设置后,安装完成(我设置的Semantic UI目录是/learnflask/static/semantic)后cd到Semantic UI目录,执行gulp build命令。

使用Semantic UI

使用Semantic UI,只需要在HTML文件头部引入如下3个文件即可(使用了又拍云的jQuery的CDN):

`

` 

*   1
*   2
*   3

按钮

学习前端框架无非是学习其各个组件,我们先从按钮开始。

标准按钮

`` 

*   1

样式如下:
这里写图片描述

除了 ` * 1 * 2

样式如下:
这里写图片描述

动画效果按钮

水平切换

`
下一步
` * 1 * 2 * 3 * 4 * 5 * 6

样式如下:
这里写图片描述

垂直切换

`
购物车
` * 1 * 2 * 3 * 4 * 5 * 6

样式如下:
这里写图片描述

淡入淡出

`
购买
` * 1 * 2 * 3 * 4

样式如下:
这里写图片描述

空心按钮

`` 

*   1
*   2
*   3

样式如下:
这里写图片描述

阴性、阳性按钮

`
` 

*   1
*   2

样式如下:
这里写图片描述

不同颜色的按钮

 `
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15
*   16
*   17
*   18
*   19
*   20
*   21
*   22
*   23
*   24
*   25
*   26

样式如下:
这里写图片描述

反转色按钮

 `
` * 1 * 2 * 3 * 4 * 5 * 6 * 7 * 8 * 9 * 10 * 11 * 12 * 13 * 14 * 15 * 16 * 17 * 18 * 19 * 20 * 21 * 22 * 23 * 24 * 25 * 26 * 27 * 28 * 29 * 30 * 31 * 32

样式如下:
Semantic UI_第2张图片

带图标的按钮

`
云存储
` * 1 * 2 * 3

样式如下:
这里写图片描述

表示状态的按钮

激活状态

`` 

*   1

样式如下:
这里写图片描述

不可点击的按钮

`` 

*   1

样式如下:
这里写图片描述

加载状态按钮

`` 

*   1

样式如下:
这里写图片描述

表示状态切换的按钮

Semantic UI_第3张图片

样式如下:

这里写图片描述

带标签的按钮

默认标签在右侧

`
Like
2,048
` * 1 * 2 * 3 * 4 * 5 * 6 * 7 * 8 * 9

样式如下:
这里写图片描述

标签在左侧且带向右的箭头(蓝色实心)

`
1,024
Forks
` * 1 * 2 * 3 * 4 * 5 * 6

样式如下:
这里写图片描述

标签为图标的按钮

`
` 

*   1
*   2
*   3
*   4
*   5
*   6

样式如下:
这里写图片描述

按钮分组

普通按钮分组

可以为组设置统一的颜色:

`
` * 1 * 2 * 3 * 4

样式如下:
这里写图片描述

还可以设置其他属性,比如按钮大小、是否空心等等。

垂直显示的分组

可以设置整个组为空心按钮:

`
` * 1 * 2 * 3 * 4

样式如下:
这里写图片描述

图标按钮分组

`
` * 1 * 2 * 3 * 4 * 5 * 6 * 7 * 8 * 9 * 10 * 11

样式如下:
这里写图片描述

带标签的按钮分组

 `
` * 1 * 2 * 3 * 4 * 5

样式如下:
这里写图片描述

混合类型的分组

 `
` * 1 * 2 * 3 * 4 * 5

样式如下:
这里写图片描述

成员等宽的分组

在分组的设置中指明包含几个成员,则这几个成员平分所能占据的宽度:

`
` * 1 * 2 * 3 * 4 * 5 * 6 * 7

样式如下:
这里写图片描述

成员颜色不同的分组

`
` * 1 * 2 * 3 * 4 * 5

样式如下:
这里写图片描述

表示文件操作的按钮组

`
` * 1 * 2 * 3 * 4 * 5 * 6

样式如下:
这里写图片描述

包含条件的按钮

如果是中文,需要配合Semantic UI的data-text属性为中间的or添加本地文本:

`
` * 1 * 2 * 3 * 4 * 5 * 6 * 7 * 8 * 9 * 10

样式如下:
这里写图片描述

不同大小的按钮

`






` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8

样式如下:
这里写图片描述

紧凑的按钮

 `
    
    ` 

*   1
*   2
*   3
*   4
*   5

样式如下:
这里写图片描述

圆形按钮

`` 

*   1
*   2
*   3

样式如下:
这里写图片描述

不同位置的按钮

左右浮动的按钮

`
` 

*   1
*   2

样式如下:
这里写图片描述

充满整个容器的按钮

`` 

*   1

样式如下:
这里写图片描述

固定在顶部和底部的按钮

`
顶部按钮

这是一个段落。

底部按钮
` * 1 * 2 * 3 * 4 * 5

样式如下:
Semantic UI_第4张图片

固定在顶部和底部的多个按钮

`
左上角
右上角

这是一个段落。

左下角
右下角
` * 1 * 2 * 3 * 4 * 5 * 6 * 7 * 8 * 9 * 10 * 11

样式如下:
Semantic UI_第5张图片

固定在左右的按钮

`
` 

*   1
*   2

样式如下:
这里写图片描述

你可能感兴趣的