Foundation 按钮

前言

• Foundation 按钮。

1、按钮样式

• Foundation 提供了 6 种按钮样式。.button 类创建了一个蓝色的按钮并附有内边距。不同颜色按钮类为：.secondary, .success, .info, .warning 或 .alert:

• 实例

  <button type="button" class="button">Default</button>
  <button type="button" class="button secondary">Secondary</button>
  <button type="button" class="button success">Success</button>
  <button type="button" class="button info">Info</button>
  <button type="button" class="button warning">Warning</button>
  <button type="button" class="button alert">Alert</button>

• 效果 🔗

  

1.1 其它元素

• 按钮类可以使用在 <a>, <button>, 或 <input> 元素:

• 实例

  <a href="#" class="button info" role="button">链接按钮</a>
  <button type="button" class="button info">按钮</button>
  <input type="button" class="button info" value="Input 按钮" />
  <input type="submit" class="button info" value="Submit 按钮" />

• 效果 🔗

  

• 当我们不希望链接点击跳转并得到 “404” 页面时，我们可以将 <a> 标签的 href 设置为 #。

2、按钮大小

• 可以使用 .large, .small 或 .tiny 类来设置按钮大小：

• 实例

  <button type="button" class="button large">Large</button>
  <button type="button" class="button">Default</button>
  <button type="button" class="button small">Small</button>
  <button type="button" class="button tiny">Tiny</button>

• 效果 🔗

  

3、圆角按钮

• 可以使用 .radius 和 .round 类来设置圆角按钮：

• 实例

  <button type="button" class="button">Default Button</button>
  <button type="button" class="button radius">Radius Button</button>
  <button type="button" class="button round">Round Button</button>

• 效果 🔗

  

4、延展按钮

• 可以使用 .expand 类来设置按钮的宽度为 100%:

• 实例

  <button type="button" class="button">Default</button>
  <button type="button" class="button expand">Expanded Button</button>

• 效果 🔗

  

5、禁用按钮

• 可以使用 .disabled 类来设置按钮不可点击:

• 实例

  <button type="button" class="button">Default Button</button>
  <button type="button" class="button disabled">Disabled Button</button>

• 效果 🔗

  

6、按钮组

• Foundation 可以在同一行内创建一系列的按钮。

• 可以使用 <ul> 元素并添加 .button-group 类来创建按钮组：

• 实例

  <ul class="button-group">
      <li><button type="button" class="button">Apple</button></li>
      <li><button type="button" class="button">Samsung</button></li>
      <li><button type="button" class="button">Sony</button></li>
  </ul>

• 效果 🔗

  

7、垂直按钮组

• 垂直按钮组使用 .stack 类来创建。注意，按钮会跨越父元素的整个宽度:

• 实例

  <ul class="button-group stack">
      <li><button type="button" class="button">Apple</button></li>
      <li><button type="button" class="button">Samsung</button></li>
      <li><button type="button" class="button">Sony</button></li>
  </ul>

• 效果 🔗

  

7.1 小尺寸屏幕

• .stack-for-small 类用于小尺寸的屏幕，按钮由水平排列变为垂直排列。

• 实例

  <ul class="button-group stack-for-small">
      <li><button type="button" class="button">Apple</button></li>
      <li><button type="button" class="button">Samsung</button></li>
      <li><button type="button" class="button">Sony</button></li>
  </ul>

• 效果 🔗

    

8、圆角按钮组

• 按钮组中使用 .radius 和 .round 类为按钮添加圆角效果：

• 实例

  <p>圆角按钮组:</p>
  <ul class="button-group radius">
      <li><button type="button" class="button">Apple</button></li>
      <li><button type="button" class="button">Samsung</button></li>
      <li><button type="button" class="button">Sony</button></li>
  </ul>
  
  <p>圆形按钮组:</p>
  <ul class="button-group round">
      <li><button type="button" class="button">Apple</button></li>
      <li><button type="button" class="button">Samsung</button></li>
      <li><button type="button" class="button">Sony</button></li>
  </ul>

• 效果 🔗

  

9、均匀延展按钮组

• .even-num 类用于在按钮组中均匀的分配按钮的宽度并跨越父元素 100% 宽度。num 为按钮组中按钮的数量，从 1 到 8：

• 实例

  <p>均匀延展三个按钮:</p>
  <ul class="button-group even-3">
      <li><button type="button" class="button">Apple</button></li>
      <li><button type="button" class="button">Samsung</button></li>
      <li><button type="button" class="button">Sony</button></li>
  </ul>
  
  <p>均匀延展五个按钮:</p>
  <ul class="button-group even-5">
      <li><button type="button" class="button">Apple</button></li>
      <li><button type="button" class="button">Samsung</button></li>
      <li><button type="button" class="button">Sony</button></li>
      <li><button type="button" class="button">HTC</button></li>
      <li><button type="button" class="button">Huawei</button></li>
  </ul>
  
  <p>均匀延展八个按钮:</p>
  <ul class="button-group even-8">
      <li><button type="button" class="button">A</button></li>
      <li><button type="button" class="button">B</button></li>
      <li><button type="button" class="button">C</button></li>
      <li><button type="button" class="button">D</button></li>
      <li><button type="button" class="button">E</button></li>
      <li><button type="button" class="button">F</button></li>
      <li><button type="button" class="button">G</button></li>
      <li><button type="button" class="button">H</button></li>
  </ul>

• 效果 🔗

  

10、下拉菜单按钮

• 下拉菜单按钮可以让用户选取设定好的值：

• 实例

  <a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a>
  <ul id="id01" data-dropdown-content class="f-dropdown">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
  </ul>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

• 解析

  • .dropdown 类创建一个下拉菜单按钮。
  • 使用带有 data-dropdown="id" 属性的按钮或链接打开下拉菜单。
  • id 值需要与下拉菜单的内容 (id01) 匹配。
  • 在 <ul> 中添加 .f-dropdown 类和 data-dropdown-content 属性来创建下拉菜单的内容。
  • 最后初始化 Foundation JS。

11、分割按钮

• 也可以创建一个分割按钮的下拉菜单。只需要在按钮中添加 .split 类并使用 span 元素生成一个方向箭的按钮：

• 实例

  <button class="button split">Split Button <span data-dropdown="id01"></span></button>
  <ul id="id01" data-dropdown-content class="f-dropdown">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
  </ul>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗