Foundation 基础
Foundation 教程
Foundation 安装
Foundation 按钮
Foundation 按钮组
Foundation 标签
Foundation 表单
Foundation 表格
Foundation 侧边栏
Foundation 顶部导航栏
Foundation 分页
Foundation 滑动导航
Foundation 滑块
Foundation 价格表
Foundation 进度条
Foundation 均衡器(Equalizer)
Foundation 开关
Foundation 列表
Foundation 麦哲伦（Magellan）导航
Foundation Joyride
Foundation 面板
Foundation 模态框
Foundation 输入框 尺寸
Foundation 提示框
Foundation 提醒框
Foundation 图标
Foundation 图片
Foundation 文本
Foundation 下拉菜单
Foundation 选项卡
Foundation 折叠列表
Foundation 手册
Foundation CSS 参考手册
Foundation CSS 可见性
Foundation 图标参考手册
Foundation 网格
Foundation 块状网格
Foundation 网格 - 大型设备
Foundation 网格 - 水平堆叠
Foundation 网格 - 小型设备
Foundation 网格 - 中型设备
Foundation 网格实例
Foundation 网格系统
©
本文檔使用 php中文網手册 發布
文字
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>实例预览 »
按钮类可以使用在 <a>, <button>, 或
<input> 元素:
实例
<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>实例预览 »
关于我们 联系我们 留言板
手册网