8、Semantic-UI之其他按钮样式
8.1 其他按钮样式定义
示例:定义其他按钮样式
- 定义圆形图标按钮样式
<div class="ui circular icon button"><i class="settings icon"></i></div>
- 定义椭圆图标按钮样式
<div class="ui circular button"><i class="settings icon"></i></div>
- 按钮的状态--激活状态
<div class="ui active button">
<i class="setting icon"></i>
</div>
- 按钮的状态--锁定状态
<div class="ui disabled button">
<i class="setting icon"></i>
</div>
在定义按钮状态的时候,必须要有jQuery的支持。
示例:定义不同颜色的按钮样式
- 定义不同颜色的按钮
<button class="ui red button">red</button>
<button class="ui green button">green</button>
<button class="ui blue button">blue</button>
<button class="ui black button">black</button>
- 按钮颜色反转
<button class="ui inverted red button">red</button>
<button class="ui inverted green button">green</button>
<button class="ui inverted blue button">blue</button>
<button class="ui inverted black button">black</button>
示例:定义条件按钮
<div class="ui buttons">
<button class="ui green button">yes</button>
<i class="or"></i>
<button class="ui red button">no</button>
</div>
示例:定义不同大小的按钮
在Semantic-UI中定义了8组不同大小的按钮;
<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>
8.1 小结
在Semantic-UI中定义了很多按钮样式,这些按钮样式都是通过semantic.css中的样式进行加载的,可以设置不同大小的按钮和图标与按钮结合使用,定义一组图标等。
8、Semantic-UI之其他按钮样式的更多相关文章
- 5、Semantic-UI之基础按钮样式
5.1 基础按钮样式 在Semantic-UI中定义了很多的按钮样式,可以通过class="ui button"来指定,也可以在class中指定颜色. 示例:定义基础按钮样式 ...
- Semantic UI 中文参考手册
一个拥有友好词汇表的前端框架,完全语义化的前端界面开发框架,为一组开发人员之间共享UI元素配备了规格.使用的词汇(类和ID)相比其它替代品更加简洁,从而降低了学习曲线.有许多HTML元素,UI元素和场 ...
- 160908、前端开发框架Semantic UI
简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...
- 目前几款基于html5的前端框架:如Bootstrap、Foundation、Semantic UI 、Amaze UI
Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...
- semantic ui框架学习笔记一
面包屑导航 面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...
- 2 semantic ui 框架的应用
为什么使用css框架 1.使用基础样式 : ui segment 分段:内容片段 <link rel="stylesheet" href="css/semanti ...
- 漂亮的CSS按钮样式集以及在线生成工具
以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...
- semantic UI first web
官方文档:https://semantic-ui.com/introduction/getting-started.html semantic UI: SemanticUI是一款语义化设计的前端开源 ...
- webpack 解决 semantic ui 中 google fonts 引用的问题
semantic ui css 的第一行引用了 google web font api,由于不可告人而又众所周知的原因,这条链接在国内无法访问: @import url('https://fonts. ...
随机推荐
- php.ini文件中的include_path设置
下面以安装smarty为例: 下面内容中,我们都是假设你的文件放在了D:\Appserv\www\Smarty下. 1.找到你的php.ini配置文件修改php.ini的include_path选项, ...
- h3c 云计算管理平台
- [Z]牛人林达华推荐有关机器学习的数学书籍
1. 线性代数 (Linear Algebra): 我想国内的大学生都会学过这门课程,但是,未必每一位老师都能贯彻它的精要.这门学科对于Learning是必备的基础,对它的透彻掌握是必不可少的.我在科 ...
- 获取properties配置
1. 使用@Value @Value("${swagger.enable}") 使用Spring的PropertyPlaceholderConfigurer关联 @Val ...
- Redis实战——phpredis扩展安装
准备安装软件(download) 1> [redis] http://redis.googlecode.com/files/redis-2.4.3.tar.gz 2> [php ...
- js将秒转换为 分:秒 函数
/** * 将秒转换为 分:秒 * s int 秒数 */ function s_to_hs(s){ //计算分钟 //算法:将秒数除以60,然后下舍入,既得到分钟数 var h; h = Math. ...
- 不同应用场景的10个Linux面试问题与解答
本文由 极客范 - 小道空空 翻译自 Avishek Kumar.欢迎加入极客翻译小组,同我们一道翻译与分享.转载请参见文章末尾处的要求. 这一次我们不再介绍某个特定主题的Linux面试问题,而是随机 ...
- spring boot aop打印http请求回复日志包含请求体
一.引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- git的突出解决--git rebase之abort、continue、skip
(1)应用实例描述 假设在github或者gitoschina上建立了一个项目,默认分支为master分支,远程master分支上c.sh文件内容: 开发者A.B分别将项目拷贝到自己本地进行开发 某一 ...
- 英文单词cipher 和password的区别,用法有什么不同,
['saɪfə(r)] cipher 指一套密码系统,比如电影<风声>中破译的那个系统叫cipher:password 则指进入的指令,比如你的qq密码,电脑密码等叫password.总之 ...