草庐IT

Foundation 开关

runoob 2023-04-06 原文

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>

尝试一下 »

有关Foundation 开关的更多相关文章

  1. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  2. ruby - ruby 命令行开关 -rubygems & -r 不兼容吗? - 2

    我最近将一个ruby​​库转换为一个gem,这似乎破坏了命令行的可用性作为图书馆工作得很好$ruby-rfoobar-e'pFooBar.question'#=>"answer"作为一个gem,irb知道如何从命令行开关中请求一个gem$irb-rubygems-rfoobarirb(main):001:0>FooBar.question#=>"answer"但对于ruby​​本身来说同样失败了:$ruby-rubygems-rfoobar-e'pFooBar.question'ruby:nosuchfiletoload--foobar(LoadError)我现在必须这样做吗,这看起来

  3. ruby-on-rails - 如何使用 rails 3.1 覆盖 Zurb Foundation css 属性? - 2

    大家好,我正在开发一个新的Rails应用程序,我刚刚开始使用Foundation。我是用安装的railsgfoundation:install一切都按预期工作(我的意思是我可以在我的源代码中看到css,还有它的视觉效果;p)我只是不明白如何覆盖ZurbFoundation的默认属性...我在网上看到我应该编辑一些foundation.css或app.css但我的应用程序文件夹中似乎没有任何类似的文件....我通过编辑gemfile然后进行捆绑安装来完成安装。干杯 最佳答案 是的,如果您对app/assets/stylesheets/

  4. ruby - bundle exec rspec spec/=> RUBYOPT : -F (RuntimeError) 中的无效开关 - 2

    当我在Windows764位系统上运行bundleexecrspecspec/时,我收到以下错误:invalidswitchinRUBYOPT:-F(RuntimeError)我正在运行ruby​​1.9.2p136(2010-12-25)[i386-mingw32](安装在c:\ProgramFiles(x86)\Ruby192)和bundler1.0.15(作为ruby​​gem安装).关于如何解决这个问题的任何线索?谢谢,本 最佳答案 Bundler不喜欢Ruby的路径包含空格这一事实。为了解决这个问题,我编辑了runtime

  5. ruby-on-rails - Ruby on Rails 案例/开关。如何匹配对象? - 2

    我正在开发ruby​​onrails应用程序。对于sessionController,我想用一个案例来检查用户的帐户是否被锁定或禁止。我正在尝试使用类的对象作为案例,并使用when来检查属性。例如,user=Profile.find(1)caseuserwhenuser.banredirect_to()whenuser.lockredirect_to()elseredirect_to()end唯一的问题是它不起作用。这是什么工作:caseuser.banwhentrueredirect_to()elseredirect_to()end关于如何使用开关检查用户对象是否被禁止或锁定,有什么

  6. ruby-on-rails - Ruby 功能开关/功能脚蹼 - 2

    Flickr都给我带来了启发和Disqus使用功能开关。他们都在博客上介绍了他们以及他们在两个开发博客上的工作方式。我只是想知道是否有我缺少的Rubygem,或者是否有人知道在Ruby中执行此操作的方法?如果没有任何东西,我希望自己制作并在野外释放它。但我只是想先在这里问一下,因为我还没有找到任何与Flickr和Disqus所达到的远程相似的东西。 最佳答案 检查rollout如果您已经在使用Redis。 关于ruby-on-rails-Ruby功能开关/功能脚蹼,我们在StackOve

  7. ruby - 证书验证在 "gem install foundation"中失败 - 2

    在安装nodejs、ruby、gitplusbower后尝试安装Foundation。我不断收到以下错误,但我不知道如何解决:找不到有效的gem'foundation'(>=0),原因如下:无法从https://rubygems.org/下载数据-SSL_connectreturned=1errno=0state=SSLv3readservercertificateB:certificateverifyfailed(https://api.rubygems.org/latest_specs.4.8.gz)有什么想法吗? 最佳答案 如

  8. ruby - 如何使用 Ruby OptionParser 指定所需的开关(不是参数)? - 2

    我正在编写一个脚本,我想要一个带有值的--host开关,但是如果没有指定--host开关,我想要选项解析失败。我似乎不知道该怎么做。文档似乎只指定如何使参数值成为强制性的,而不是开关本身。 最佳答案 一种使用optparse的方法,可以在缺少开关时提供友好的输出:#!/usr/bin/envrubyrequire'optparse'options={}optparse=OptionParser.newdo|opts|opts.on('-f','--fromSENDER','usernameofsender')do|sender|op

  9. Ruby on Rails 开关 - 2

    这个问题在这里已经有了答案:HowtowriteaswitchstatementinRuby(28个答案)关闭9年前。谁能提供一个关于如何在Ruby中为变量使用switchcase的例子?

  10. javascript - Bootstrap 开关 setState 给出 js 错误 - 2

    我正在尝试使用来自Ajax的条件返回值来更改Bootstrap开关的状态,HTML,if(objData.limit==='Yes'){$('#limit').bootstrapSwitch('setState',true);$("#limit_amount").prop("readonly",false);}else{$('#limit').bootstrapSwitch('setState',false);$("#limit_amount").prop("readonly",true);}但它抛出如下错误..UncaughtTypeError:Cannotreadproperty'

随机推荐