Foundation 按钮组
按钮组
Foundation 可以在同一行内创建一系列的按钮。
可以使用 <ul> 元素并添加 .button-group 类来创建按钮组：
实例
<ul class="button-group">
<li><button type="button" class="button">Apple</button></li>
<li><button type="button" class="button">Samsung</button></li>
<li><button type="button" class="button">Sony</button></li>
</ul>
<li><button type="button" class="button">Apple</button></li>
<li><button type="button" class="button">Samsung</button></li>
<li><button type="button" class="button">Sony</button></li>
</ul>
垂直按钮组垂直按钮组使用 .stack 类来创建。注意，按钮会跨越父元素的整个宽度: 实例 ul class="button-group stack" libutton type="button" class="button"Apple/button/li libutton type="button" class="button"Samsung/button/li libutton type="button" class="button"Sony/button/li/ul
.stack-for-small 类用于小尺寸的屏幕，按钮有水平排列变为垂直排列：
实例
<ul class="button-group stack-for-small">
<li><button type="button" class="button">Apple</button></li>
<li><button type="button" class="button">Samsung</button></li>
<li><button type="button" class="button">Sony</button></li>
</ul>
<li><button type="button" class="button">Apple</button></li>
<li><button type="button" class="button">Samsung</button></li>
<li><button type="button" class="button">Sony</button></li>
</ul>
圆角按钮组按钮组中使用 .radius 和 .round 类为按钮添加圆角效果： 实例 ul class="button-group radius" libutton type="button" class="button"Apple/button/li libutton type="button" class="button"Samsung/button/li libutton type="button" class="button"Sony/button/li/ulul class="button-group round" libutton type="button" class="button"Apple/button/li libutton type="button" class="button"Samsung/button/li libutton type="button" class="button"Sony/button/li/ul
均匀延展按钮组
.even-num 类用于在按钮组中均匀的分配按钮的宽度并跨越父元素 100% 宽度。
num 为按钮组中按钮的数量，从 1 到 8：
实例
<ul class="button-group even-3">
<li><button type="button" class="button">Apple</button></li>
<li><button type="button" class="button">Samsung</button></li>
<li><button type="button" class="button">Sony</button></li>
</ul>
<ul class="button-group even-5">
<li><button type="button" class="button">Apple</button></li>
<li><button type="button" class="button">Samsung</button></li>
<li><button type="button" class="button">Sony</button></li>
<li><button type="button" class="button">HTC</button></li>
<li><button type="button" class="button">Huawei</button></li>
</ul>
<ul class="button-group even-8">
<li><button type="button" class="button">A</button></li>
<li><button type="button" class="button">B</button></li>
<li><button type="button" class="button">C</button></li>
<li><button type="button" class="button">D</button></li>
<li><button type="button" class="button">E</button></li>
<li><button type="button" class="button">F</button></li>
<li><button type="button" class="button">G</button></li>
<li><button type="button" class="button">H</button></li>
</ul>
<li><button type="button" class="button">Apple</button></li>
<li><button type="button" class="button">Samsung</button></li>
<li><button type="button" class="button">Sony</button></li>
</ul>
<ul class="button-group even-5">
<li><button type="button" class="button">Apple</button></li>
<li><button type="button" class="button">Samsung</button></li>
<li><button type="button" class="button">Sony</button></li>
<li><button type="button" class="button">HTC</button></li>
<li><button type="button" class="button">Huawei</button></li>
</ul>
<ul class="button-group even-8">
<li><button type="button" class="button">A</button></li>
<li><button type="button" class="button">B</button></li>
<li><button type="button" class="button">C</button></li>
<li><button type="button" class="button">D</button></li>
<li><button type="button" class="button">E</button></li>
<li><button type="button" class="button">F</button></li>
<li><button type="button" class="button">G</button></li>
<li><button type="button" class="button">H</button></li>
</ul>
下拉菜单按钮下拉菜单按钮可以让用户选取设定好的值： 实例 !-- Trigger the dropdown --a href="#" data-dropdown="id01" class="button dropdown"Dropdown Button/a !-- The actual dropdown --ul id="id01" data-dropdown-content class="f-dropdown" lia href="#"Link 1/a/li lia href="#"Link 2/a/li lia href="#"Link 3/a/li/ul !-- Initialize Foundation JS --script $(document).ready(function() { $(document).foundation();}) /script
实例解析
.dropdown 类创建一个下拉菜单按钮。
使用带有 data-dropdown="id" 属性的按钮或链接打开下拉菜单。
id 值需要与下拉菜单的内容 (id01) 匹配。
在 <ul> 中添加 .f-dropdown 类和 data-dropdown-content 属性来创建下拉菜单的内容。
最后初始化 Foundation JS。
分割按钮
我们也可以创建一个分割按钮的下拉菜单。只需要在按钮中添加 .split 类并使用 span 元素生成一个方向箭的按钮：
实例
<button class="button split">Split Button
<span data-dropdown="id01"></span>
</button>
<ul id="id01" data-dropdown-content class="f-dropdown">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
<span data-dropdown="id01"></span>
</button>
<ul id="id01" data-dropdown-content class="f-dropdown">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat