zoukankan      html  css  js  c++  java
  • 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中的样式进行加载的,可以设置不同大小的按钮和图标与按钮结合使用,定义一组图标等。

  • 相关阅读:
    常见web安全攻防总结
    想使用消息队列,先考虑下这些问题
    Nginx基本属性配置详解
    mysql 数据分析如何实现日报、周报、月报和年报?
    SQL优化
    SQL优化例子
    工厂模式,从第三方登录说起
    最常见 200+ 面试题答案全解析-面试必备
    使用sslsplit嗅探tls/ssl连接
    选择指定图层上的所有实体
  • 原文地址:https://www.cnblogs.com/jie-fang/p/10279530.html
Copyright © 2011-2022 走看看