semantic-ui 按钮

1、基础按钮：

　　使用button、div、span、i等标签，将其class设置为"ui button"，显示的就是最基础的按钮样式。

<i class="ui button">i按钮</i>
<div class="ui button">div按钮</div>
<span class="ui button">span按钮</span>
<button class="ui button">button按钮</button>

　　

 

2、设置按钮颜色

 　　直接在class中加对应的颜色即可，注意不能加#112233这种颜色值。

<i class="ui red button">red 按钮</i>
<i class="ui blue button">blue 按钮</i>

　　

 

3、设置按钮的大小

　　semantic一共提供了8种大小值，分别是mini、tiny、small、medium、large、big、huge、massive，从左到右依次增大。

　　设置的方式是在class中加上面的大小值即可。

<i class="ui red medium button">red medium 按钮</i>
<i class="ui blue mini button">blue mini 按钮</i>

　　

 

4、设置状态

　　状态有disable（禁用效果）、active（选中效果）两种

<i class="ui button">基础按钮</i>
<i class="ui active button">active按钮</i>
<i class="ui disabled button">disabled按钮</i>

　　

 

5、多个按钮水平组合

　　使用一个div或者span包含多个按钮即可，但是要注意的是，外层的class要设置为ui buttons，注意这个buttons，不加s的话，就不正确。

<div class="ui buttons">
	<i class="ui red button">按钮1</i>	
	<i class="ui blue button">按钮2</i>	
	<i class="ui green button">按钮3</i>	
</div>

　　

 

6、多个按钮垂直组合

　　其实垂直组合和水平组合没什么区别，就是在外层div或者span的class中加一个vertical即可

<span class="ui vertical buttons">
	<i class="ui red button">按钮1</i>	
	<i class="ui blue button">按钮2</i>	
	<i class="ui green button">按钮3</i>	
</span>

　　

 

7、图标按钮

　　如果不清楚按钮的话，可以参考这篇博客：

　　图标按钮，其实就是将图标和按钮写在一个div、span、i、button中而已。不仅如此，还可以在中间写文字

<button class="ui button"><i class="search icon"></i></button>
<i class="ui button"><i class="home icon"></i>首页</i>

　　

 

8、联合按钮

　　其实就是两个按钮，之后不过，中间有特殊的装饰，加一个or的class的div、i、span、button即可。

　　注意中间的两个按钮外层要套一个ui buttons的div或者span

<div class="ui buttons">
	<span class="ui green button">Left</span>
	<i class="or"></i>
	<button class="ui red button">Right</button>
</div>

　　

 

9、设置圆形按钮

　　在class中加一个circular即可，

　　需要注意的是，如果要加工成圆形的元素最初不是正方形，那么加了circular之后，会变成椭圆；如果是正方形，那么加工后就是圆形了。

<div class="ui button circular">圆按钮</div>
<i class="home icon circular"></i>

　　

 

　　上面按钮虽然有很多种样式，不知道你发现没有，其实这些样式，也就是那些class，可以和其他样式一起配合使用。