8.5.1. Button styl ¶
Foundation 提供了 6 种按钮样式。 按钮类可以使用在 为什么将 a 标签的 href 设置为 # ? When we don’t want the link to click to jump and get the “404” page, we can set the href of the a tag to #.
.button
类创建了一个蓝色的按钮并附有内边距。不同颜色按钮类为：
.secondary
,
.success
,
.info
,
.warning
或
.alert
:Example ¶
<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>
<a>
,
<button>
, 或
<input>
元素:Example ¶
<a href="#" class="button info" role="button">Link Button</a>
<button type="button" class="button info">Button</button>
<input type="button" class="button info" value="Input Button">
<input type="submit" class="button info" value="Submit Button">
8.5.2. Button size ¶
我们可以使用
.large
,
.small
或
.tiny
类来设置按钮大小：Example ¶
<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>
8.5.3. Fillet button ¶
Can be used
.radius
And
.round
Class to set the fillet button:Example ¶
<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>
8.5.4. Extend button ¶
Can be used
.expand
Class to set the width of the button to 100%:Example ¶
<button type="button" class="button">Default Button</button>
<button type="button" class="button expand">Expanded Button</button>
8.5.5. Disable button ¶
Can be used
.disabled
Class to set the button is not clickable:Example ¶
<button type="button" class="button">Default Button</button>
<button type="button" class="button disabled">Disabled Button</button>