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>