Foundation 按钮组学习笔记

简介

Foundation 是一个流行的响应式前端框架，它提供了大量的 UI 组件帮助开发者快速构建漂亮的 Web 应用程序。其中之一就是按钮组（Button Group）。

按钮组是一组可以相互切换并且具有类似于选项卡的行为的单选按钮。这种组件通常用于导航、筛选和控制等场合。

基础用法

按钮组由 ul 元素和一组 label 元素组成，每个 label 都拥有一个单选按钮和一个文本标签。以下是一个基本的按钮组示例：

htmlCopy Code
<ul class="button-group">
  <li><input type="radio" id="btn1" name="btn" checked><label for="btn1">按钮 1</label></li>
  <li><input type="radio" id="btn2" name="btn"><label for="btn2">按钮 2</label></li>
  <li><input type="radio" id="btn3" name="btn"><label for="btn3">按钮 3</label></li>
</ul>

按钮组默认是横向排列，每个按钮之间有一定的间隔。按钮的样式可以通过添加 class 进行修改。

样式定制

Foundation 提供了多种样式类来更改按钮组的外观和表现。以下是一些常用的样式类：

• .button-group：最基础的样式类，对按钮组进行一般性的样式设置。
• .button-group.radius：使按钮组的边缘变得更加圆润。
• .button-group.round：使按钮组的每个按钮变得更加圆润。
• .button-group.even-2：将按钮组划分成两列，每列有相同数量的按钮。
• .button-group.stack-for-small：在屏幕宽度小于 40em 时，自动将按钮组堆叠起来。

示例

以下示例演示了一个垂直排列的按钮组，并且每个按钮都有不同的颜色和图标。

htmlCopy Code
<ul class="vertical button-group">
  <li><input type="radio" id="btn4" name="btn"><label for="btn4" class="primary"><i class="fa fa-home"></i> 主页</label></li>
  <li><input type="radio" id="btn5" name="btn"><label for="btn5" class="success"><i class="fa fa-check"></i> 确定</label></li>
  <li><input type="radio" id="btn6" name="btn"><label for="btn6" class="alert"><i class="fa fa-exclamation-triangle"></i> 警告</label></li>
</ul>

该示例使用了 FontAwesome 图标库，为 label 元素添加了不同的颜色类，使每个按钮的背景色和图标具有不同的样式。

总结

Foundation 按钮组是一个非常强大的 UI 组件，允许开发人员快速创建漂亮的交互式控件。通过合理地运用不同的样式类，可以将按钮组定制成适合特定场景的样式。