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

  • 相关阅读:
    (13)使用Ajax Helper 提高用户体验
    (12)改变图片的大小生成缩略图
    (11)通过表单上传文件
    程序员需要有多懒 ?- cocos2d-x 数学函数、常用宏粗整理
    xCode 4.X 免证书真机发布及调试
    35岁前必须做好的10件事情(转载)
    独自收集Cocos2d提供的字体!共57种(有对照的字体图)
    (10)根据关键字搜索
    tcp拥塞控制
    dpcnv reademe
  • 原文地址:https://www.cnblogs.com/jie-fang/p/10279530.html
Copyright © 2011-2022 走看看