42.前端开发框架Semantic UI(一)
来源:互联网 发布:康博软件 编辑:程序博客网 时间:2024/04/29 23:41
- 简介
- 安装Semantic UI
- 使用Semantic UI
- 按钮
- 标准按钮
- 优先级按钮
- 动画效果按钮
- 水平切换
- 垂直切换
- 淡入淡出
- 空心按钮
- 阴性阳性按钮
- 不同颜色的按钮
- 反转色按钮
- 带图标的按钮
- 表示状态的按钮
- 激活状态
- 不可点击的按钮
- 加载状态按钮
- 表示状态切换的按钮
- 带标签的按钮
- 默认标签在右侧
- 标签在左侧且带向右的箭头蓝色实心
- 标签为图标的按钮
- 按钮分组
- 普通按钮分组
- 垂直显示的分组
- 图标按钮分组
- 带标签的按钮分组
- 混合类型的分组
- 成员等宽的分组
- 成员颜色不同的分组
- 表示文件操作的按钮组
- 包含条件的按钮
- 不同大小的按钮
- 紧凑的按钮
- 圆形按钮
- 不同位置的按钮
- 左右浮动的按钮
- 充满整个容器的按钮
- 固定在顶部和底部的按钮
- 固定在顶部和底部的多个按钮
- 固定在左右的按钮
转载请注明原始出处:http://blog.csdn.net/a464057216/article/details/52493469
简介
网页开发中,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">¥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>
样式如下:
如果觉得我的文章对您有帮助,欢迎关注我(CSDN:Mars Loo的博客)或者为这篇文章点赞,谢谢!
- 42.前端开发框架Semantic UI(一)
- 前端框架之Semantic UI
- 前端开发 UI 框架
- 目前几款基于html5的前端框架:如Bootstrap、Foundation、Semantic UI 、Amaze UI
- django + semantic ui 框架,接口测试正常,在前端点击按钮调用出现异常问题解决
- 语义化前段UI框架Semantic UI
- 推荐一个前端ui框架:SuperUI ui开发框架
- Semantic UI 的基本使用(一):下载与引入
- 轻量级的前端UI开发框架 - UIkit
- 颠覆式前端UI开发框架:React
- 颠覆式前端UI开发框架:React
- 颠覆式前端UI开发框架:React
- 颠覆式前端UI开发框架:React
- 颠覆式前端UI开发框架:React
- 颠覆式前端UI开发框架:React
- 颠覆式前端UI开发框架:React
- 颠覆式前端UI开发框架:React
- MVC5开发前端框架angularJS快速入门(一)
- node-haystack Episode-4: Wrapper of libuv
- MongoDB源码概述——内存管理和存储引擎
- AWS Submit 2016 观感
- CSS学习笔记之边缘属性和简单的布局
- jquery-懒加载技术(简称lazyload)
- 42.前端开发框架Semantic UI(一)
- 《第一行代码》学习笔记-- 基础的自定义标题控件的定义和使用
- JavaEE项目实战(OA系统)之十二_部门管理之六
- 毛超帅四.Radmin远程链接分享(java4)______软件开发-帮助类
- 安卓开发之自定义带加载进度的按钮ProgressButton
- Android 利用handler在线程之间传递代码
- 单例模式的多种实现
- 利用ajaxSubmit无刷新异步上传导入Excel,无刷新提交表单
- asp解密chrw、chr编码文件- 58OA 网维系统解密