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