Foundation 下拉菜单
Foundation 下拉菜单允许用户从预定义的下拉列表中选取一个值:
实例
Dropdown Button
Link 1
Link 2
Link 3
$(document).ready(function() {
$(document).foundation();})
实例解析
.dropdown 类为按钮添加一个向下的箭头符号”图标。
使用按钮或链接的 data-dropdown="id" 属性来打开下拉菜单。
id
Foundation 按钮组按钮组
Foundation 可以在同一行内创建一系列的按钮。
可以使用
元素并添加 .button-group 类来创建按钮组:
实例
Apple
Samsung
Sony
垂直按钮组
垂直按钮组使用 .stack 类来创建。注意,按钮会跨越父元素的整个宽度:
实例
Apple
Samsung
Sony
.stack-for-small 类用于小尺寸的屏幕,按钮有水平排列变为垂直排列:
实例
Foundation 图标
Foundation 提供了 283 个图标,你可以使用css来定义它的样式尺寸。
图标可用于文本,按钮,工具条,导航栏,表单等。
以下是 Foundation 图标的实例:
刷新按钮:
检测图标:
主页图标:
图标语法
创建图标语法格式如下:
name 部分替换为图标的名字。
要使用图标我们需要在 部分添加图标的样式文件:
Icon 实例
以下演示了使用图标的实例:
实例
Cloud icon:
Cloud icon as a l