Foundation 按钮

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

&lt;button type="button" class="button"&gt;Default&lt;/button&gt;

&lt;button

type="button" class="button secondary"&gt;Secondary&lt;/button&gt;

type="button" class="button success"&gt;Success&lt;/button&gt;

type="button" class="button info"&gt;Info&lt;/button&gt;

&lt;button type="button"

class="button warning"&gt;Warning&lt;/button&gt;

class="button alert"&gt;Alert&lt;/button&gt;

按钮类可以使用在 <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, 或

<code>&lt;input&gt;</code> 元素:

&lt;a href="#" class="button info" role="button"&gt;Link Button&lt;/a&gt;

type="button" class="button info"&gt;Button&lt;/button&gt;

&lt;input type="button"

class="button info" value="Input Button"&gt;

&lt;input type="submit"

class="button info" value="Submit Button"&gt;

为什么将 a 标签的 href 设置为 # ?

当我们不希望链接点击跳转并得到 "404"

页面时，我们可以将 a 标签的 href 设置为 #。

我们可以使用 <code>.large</code>, <code>.small</code> 或 <code>.tiny</code> 类来设置按钮大小：

&lt;button type="button" class="button large"&gt;Large&lt;/button&gt;

type="button" class="button"&gt;Default&lt;/button&gt;

class="button small"&gt;Small&lt;/button&gt;

&lt;button type="button" class="button

tiny"&gt;Tiny&lt;/button&gt;

可以使用 <code>.radius</code> 和 <code>.round</code> 类来设置圆角按钮：

&lt;button type="button" class="button"&gt;Default Button&lt;/button&gt;

radius"&gt;Radius Button&lt;/button&gt;

round"&gt;Round Button&lt;/button&gt;

可以使用 <code>.expand</code> 类来设置按钮的宽度为 100%:

type="button" class="button expand"&gt;Expanded Button&lt;/button&gt;

可以使用 <code>.disabled</code> 类来设置按钮不可点击:

type="button" class="button disabled"&gt;Disabled Button&lt;/button&gt;