亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Foundation 中文手冊(cè) / Foundation 開(kāi)關(guān)

Foundation 開(kāi)關(guān)

開(kāi)關(guān)是在鼠標(biāo)點(diǎn)擊(手指敲擊)下在 "On" 和 "Off" 狀態(tài)下切換：

切換開(kāi)關(guān)使用 <div class="switch"> 創(chuàng)建。<div> 內(nèi)添加帶有唯一 id  的 <input type="checkbox"> ，<label> 元素的 for 屬性需要與 <input type="checkbox"> 的 id 相匹配：

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>開(kāi)關(guān)</h2>
  <p>可以在 div 中添加 class="switch" 類，并添加 input checkbox 和 label 元素來(lái)創(chuàng)建開(kāi)關(guān):</p>
  <form>
    <div class="switch">
      <input id="mySwitch" type="checkbox">
      <label for="mySwitch"></label>
    </div>
  </form>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

開(kāi)關(guān)大小

使用 .large, .small 或 .tiny 類來(lái)設(shè)置開(kāi)關(guān)大小：

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>開(kāi)關(guān)大小</h2>
  <p>使用 <code>.large</code>, <code>.small</code> 或 <code>.tiny</code> 類來(lái)設(shè)置開(kāi)關(guān)的大小:</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

圓角切換開(kāi)關(guān)

使用 .radius 和 .round 類來(lái)設(shè)置圓角切換開(kāi)關(guān)：

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>圓角開(kāi)關(guān)</h2>
  <p>使用 <code>.radius</code> 和 <code>.round</code> 類來(lái)設(shè)置圓角開(kāi)關(guān):</p>
  <span>默認(rèn)</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

開(kāi)關(guān)組

可以通過(guò)設(shè)置單選按鈕(radio)來(lái)設(shè)置單個(gè)選項(xiàng)。注意: 注意各個(gè)選項(xiàng)的 name 屬性必須一致 (實(shí)例中為 "myGroup" )。

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</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>開(kāi)關(guān)組</h2>
  <p>可以通過(guò)設(shè)置單選按鈕(radio)來(lái)設(shè)置單個(gè)選項(xiàng)。<strong>注意:</strong> 注意各個(gè)選項(xiàng)的 <code>name</code> 屬性必須一致 (實(shí)例中為 "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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例