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
>
尝试一下 »
<
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"
>
尝试一下 »
| 为什么将 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
>
尝试一下 »
可以使用 .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
>
尝试一下 »
可以使用 .expand 类来设置按钮的宽度为 100%:
<
button
type=
"button"
class=
"button"
>Default Button
<
/button
>
<
button
type=
"button"
class=
"button expand"
>Expanded Button
<
/button
>
尝试一下 »
可以使用 .disabled 类来设置按钮不可点击:
<
button
type=
"button"
class=
"button"
>Default Button
<
/button
>
<
button
type=
"button"
class=
"button disabled"
>Disabled Button
<
/button
>
尝试一下 »