Foundation 按钮
按钮样式
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>
<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>
按钮类可以使用在 a, button, 或 input 元素: 实例 a href="#" class="button info" role="button"Link Button/abutton type="button" class="button info"Button/buttoninput type="button" class="button info" value="Input Button"input type="submit" class="button info" value="Submit Button"
 | 为什么将 a 标签的 href 设置为 # ? 当我们不希望链接点击跳转并得到 "404" 页面时，我们可以将 a 标签的 href 设置为 #。 |
|---|
按钮大小
我们可以使用 .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>
<button type="button" class="button">Default</button>
<button type="button" class="button small">Small</button>
<button type="button" class="button tiny">Tiny</button>
圆角按钮可以使用 .radius 和 .round 类来设置圆角按钮： 实例 button type="button" class="button"Default Button/buttonbutton type="button" class="button radius"Radius Button/buttonbutton type="button" class="button round"Round Button/button
延展按钮
可以使用 .expand 类来设置按钮的宽度为 100%:
实例
<button type="button" class="button">Default Button</button>
<button type="button" class="button expand">Expanded Button</button>
<button type="button" class="button expand">Expanded Button</button>
禁用按钮可以使用 .disabled 类来设置按钮不可点击: 实例 button type="button" class="button"Default Button/buttonbutton type="button" class="button disabled"Disabled Button/button
王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat