8、Semantic-UI之其他按钮样式

1|08.1 其他按钮样式定义

1|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的支持。

1|2示例：定义不同颜色的按钮样式

• 定义不同颜色的按钮

<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>

1|3示例：定义条件按钮

<div class="ui buttons">
    <button class="ui green button">yes</button>
    <i class="or"></i>
    <button class="ui red button">no</button>
</div>

1|4示例：定义不同大小的按钮

  在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>

2|08.1 小结

  在Semantic-UI中定义了很多按钮样式，这些按钮样式都是通过semantic.css中的样式进行加载的，可以设置不同大小的按钮和图标与按钮结合使用，定义一组图标等。

__EOF__

本文作者：StaryJie
本文链接：https://www.cnblogs.com/jie-fang/p/10279530.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！