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之其他按钮样式的更多相关文章

  1. 5、Semantic-UI之基础按钮样式

    5.1 基础按钮样式   在Semantic-UI中定义了很多的按钮样式,可以通过class="ui button"来指定,也可以在class中指定颜色. 示例:定义基础按钮样式 ...

  2. Semantic UI 中文参考手册

    一个拥有友好词汇表的前端框架,完全语义化的前端界面开发框架,为一组开发人员之间共享UI元素配备了规格.使用的词汇(类和ID)相比其它替代品更加简洁,从而降低了学习曲线.有许多HTML元素,UI元素和场 ...

  3. 160908、前端开发框架Semantic UI

    简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...

  4. 目前几款基于html5的前端框架:如Bootstrap、Foundation、Semantic UI 、Amaze UI

    Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...

  5. semantic ui框架学习笔记一

    面包屑导航 面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...

  6. 2 semantic ui 框架的应用

    为什么使用css框架 1.使用基础样式 :  ui segment 分段:内容片段 <link rel="stylesheet" href="css/semanti ...

  7. 漂亮的CSS按钮样式集以及在线生成工具

    以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...

  8. semantic UI first web

    官方文档:https://semantic-ui.com/introduction/getting-started.html semantic  UI: SemanticUI是一款语义化设计的前端开源 ...

  9. webpack 解决 semantic ui 中 google fonts 引用的问题

    semantic ui css 的第一行引用了 google web font api,由于不可告人而又众所周知的原因,这条链接在国内无法访问: @import url('https://fonts. ...

随机推荐

  1. Julia - 函数运算符

    Julia 中,大多数运算符都是支持特定语法的函数 && . || 等短路运算是例外,它们不是函数,因为短路求值先算前面的值,再算后面的值 对于函数运算符,可以像其它函数一样,把参数列 ...

  2. Python Twisted系列教程18:Deferreds 全貌

    作者:dave@http://krondo.com/deferreds-en-masse/  译者: Cheng Luo 你可以从”第一部分 Twist理论基础“开始阅读:也可以从”Twisted 入 ...

  3. Newtonsoft.Json[C#]

    C# Newtonsoft.Json JsonSerializerSettings配置序列化操作 https://blog.csdn.net/u011127019/article/details/72 ...

  4. 第11章 分布式服务跟踪: Spring Cloud Sleuth

    通常一个由客户端发起的请求在后端系统中会经过多个不同的微服务调用来协同产生最后的请求结果, 在复杂的微服务架构系统中, 几乎每一个前端请求都会形成一条复杂的分布式服务调用链路, 在每条链路中任何一个依 ...

  5. leetcode849

    public class Solution { public int MaxDistToClosest(int[] seats) { ; var len = seats.Length; ) { ; } ...

  6. MySQL修改redo_log_size

    MySQL5.5 步骤如下: 1. set global innodb_fast_shutdown = 0; 2. mysqladmin shutdown 3. 修改my.cnf innodb_log ...

  7. HTTP 状态信息

    一.1xx 消息 该类型的状态码代表请求已被接受,需要继续处理. 100 Continue 客户端应当继续发送请求,这个临时响应是用来通知客户端的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续 ...

  8. 使用jxl 解析Excel

    jxl(Java Excel API) 使用方法 [1]    构建Workbook对象, 只读Workbook对象  //   直接从本地文档创建Workbook  //   从输入流创建Workb ...

  9. Python迭代dict的value

    我们已经了解了dict对象本身就是可迭代对象,用 for 循环直接迭代 dict,可以每次拿到dict的一个key. 如果我们希望迭代 dict 对象的value,应该怎么做? dict 对象有一个  ...

  10. 201671010127 2016-2017-11 Java图形用户界面设计技术

    一.事件处理器 1.什么是事件处理 一个事件要求特定的动作被执行,它被作为消息由外界或系统自身发送给GUI系统.这些事件包括来自计算机设备如鼠标键盘和网络端口的I/O中断,以及GUI系统的逻辑事件触发 ...