• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

Semantic UI

互联网 diligentman 5天前 3次浏览
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
  • 按钮
    • 标准按钮
    • 优先级按钮
    • 动画效果按钮
      • 水平切换
      • 垂直切换
      • 淡入淡出
    • 空心按钮
    • 阴性、阳性按钮
    • 不同颜色的按钮
    • 反转色按钮
    • 带图标的按钮
    • 表示状态的按钮
      • 激活状态
      • 不可点击的按钮
      • 加载状态按钮
    • 表示状态切换的按钮
    • 带标签的按钮
      • 默认标签在右侧
      • 标签在左侧且带向右的箭头(蓝色实心)
      • 标签为图标的按钮
    • 按钮分组
      • 普通按钮分组
      • 垂直显示的分组
      • 图标按钮分组
      • 带标签的按钮分组
      • 混合类型的分组
      • 成员等宽的分组
      • 成员颜色不同的分组
      • 表示文件操作的按钮组
    • 包含条件的按钮
    • 不同大小的按钮
    • 紧凑的按钮
    • 圆形按钮
    • 不同位置的按钮
      • 左右浮动的按钮
      • 充满整个容器的按钮
      • 固定在顶部和底部的按钮
      • 固定在顶部和底部的多个按钮
      • 固定在左右的按钮

后续此博客不再更新,欢迎大家搜索关注微信公众号“测开之美”,测试开发工程师技术修炼小站,持续学习持续进步。
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

样式如下:
Semantic UI

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

样式如下:
Semantic UI

动画效果按钮

水平切换

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

样式如下:
Semantic UI

垂直切换

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

样式如下:
Semantic UI

淡入淡出

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

*   1
*   2
*   3
*   4

样式如下:
Semantic UI

空心按钮

`<button class="ui basic button">
    <i class="user icon"></i> 个人信息
</button>` 

*   1
*   2
*   3

样式如下:
Semantic UI

阴性、阳性按钮

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

*   1
*   2

样式如下:
Semantic UI

不同颜色的按钮

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

样式如下:
Semantic UI

反转色按钮

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

样式如下:
Semantic UI

带图标的按钮

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

*   1
*   2
*   3

样式如下:
Semantic UI

表示状态的按钮

激活状态

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

*   1

样式如下:
Semantic UI

不可点击的按钮

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

*   1

样式如下:
Semantic UI

加载状态按钮

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

*   1

样式如下:
Semantic UI

表示状态切换的按钮

Semantic UI

样式如下:

Semantic UI

带标签的按钮

默认标签在右侧

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

样式如下:
Semantic UI

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

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

样式如下:
Semantic UI

标签为图标的按钮

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

样式如下:
Semantic UI

按钮分组

普通按钮分组

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

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

*   1
*   2
*   3
*   4

样式如下:
Semantic UI

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

垂直显示的分组

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

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

*   1
*   2
*   3
*   4

样式如下:
Semantic UI

图标按钮分组

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

样式如下:
Semantic UI

带标签的按钮分组

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

样式如下:
Semantic UI

混合类型的分组

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

样式如下:
Semantic UI

成员等宽的分组

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

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

样式如下:
Semantic UI

成员颜色不同的分组

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

样式如下:
Semantic UI

表示文件操作的按钮组

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

包含条件的按钮

如果是中文,需要配合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

样式如下:
Semantic UI

不同大小的按钮

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

样式如下:
Semantic UI

紧凑的按钮

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

样式如下:
Semantic UI

圆形按钮

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

*   1
*   2
*   3

样式如下:
Semantic UI

不同位置的按钮

左右浮动的按钮

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

*   1
*   2

样式如下:
Semantic UI

充满整个容器的按钮

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

*   1

样式如下:
Semantic UI

固定在顶部和底部的按钮

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

样式如下:
Semantic UI

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

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

样式如下:
Semantic UI

固定在左右的按钮

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

*   1
*   2

样式如下:
Semantic UI


程序员灯塔
转载请注明原文链接:https://www.wangt.cc/2020/11/semantic-ui/
喜欢 (0)