正文 

当前位置： 首页 > java > java教程

160908前端开发框架semanticui

目标奔雷手 目标奔雷手     2022-08-04     162

关键词：

简介

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

按钮

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

标准按钮

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

样式如下： 
技术分享

除了<button>标签外，<div>标签也可以创建按钮（样式同上）：

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

优先级按钮

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

样式如下： 
技术分享

动画效果按钮

水平切换

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

样式如下： 
技术分享

垂直切换

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

样式如下： 
技术分享

淡入淡出

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

样式如下： 
技术分享

空心按钮

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

样式如下：
技术分享

阴性、阳性按钮

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

样式如下： 
技术分享

不同颜色的按钮

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

 

样式如下： 
技术分享

反转色按钮

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

样式如下： 
技术分享

带图标的按钮

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

样式如下： 
技术分享

表示状态的按钮

激活状态

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

样式如下： 
技术分享

不可点击的按钮

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

样式如下： 
技术分享

加载状态按钮

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

样式如下： 
技术分享

表示状态切换的按钮

技术分享

样式如下：

技术分享

带标签的按钮

默认标签在右侧

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

样式如下： 
技术分享

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

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

样式如下： 
技术分享

标签为图标的按钮

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

样式如下： 

技术分享

按钮分组

普通按钮分组

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

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

样式如下： 
技术分享

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

垂直显示的分组

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

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

样式如下： 
技术分享

图标按钮分组

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

样式如下： 
技术分享

带标签的按钮分组

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

样式如下： 
技术分享

混合类型的分组

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

样式如下： 
技术分享

成员等宽的分组

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

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

样式如下： 
技术分享

成员颜色不同的分组

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

样式如下： 
技术分享

表示文件操作的按钮组

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

样式如下： 
技术分享

包含条件的按钮

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

样式如下： 
技术分享

不同大小的按钮

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

样式如下： 
技术分享

紧凑的按钮

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

样式如下： 
技术分享

圆形按钮

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

样式如下： 
技术分享

不同位置的按钮

左右浮动的按钮

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

样式如下： 
技术分享

充满整个容器的按钮

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

样式如下： 
技术分享

固定在顶部和底部的按钮

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

样式如下： 
技术分享

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

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

样式如下： 
技术分享

固定在左右的按钮

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

样式如下： 
技术分享

windowssemantic怎么用

参考技术A　　SemanticUI—完全语义化的前端界面开发框架，跟Bootstrap和Foundation比起来，还是有些不同的，在功能特性上、布局设计上、用户体验上均存在很多差异。文章里详细介绍了SemanticUI自身的功能特性和优缺点。　　文章... 查看详情

springboot原型-semanticui页面开发

...而且很多重复）不贴了个人博客项目学习——B站教程SemanticUI官网首页springboot原型-semanticui页面开发首页文章页个人主页分类页归档页后台博客管理页原型编辑文章页个人主页分类页归档页后台博客管理页（还没有实现数... 查看详情

网站框架的具体版本号

...和移动端应用。也能开发响应式web页面，上手也非常快。SemanticUI、SemanticUI是一个完全语义化的前端CSS界面开发框架，跟Bootstrap比起来更加丰富些，不那么单一，在用户体验、样式都很丰富。 查看详情

前端框架都有哪些？

...更快的开发出web应用系统官网地址：http://react-china.org/3、SemanticUI是一个完全语义化的前端CSS界面开发框架，跟Bootstrap比起来更加丰富些，不那么单一，在用户体验、样式都很丰富官网地址：http://www.semantic-ui.cn/4、FoundationbyZURB是... 查看详情

javascript库，前端框架（ui框架），模板引擎

...Javascript语言封装，前端框架（UI框架）:Bootstrap,Foundation,SemanticUI，Pure.css　　前端框架、UI框架，或者叫UI模板　　HTML+CSS+(JavaScript)? 模板引擎：　　叫HTML模板引擎？ 模板文件（HTML）+(CSS)?+数据（JSON 查看详情

angularjs配哪个css框架好？semanticui，bootstrap，还是其他

Bootstrap和Angular都是人们大量使用的工具。在很多项目中，它们需要一起使用。为什么不呢？他们已经改变了CSS和JS的开发方式，让前端既成为令人难以置信的工具。但是，把它们放在一起使用还有一些问题，特别是当你试图在Ang... 查看详情

angularjs配哪个css框架好？semanticui，bootstrap，还是其他

Bootstrap和Angular都是人们大量使用的工具。在很多项目中，它们需要一起使用。为什么不呢？他们已经改变了CSS和JS的开发方式，让前端既成为令人难以置信的工具。但是，把它们放在一起使用还有一些问题，特别是当你试图在Ang... 查看详情

学数答题160908-数论不等式

题160908（14分）对正整数$n$及一切实数$x$，求证：$left[x ight]+left[x+dfrac{1}{n} ight]+left[x+dfrac{2}{n} ight]+cdots+left[x+dfrac{n-1}{n} ight]=left[nx ight]$． 注：$left[x ight]$为取整函数，即不超过$x$的最大整数． 查看详情

为啥bootstrap不设计得像semanticui那样简洁易懂

...疲劳,bs影子到处都是的情况下，sui还是个不错参考技术ASemanticUI—完全语义化的前端界面开发框架，跟Bootstrap和Foundation比起来，还是有些不同的本回答被提问者采纳 查看详情

foundation5学习

...行框架。　　提供响应式布局　　其他的框架：Bootstrap,SemanticUI,Pure,UIKit...2、响应式网页设计　　页面的设计与开发 查看详情

web前端培训：常用的web前端开发框架有哪些？

学习web前端技术的时候，我们会学到开发框架这一课，web前端的开发框架是有很多的，有一些是常用的，那么常用的Web前端开发框架有哪些呢?来看看下面的详细介绍。常用的Web前端开发框架有哪些？程序员常... 查看详情

web前端，html5开发，前端资源，前端网址，前端博客，前端框架整理-转

Web前端/H5开发，前端资源，前端网址，前端博客，前端框架整理-转 综合类前端知识体系前端知识结构Web前端开发大系概览Web前端开发大系概览-中文版WebFront-endStackv2.2免费的编程中文书籍索引前端书籍前端免费书籍大全前端... 查看详情

javaweb前端（总结）前端要求和流行几个框架

...参考技术Areactvue这几年火的 参考技术BBootstrap，Foundation，SemanticUI，Pure，UIkit等 查看详情

前端网页开发经常用到的框架解析

 　　前端网页开发经常用到的框架解析？个人感觉这分为两种情况，一种是能力超强，时间够用的情况，另外一种就是用前端网页框架，可以节约开发时间和减少工作量，这可以根据自身的情况作出正确的判断，并不是别人... 查看详情

移动app开发框架盘点2：web移动前端框架大全

...个周期大概是三年左右，自React框架在2013年发布并引爆了前端框架的大潮，这个属于前端的周期就此开始了。之后在2015年5月开源的ReactNative又开启了属于Web移动前端的周期，15-16年，18-19年，21-22年正好就是属于移动前端的三个... 查看详情

学习web前端需要了解的几个主流框架

前端领域最近几年发展的特别迅速，可以说是百家争鸣。在底层的前端框架领域中，最早是jquery称霸互联网，近两年MVVM类型的框架慢慢成为主流，Vue、React和Angular三大框架并驾齐驱。可以说，目前这四种是开发者用的最多使用... 查看详情

前端开发之个人见解

...，各行各业都不断冒出新技术、新专业名词、新框架等，前端自然也不例外。就目前而已，前端开发市场占比最大的框架，依然是vue,react,angular，当然jqery的占比也不小，但是伴随着各大公司业务的不断复杂，jqery框架此时就会略... 查看详情

常用的前端框架都有哪些？

....TwitterBootStrap（Apachev2.0；响应式）时髦、直观并且强大的前端框架，让Web开发变得更加容易。2.Foundation（MIT；响应式）最先进的响应式前端框架。3.960gs（GPL&MIT；响应式）960gs提供了一个简单的网格系统，适合快速开发。4.Skeleton... 查看详情