手册

Foundation 5 教程 Foundation 起步 Foundation 文本 Foundation 表格 Foundation 按钮 Foundation 按钮组 Foundation 图标 Foundation 标签 Foundation 提醒框 Foundation 进度条 Foundation 面板 Foundation 图片 Foundation 下拉菜单 Foundation 折叠列表 Foundation 列表 Foundation 选项卡 Foundation 分页 Foundation 价格表 Foundation 顶部导航栏 Foundation 侧边栏 Foundation 滑动导航(Off-Canvas) Foundation Magellan Foundation 表单 Foundation 输入框尺寸 Foundation 开关 Foundation 滑块 Foundation 提示框 Foundation 模态框 Foundation Joyride Foundation 均衡器

Foundation 网格

Foundation 网格系统 Foundation 网格 - 水平堆叠 Foundation 网格 - 小型设备 Foundation 网格 - 中型设备 Foundation 网格 - 大型设备 Foundation 块状网格 Foundation 网格实例

Foundation 参考手册

首页大前端 Foundation Foundation 中文手册

Foundation 开关

阅读22181

更新时间2022-04-14

Foundation 输入框尺寸

Foundation 滑块

开关是在鼠标点击(手指敲击)下在 "On" 和 "Off" 状态下切换：

切换开关使用 <div class="switch"> 创建。<div> 内添加带有唯一 id 的 <input type="checkbox"> ，<label> 元素的 for 属性需要与 <input type="checkbox"> 的 id 相匹配：

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>

<body>

<div style="padding:20px;">
  <h2>开关</h2>
  <p>可以在 div 中添加 class="switch" 类，并添加 input checkbox 和 label 元素来创建开关:</p>
  <form>
    <div class="switch">
      <input id="mySwitch" type="checkbox">
      <label for="mySwitch"></label>
    </div>
  </form>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

开关大小

使用 .large, .small 或 .tiny 类来设置开关大小：

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>

<body>

<div style="padding:20px;">
  <h2>开关大小</h2>
  <p>使用 <code>.large</code>, <code>.small</code> 或 <code>.tiny</code> 类来设置开关的大小:</p>
  <span>Large</span>
  <div class="switch large">
    <input id="mySwitch1" type="checkbox">
    <label for="mySwitch1"></label>
  </div> 

  <span>Default</span>
  <div class="switch">
    <input id="mySwitch2" type="checkbox">
    <label for="mySwitch2"></label>
  </div> 

  <span>Small</span>
  <div class="switch small">
    <input id="mySwitch3" type="checkbox">
    <label for="mySwitch3"></label>
  </div> 

  <span>Tiny</span>
  <div class="switch tiny">
    <input id="mySwitch4" type="checkbox">
    <label for="mySwitch4"></label>
  </div> 
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

圆角切换开关

使用 .radius 和 .round 类来设置圆角切换开关：

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>

<body>

<div style="padding:20px;">
  <h2>圆角开关</h2>
  <p>使用 <code>.radius</code> 和 <code>.round</code> 类来设置圆角开关:</p>
  <span>默认</span>
  <div class="switch">
    <input id="mySwitch1" type="checkbox">
    <label for="mySwitch1"></label>
  </div> 

  <span>圆角</span>
  <div class="switch radius">
    <input id="mySwitch2" type="checkbox">
    <label for="mySwitch2"></label>
  </div> 

  <span>圆形</span>
  <div class="switch round">
    <input id="mySwitch3" type="checkbox">
    <label for="mySwitch3"></label>
  </div> 
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

开关组

可以通过设置单选按钮(radio)来设置单个选项。注意: 注意各个选项的 name 属性必须一致 (实例中为 "myGroup" )。

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>

<body>

<div style="padding:20px;">
  <h2>开关组</h2>
  <p>可以通过设置单选按钮(radio)来设置单个选项。<strong>注意:</strong> 注意各个选项的 <code>name</code> 属性必须一致 (实例中为 "myGroup" )。</p>
  <form>
    <div class="switch">
      <input id="mySwitch1" type="radio" name="myGroup">
      <label for="mySwitch1"></label>
    </div> 

    <div class="switch">
      <input id="mySwitch2" type="radio" checked name="myGroup">
      <label for="mySwitch2"></label>
    </div> 
    
    <div class="switch">
      <input id="mySwitch3" type="radio" name="myGroup">
      <label for="mySwitch3"></label>
    </div> 
  </form>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Foundation 输入框尺寸

Foundation 滑块