Semantic-UI 按钮组大小组变化

Semantic-UI 是一种优秀的UI框架，提供了许多实用的组件，其中按钮组是最为常用的组件之一。本文将介绍 Semantic-UI 的按钮组大小组变化的使用方法。

大小

Semantic-UI 的按钮组提供了三种大小：mini、tiny、small，默认大小为normal，还可以自定义大小。使用方法如下所示：

<div class="ui buttons">
  <button class="ui mini button">Mini</button>
  <button class="ui tiny button">Tiny</button>
  <button class="ui small button">Small</button>
  <button class="ui button">Normal</button>
  <button class="ui large button">Large</button>
  <button class="ui big button">Big</button>
  <button class="ui huge button">Huge</button>
  <button class="ui massive button">Massive</button>
</div>

如上代码片段所示，可以使用 ui mini button、ui tiny button 等类来指定按钮的大小。

组合

Semantic-UI 的按钮组可以组合使用，以实现更复杂的按钮功能。使用方法如下：

<div class="ui buttons">
  <button class="ui button">Save</button>
  <button class="ui positive button">Publish</button>
  <div class="or"></div>
  <button class="ui negative button">Cancel</button>
</div>

如上代码片段所示，按钮组合使用时需要在按钮之间插入一个 div 元素，并在其中加入 .or 类，以实现按钮之间的分隔线。

完整示例

<div class="ui form">
  <div class="field">
    <label>Username</label>
    <input type="text">
  </div>
  <div class="field">
    <label>Password</label>
    <input type="password">
  </div>
  <div class="ui buttons">
    <button class="ui button">Reset</button>
    <div class="or"></div>
    <button class="ui primary button">Submit</button>
  </div>
</div>

如上代码片段所示，按钮组可以嵌套在表单中使用。

以上便是 Semantic-UI 按钮组大小组变化的使用方法，通过这些方法可以灵活地使用 Semantic-UI 的按钮组并实现更多的功能需求。