semantic-ui 图标
semantic-ui提供了很多的图标,基本常用的在官网上面都能找到。要想记住这么多图标是不可能的,但是也是有简便方法记忆。
首先,图标其实和按钮的区别基本没有,要说有的话,也就是基础样式的大小不同吧,按钮较大一点,当然也是可以加大小的值来设置。
学习semantic的图标有这个简洁方法:
1、图标只能使用i标签,不能使用div、span、button标签。
2、按钮的名称全部转为小写之后,下载class中,然后加一个icon即可。
1、基础图标
<i class="home icon"></i>
<i class="setting icon"></i>
<i class="alarm icon"></i>
2、定义图标大小
在图标的class中直接添加大小值即可。
<i class="home mini icon"></i>
<i class="setting large icon"></i>
<i class="alarm huge icon"></i>
3、设置图标颜色
和按钮没区别,直接在图标的class中加颜色即可
<i class="home mini red icon"></i>
<i class="setting large blue icon"></i>
<i class="alarm huge pink icon"></i>
4、动画按钮
在semantic ui中,提供了三种按钮动画,分别是左右移动、上下移动、淡入淡出
因为要加动画效果,所以class要加一个animated
因为要动画,那么就必须有些东西是隐藏的,有些东西是显示的,所以显示的内容的class设置为visible content,隐藏的内容设置为hidden content。
如果不指定动画,则默认是左右移动,那么上下移动和淡入淡出就是在外层的div或者span上加一个vartical,fade即可
<div class="ui animated button">
<div class="visible content">家</div>
<i class="hidden content">
<i class="home icon"></i>
</i>
</div>
显示效果:略
总结:
其实图标和按钮真的没什么不同,按钮能用的样式,图标也能用,所以图标我只写了这么点样式的说明。
semantic-ui 图标的更多相关文章
- 160908、前端开发框架Semantic UI
简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...
- semantic ui框架学习笔记一
面包屑导航 面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...
- 开始学习使用 Semantic UI
最近在找一个功能比较丰富的前端框架,之前一直使用的Bootstrap,感觉组件还是不够丰富,很多东西都需要不少自定义.于是就发现了 Semantic UI. 不过感觉网上相关的中文资料好少,官方网站( ...
- Semantic UI 语义化设计的前端框架
UI是Web的灵魂!Semantic UI是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架. 特性 弃用有歧义的表述 Semantic是围绕自然交流语言而架构的,这使得开发更加直观(易 ...
- iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸
iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸 iPhone界面尺寸 设备 分辨 ...
- Semantic UI – 完全语义化的前端界面开发框架
Semantic UI 是一个 UI 库,使前端开发更简单,更容易学习.Semantic UI 介绍了许多界面元素.在大多数情况下,只有你需要的元素建立一个自定义的构建可能是最好的. UI 组件分为四 ...
- Semantic UI 中文参考手册
一个拥有友好词汇表的前端框架,完全语义化的前端界面开发框架,为一组开发人员之间共享UI元素配备了规格.使用的词汇(类和ID)相比其它替代品更加简洁,从而降低了学习曲线.有许多HTML元素,UI元素和场 ...
- 修改 Semantic UI 的默认字体
Semantic UI 默认使用的是谷歌提供的字体,并且是直接使用了谷歌的官方链接.由于大家都知道的原因,谷歌网站在国内访问速度很差,甚至根本无法访问,还有就是可能会在离线环境下使用 Semantic ...
- 目前几款基于html5的前端框架:如Bootstrap、Foundation、Semantic UI 、Amaze UI
Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...
- Semantic UI基础使用教程
自己今后要使用Semantic UI进行项目开发了,一步步的记录下来,供大家参考,也让自己去简单的学习一下,有空了就会更新一点东西,大家有什么问题可以相互交流一下,文采不是很好,希望大家要多多见谅,这 ...
随机推荐
- 解决git push时发现有超过100M的文件时,删除文件后,发现还是提交不上去的问题
我这里故意放了一个超过100M的文件 后续,git add ,git commit 然后,git push 此时会发现出现了错误.如果,我们再这里直接在文件系统中删除这个大的文件,然后再次提交,会发现 ...
- Vue学习之路3-浅析Vue-cli搭建项目后的目录结构
1.前言 Vue并不限制你的代码结构.但是,它规定了一些需要遵守的规则:1.应用层级的状态应该集中到单个store对象中.2.提交mutation是更改状态的唯一方法,并且这个过程是同步的.3.异步逻 ...
- Ubuntu 12.04上安装 MongoDB并运行
Ubuntu 12.04上安装 MongoDB并运行 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 在Terminal输入 sudo apt-key ...
- 软工团队 - UML设计
软工团队 - UML设计 分工 对于分工我们没有不是按"自己负责部分的核心模块做练习"(每个人对每个图的某一模块来依次做完四个UML)的原因,是在于画这些图并不是都能彻底分成各个& ...
- 使用Docker在本地搭建Hadoop分布式集群
学习Hadoop集群环境搭建是Hadoop入门必经之路.搭建分布式集群通常有两个办法: 要么找多台机器来部署(常常找不到机器) 或者在本地开多个虚拟机(开销很大,对宿主机器性能要求高,光是安装多个虚拟 ...
- C#字节数组与字符串转换
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- linux crontab定时器
1.查看linux是否有crontab指令 如果没有安装crontab指令 yum install -y vixie-cron yum -y install crontabs 2.设置开机自启 ch ...
- Rancher学习笔记----在UI界面添加主机页面无法正常显示
今天在学习rancher添加主机的时候,遇到了一个小问题,但是困扰老娘一上午 问题描述:在点击添加主机的时候,页面有跳转,但是页面显示为空,没有任何可选项.如下正常界面: 解决办法是:请换个浏览器
- 004_centos安装pip的几种方式及pip源
一. (1) yum -y install epel-release yum install python-pip pip install --upgrade pip (2) python脚本的一键安 ...
- linux7 安装rac 执行root脚本时候报错
运行root.sh脚本的时候报错 报错信息: [root@rac1 ~]# /u01/app/oraInventory/orainstRoot.sh Changing permissions of / ...