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.

<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>

文章目录

• 简介
• • 安装Semantic UI
  • 使用Semantic UI
• 按钮
• • 标准按钮
  • 优先级按钮
  • 动画效果按钮
  • • 水平切换
    • 垂直切换
    • 淡入淡出
  • 空心按钮
  • 阴性、阳性按钮
  • 不一样颜色的按钮
  • 反转色按钮
  • 带图标的按钮
  • 表示状态的按钮
  • • 激活状态
    • 不可点击的按钮
    • 加载状态按钮
  • 表示状态切换的按钮
  • 带标签的按钮
  • • 默认标签在右侧
    • 标签在左侧且带向右的箭头（蓝色实心）
    • 标签为图标的按钮
  • 按钮分组
  • • 普通按钮分组
    • 垂直显示的分组
    • 图标按钮分组
    • 带标签的按钮分组
    • 混合类型的分组
    • 成员等宽的分组
    • 成员颜色不一样的分组
    • 表示文件操做的按钮组
  • 包含条件的按钮
  • 不一样大小的按钮
  • 紧凑的按钮
  • 圆形按钮
  • 不一样位置的按钮
  • • 左右浮动的按钮
    • 充满整个容器的按钮
    • 固定在顶部和底部的按钮
    • 固定在顶部和底部的多个按钮
    • 固定在左右的按钮

后续此博客再也不更新，欢迎你们搜索关注微信公众号“测开之美”，测试开发工程师技术修炼小站，持续学习持续进步。

简介

网页开发中，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）：

`<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>` 

*   1
*   2
*   3

按钮

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

标准按钮

`<button type="button" class="ui button">Click</button>` 

*   1

样式以下：

除了<button>标签外，<div>标签也能够建立按钮（样式同上）：

`<div class="ui button" tabindex="0">Click</div>` 

*   1

优先级按钮

`<button type="button" class="ui primary button">Primary</button>
 <button type="button" class="ui secondary button">Secondary</button>` 

*   1
*   2

样式以下：

动画效果按钮

水平切换

`<div class="ui animated button" tabindex="0">
    <div class="visible content">下一步</div>
    <div class="hidden content">
        <i class="right arrow icon"></i>
    </div>
</div>` 

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

样式以下：

垂直切换

`<div class="ui vertical animated button" tabindex="0">
    <div class="visible content">购物车</div>
    <div class="hidden content">
        <i class="shop icon"></i>
    </div>
</div>` 

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

样式以下：

淡入淡出

`<div class="ui fade animated button">
    <div class="visible content">购买</div>
    <div class="hidden content">&yen;12.9/月</div>
</div>` 

*   1
*   2
*   3
*   4

样式以下：

空心按钮

`<button class="ui basic button">
    <i class="user icon"></i> 我的信息
</button>` 

*   1
*   2
*   3

样式以下：

阴性、阳性按钮

`<button class="ui positive button">Positive</button>
<button class="ui negative button">Negative</button>` 

*   1
*   2

样式以下：

不一样颜色的按钮

`<button class="ui red basic button">Red</button>
 <button class="ui orange basic button">Orange</button>
 <button class="ui yellow basic button">Yellow</button>
 <button class="ui olive basic button">Olive</button>
 <button class="ui green basic button">Green</button>
 <button class="ui teal basic button">Teal</button>
 <button class="ui blue basic button">Blue</button>
 <button class="ui violet basic button">Violet</button>
 <button class="ui purple basic button">Purple</button>
 <button class="ui pink basic button">Pink</button>
 <button class="ui brown basic button">Brown</button>
 <button class="ui grey basic button">Grey</button>
 <button class="ui black basic button">Black</button>
 <button class="ui red button">Red</button>
 <button class="ui orange button">Orange</button>
 <button class="ui yellow button">Yellow</button>
 <button class="ui olive button">Olive</button>
 <button class="ui green button">Green</button>
 <button class="ui teal button">Teal</button>
 <button class="ui blue button">Blue</button>
 <button class="ui violet button">Violet</button>
 <button class="ui purple button">Purple</button>
 <button class="ui pink button">Pink</button>
 <button class="ui brown button">Brown</button>
 <button class="ui grey button">Grey</button>
 <button class="ui black button">Black</button>` 

*   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

样式以下：

反转色按钮

`<div class="ui inverted segment">
     <button class="ui inverted button">Standard</button>
     <button class="ui inverted red button">Red</button>
     <button class="ui inverted orange button">Orange</button>
     <button class="ui inverted yellow button">Yellow</button>
     <button class="ui inverted olive button">Olive</button>
     <button class="ui inverted green button">Green</button>
     <button class="ui inverted teal button">Teal</button>
     <button class="ui inverted blue button">Blue</button>
     <button class="ui inverted violet button">Violet</button>
     <button class="ui inverted purple button">Purple</button>
     <button class="ui inverted pink button">Pink</button>
     <button class="ui inverted brown button">Brown</button>
     <button class="ui inverted grey button">Grey</button>
     <button class="ui inverted black button">Black</button>
 </div>
 <div class="ui inverted segment">
     <button class="ui inverted basic button">Basic</button>
     <button class="ui inverted red basic button">Basic Red</button>
     <button class="ui inverted orange basic button">Basic Orange</button>
     <button class="ui inverted yellow basic button">Basic Yellow</button>
     <button class="ui inverted olive basic button">Basic Olive</button>
     <button class="ui inverted green basic button">Basic Green</button>
     <button class="ui inverted teal basic button">Basic Teal</button>
     <button class="ui inverted blue basic button">Basic Blue</button>
     <button class="ui inverted violet basic button">Basic Violet</button>
     <button class="ui inverted purple basic button">Basic Purple</button>
     <button class="ui inverted pink basic button">Basic Pink</button>
     <button class="ui inverted brown basic button">Basic Brown</button>
     <button class="ui inverted grey basic button">Basic Grey</button>
     <button class="ui inverted black basic button">Basic Black</button>
 </div>` 

*   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

样式以下：

带图标的按钮

`<div class="ui icon button">
    <i class="cloud icon"></i> 云存储
</div>` 

*   1
*   2
*   3

样式以下：

表示状态的按钮

激活状态

`<button class="ui active button"><i class="user icon"></i>Logged In</button>` 

*   1

样式以下：

不可点击的按钮

`<button class="ui disabled button"><i class="user icon"></i>Disabled</button>` 

*   1

样式以下：

加载状态按钮

`<button class="ui loading button">加载中...</button>` 

*   1

样式以下：

表示状态切换的按钮

样式以下：

带标签的按钮

默认标签在右侧

`<div class="ui labeled button" tabindex="0">
    <div class="ui button">
        <i class="heart icon"></i>
        Like
    </div>
    <a class="ui basic label">
        2,048
    </a>
</div>` 

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

样式以下：

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

`<div class="ui left labeled button" tabindex="0">
    <a class="ui blue right pointing basic label">1,024</a>
    <div class="ui blue icon button">
        <i class="fork icon"></i> Forks
    </div>
</div>` 

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

样式以下：

标签为图标的按钮

`<button class="ui labeled icon button">
    <i class="pause icon"></i> Pause
</button>
<button class="ui right labeled icon button">
    <i class="right arrow icon"></i> Next
</button>` 

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

样式以下：

按钮分组

普通按钮分组

能够为组设置统一的颜色：

`<div class="ui blue buttons">
    <button class="ui button active">One</button>
    <button class="ui button">Two</button>
</div>` 

*   1
*   2
*   3
*   4

样式以下：

还能够设置其余属性，好比按钮大小、是否空心等等。

垂直显示的分组

能够设置整个组为空心按钮：

`<div class="ui basic vertical buttons">
    <button class="ui button active">One</button>
    <button class="ui button">Two</button>
</div>` 

*   1
*   2
*   3
*   4

样式以下：

图标按钮分组

`<div class="ui icon buttons">
     <button class="ui button"><i class="align left icon"></i></button>
     <button class="ui button"><i class="align center icon"></i></button>
     <button class="ui button"><i class="align right icon"></i></button>
     <button class="ui button"><i class="align justify icon"></i></button>
 </div>
 <div class="ui icon buttons">
     <button class="ui button"><i class="bold icon"></i></button>
     <button class="ui button"><i class="underline icon"></i></button>
     <button class="ui button"><i class="text width icon"></i></button>
 </div>` 

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

样式以下：

带标签的按钮分组

`<div class="ui labeled icon buttons">
     <button class="ui button"><i class="pause icon"></i> 暂停 </button>
     <button class="ui button"><i class="play icon"></i> 播放 </button>
     <button class="ui button"><i class="shuffle icon"></i> 随机 </button>
 </div>` 

*   1
*   2
*   3
*   4
*   5

样式以下：

混合类型的分组

`<div class="ui buttons">
        <button class="ui labeled icon button"><i class="left chevron icon"></i> 前一首 </button>
        <button class="ui button"><i class="stop icon"></i> 中止 </button>
        <button class="ui right labeled icon button"> 后一首 <i class="right chevron icon"></i> </button>
    </div>` 

*   1
*   2
*   3
*   4
*   5

样式以下：

成员等宽的分组

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

`<div class="five ui buttons">
    <button class="ui button">One</button>
    <button class="ui button">Two</button>
    <button class="ui button">Three</button>
    <button class="ui button">Four</button>
    <button class="ui button">Five</button>
</div>` 

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

样式以下：

成员颜色不一样的分组

`<div class="ui buttons">
    <button class="ui red basic button">One</button>
    <button class="ui blue basic button">Two</button>
    <button class="ui green basic button">Three</button>
</div>` 

*   1
*   2
*   3
*   4
*   5

样式以下：

表示文件操做的按钮组

`<div class="ui small basic icon buttons">
    <button class="ui button"><i class="file icon"></i></button>
    <button class="ui button"><i class="save icon"></i></button>
    <button class="ui button"><i class="upload icon"></i></button>
    <button class="ui button"><i class="download icon"></i></button>
</div>` 

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

样式以下：

包含条件的按钮

若是是中文，须要配合Semantic UI的data-text属性为中间的or添加本地文本：

`<div class="ui buttons">
    <button class="ui button">Register</button>
    <div class="or"></div>
    <button class="ui positive button">Login</button>
</div>
<div class="ui buttons">
    <button class="ui button">注册</button>
    <div class="or" data-text="或"></div>
    <button class="ui positive button">登陆</button>
</div>` 

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

样式以下：

不一样大小的按钮

`<button class="mini ui button">Mini </button>
<button class="tiny ui button">Tiny </button>
<button class="small ui button">Small </button>
<button class="medium ui button">Medium </button>
<button class="large ui button">Large </button>
<button class="big ui button">Big </button>
<button class="huge ui button">Huge </button>
<button class="massive ui button">Massive </button>` 

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

样式以下：

紧凑的按钮

`<button class="compact ui button">普通</button>
    <button class="ui compact icon button">
      <i class="pause icon"></i>
    </button>
    <button class="ui compact labeled icon button"><i class="pause icon"></i> 暂停</button>` 

*   1
*   2
*   3
*   4
*   5

样式以下：

圆形按钮

`<button class="ui circular icon button">
    <i class="settings icon"></i>
</button>` 

*   1
*   2
*   3

样式以下：

不一样位置的按钮

左右浮动的按钮

`<button class="ui right floated button">右浮动</button>
<button class="ui left floated button">左浮动</button>` 

*   1
*   2

样式以下：

充满整个容器的按钮

`<button class="fluid ui button">Fluid</button>` 

*   1

样式以下：

固定在顶部和底部的按钮

`<div class="ui top attached button" tabindex="0">顶部按钮</div>
<div class="ui attached segment">
    <p>这是一个段落。</p>
</div>
<div class="ui bottom attached button" tabindex="0">底部按钮</div>` 

*   1
*   2
*   3
*   4
*   5

样式以下：

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

`<div class="ui two top attached buttons">
    <div class="ui button">左上角</div>
    <div class="ui button">右上角</div>
</div>
<div class="ui attached segment">
    <p>这是一个段落。</p>
</div>
<div class="ui two bottom attached buttons">
    <div class="ui button">左下角</div>
    <div class="ui button">右下角</div>
</div>` 

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

样式以下：

固定在左右的按钮

`<button class="ui left attached button"> 左</button>
<button class="ui right attached button"> 右</button>` 

*   1
*   2

样式以下：