7.1 图标按钮

  Semantic-UI中可以定义一组图标样式，并且可以在按钮中使用图标。

示例：定义一个图标按钮

<button class="ui black button">

    <i class="unlock green icon"></i>

</button>

示例：定义一组图标按钮

<div class="ui buttons">

    <button class="ui button"><i class="save icon"></i></button>

    <button class="ui button"><i class="edit icon"></i></button>

    <button class="ui button"><i class="remove icon"></i></button>

</div>

示例：定义一组垂直图标按钮

<div class="ui vertical buttons">

    <button class="ui button"><i class="save icon"></i></button>

    <button class="ui button"><i class="edit icon"></i></button>

    <button class="ui button"><i class="remove icon"></i></button>

</div>

7、Semantic-UI之图标与按钮组的更多相关文章

  1. Bootstrap 字体图标、下拉菜单、按钮组

    Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...

  2. jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

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

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

  4. semantic ui框架学习笔记一

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

  5. amazeui学习笔记--js插件（UI增强2）--按钮交互Button

    amazeui学习笔记--js插件(UI增强2)--按钮交互Button 一.总结 1.按钮loading状态: <button type="button" class=&q ...

  6. Bootstrap<基础十三> 按钮组

    按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.你可以通过Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. ...

  7. Semantic UI 中文参考手册

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

  8. Bootstrap系列 -- 29. 按钮组

    单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等 按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常 ...

  9. Bootstrap 图标菜单按钮组件

    ---恢复内容开始--- 一．小图标组件 Bootstrap 提供了免费的 263 个小图标(数了两次),具体可以参考中文官网的组件 链接:http://v3.bootcss.com/componen ...

随机推荐

  1. 09_java之面向对象概述

    01面向对象和面向过程的思想 * A: 面向过程与面向对象都是我们编程中,编写程序的一种思维方式 * a: 面向过程的程序设计方式,是遇到一件事时,思考“我该怎么做”,然后一步步实现的过程. * b: ...

  2. g++ 4.4.7 template 没问题,前面应该程序问题!!

  3. 同源策略、CORS

    一.同源策略 同源策略(Same origin policy) 是一种约定, 它是浏览器最核心也是最基本的安全功能 , 如果缺少了同源策略, 则浏览器的正常功能可能都会受影响 , 可以说web是构建在 ...

  4. GNU/Linux LVM 原理图释

    逻辑卷管理器(英语:Logical Volume Manager,缩写为LVM),又译为逻辑卷宗管理器.逻辑扇区管理器.逻辑磁盘管理器,是Linux核心所提供的逻辑卷管理(Logical volume ...

  5. 「小程序JAVA实战」小程序视图之细说wx：key列表高级特性（16）

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-16/ wx:key的高级特性.这个很重要,因为在app上经常有上拉,下拉加载,我们如果不使用这个特 ...

  6. swagger报No operations defined in spec!

    突然发现项目的swagger报No operations defined in spec! SWAGGER_SCAN_BASE_PACKAGE 路径改变了! package com.redis.con ...

  7. Spring 中的 LocalSessionFactoryBean和LocalContainerEntityManagerFactoryBean

    Spring和Hibernate整合的时候我们经常会有如下的配置代码 1,非JPA支持的配置 <!-- 配置 Hibernate 的 SessionFactory 实例: 通过 Spring 提 ...

  8. NoSuchBeanDefinitionException:No qualifying bean of type found for dependency: expected at least 1 bean which qualifies as autowire candidate for this dependency.

    报错如下: NoSuchBeanDefinitionException:No qualifying bean of type   found for dependency: expected at l ...

  9. Dell 1420N使用Kubuntu默认无线驱动后网络不稳定的解决方法

    前几天在我的Dell 1420N上安装了Kubuntu 13.04,装了系统软件中的私有无线网卡驱动Broadcom STA wireless driver后,虽然能上网,但是很不稳定,经常断线,非常 ...

  10. [erlang 001] erlang中的错误及异常处理

    一. erlang中的错误 1. 分类 1) 编译错误:主要是编译器检测出的代码语法错误: 2) 逻辑错误:是指程序没有完成预期的工作,属于开发人员的问题: 3) 运行时错误:是指erlang运行时抛 ...