Foundation 開關
Foundation 開關
開關是在滑鼠點擊(手指敲擊)下在 "On" 和 "Off" 狀態下切換:
切換開關使用 <div class="switch">
創建。 <div>
內添加帶有唯一 id 的 <input type="checkbox">
, <label>
元素的 for 屬性需要與 <input type="checkbox">
的 id 相匹配:
實例
<div class="switch">
<input id="mySwitch" type="checkbox">
<label for="mySwitch"></label>
</div>
開關大小
使用 .large
, .small
或 .tiny
類來設置開關大小:
實例
<div class="switch large">...</div>
<div class="switch">...</div>
<div class="switch small">...</div>
<div class="switch tiny">...</div>
圓角切換開關
使用 .radius
和 .round
類來設置圓角切換開關:
實例
<div class="switch">...</div>
<div class="switch radius">...</div>
<div class="switch round">...</div>
開關組
可以通過設置單選按鈕(radio)來設置單個選項。注意: 注意各個選項的 name
屬性必須一致 (實例中為 "myGroup" )。
實例
<div class="switch">
<input id="mySwitch1" type="radio" name="myGroup">
<label for="mySwitch1"></label>
</div>
<div class="switch">
<input id="mySwitch2" type="radio" name="myGroup" checked>
<label for="mySwitch2"></label>
</div>
![](https://pic.pimg.tw/zzuyanan/1488615166-1259157397.png)
![](https://pic.pimg.tw/zzuyanan/1482887990-2595557020.jpg)
※Foundation 提示框
※Foundation Joyride編程
※Foundation 輸入框
※Foundation 側邊欄
TAG:程序員小新人學習 |
※該怎麼玩兒?The Foundation of Learning
※蘋果 FoundationDB 開源 CloudKit 使用的數據層
※粉底測評#Dior forever undercover 24h foundation
※PH7現場 Blue Foundation
※mac fix studio foundation nc15 and嘮嗑哈哈哈
※Royal Foundation懷孕時尚抓拍欣賞
※Apple的雲資料庫FoundationDB現在開源
※Unity:AR Foundation將支持ARKit 3
※蘋果開源NoSQL 資料庫FoundationDB
※Unity AR Foundation開始支持ARKit 3.0
※世界智能駕駛挑戰賽:AutoCore受邀代表Autoware Foundation參賽
※阿什莉·比克頓將參展K11 Art Foundation群展Emerald City
※大健康鏈BHIC獲得Misitour foundation千萬美元戰略投資
※CoreLink推出Foundation 3D列印鈦金屬植入體多孔籠式系統
※重磅!羅氏24億美元收購Foundation Medicine
※Unity為iOS和安卓打造AR開發軟體:AR Foundation
※三言財經與Global Blockchain Foundation達成戰略合作,成為其中國首家戰略合作媒體
※Unity為手機AR推出跨平台開發工具AR Foundation
※滑板 | Foundation壓軸滑手Cole Wilson-滑板的一天!
※如何看待FoundationDB資料庫發展前景?