网页设计代码素材:手风琴(网页设计)(accordion web design)

我正在使用 Twitter Bootstrap:

我想做什么?

我正在使用手风琴并排构建“登录”,“注册”按钮,这应该在 div 内交替显示表单。即当登录按钮被点击时,“注册”表单在部门内应该隐藏,并且“登录”表单在同一个 div 内应该显示,反之亦然“注册”按钮。

查看下面的 html 标记和 html 页面的屏幕截图。

div 内登录 & amp;注册的截图

screenshot of login & signup inside a div

<div cl="login-window"><!-- login window-->
     <on type="on" cl="btn btn-primary accordion" 
             data-toggle="collapse" data-target="#login">Log in</on>
     <on type="on" cl="btn btn-primary accordion" 
             data-toggle="collapse" data-target="#signup">Sign up</on>
     <div id="login" cl="collapse in">
      <form role="form">
              <div cl="form-group">
                  <input type="text" cl="form-control" id="nm" 
                         placeholder="Username"style="margin-top:5px;">
                  <input type="email" cl="form-control" id="email" 
                         placeholder="Email" >
                  <input type="pword" cl="form-control" id="psw" 
                         placeholder="Pword"style="margin-top:5px;">
              </div>
          </form>
      </div>
  <div id="signup" cl="collapse">
     <form role="form">
             <div cl="form-group">
                 <input type="email" cl="form-control" id="email" 
                        placeholder="Email" >
                 <input type="text" cl="form-control" id="nm" 
                        placeholder="Username"style="margin-top:5px;">
                 <input type="pword" cl="form-control" id="psw" 
                        placeholder="Pword"style="margin-top:5px;">
             </div>
         </form>
     </div>
</div><!-- login window ends-->

JSFILLDE:https://jsfiddle.net/b18t8o66/

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(931)
Cannon lake:从cannon.js迁移到 cannon-es时出错
上一篇
倾辛chinesemoneyboy:如何简化辛指数的对数(simplify logarithmic expression)
下一篇

相关推荐

  • css 移动:Unlock the Power of CSS to Transform Your Website

    CSS 移动是指使用 CSS 来改变元素的位置。它可以通过定位(positioning)、转换(transformation)和动画(animation)来实现。…

    2023-02-27 11:18:38
    0 95 98
  • 清除网页保存的密码:清除 jboss中的网页缓存(clear web)

    关于清除网页保存的密码的问题,在clear web中经常遇到,我开发一个 Web 应用程序:…

    2022-11-23 08:53:45
    0 47 66
  • Web渗透测试攻击流程:Web/网络/渗透测试开源工具(open source web application scanner)

    关于Web渗透测试攻击流程的问题,在open source web application scanner中经常遇到,我目前正在使用 ZAP 进行 Web 应用程序安全扫描。…

    2022-11-23 08:28:25
    0 38 77
  • Jmeter测试webservice接口:SoapUI Webservice测试

    关于Jmeter测试webservice接口的问题,在testing using soapui中经常遇到,我是新来的SoapUI我必须了解 soapUI ie:如何编写一个简单的 soapUI 测试以及如何执行它以及所有关于结果等。…

    2022-11-23 08:27:46
    0 71 31
  • android 视频编码深入理解MediaCodec API

    Android 视频编码是指将原始视频数据经过压缩编码后,生成新的视频数据,以便减少视频文件的体积,提高传输速度,以及更好地在 Android 设备上播放。…

    2023-01-13 10:58:18
    0 99 10
  • cv小敢:如何利用CV小敢提升职业技能?

    cv小敢(Computer Vision Tiny-YOLO)是一种轻量级的物体检测算法,它可以在资源受限的设备上运行,如嵌入式设备、智能手机等。它是基于YOLO(You Only Look Once)算法的一个变体,由Joseph Redmon和Ali Farhadi开发,旨在提高深度学习模型的性能,同时减少模型的大小和计算复杂度。…

    2023-02-09 13:08:59
    0 21 79
  • coremail论客邮箱Coremail论客邮箱

    Coremail论客邮箱是一款专业的企业邮箱服务,可以满足企业对安全、可靠性和高效性的要求。它拥有强大的安全性能,可以提供多种安全保护,包括防止邮件被窃取、拦截恶意邮件、防止跨站脚本攻击等。此外,它还支持多种企业级功能,如组织架构管理、收发邮件管理、文件共享管理、联系人管理等,可以帮助企业提高工作效率,提升企业形象。…

    2023-02-25 04:36:55
    0 25 65
  • linux 编译静态库:```ar cr libtest.a *.o```4. 完成!

    我们要创建一个源文件,比如:mylib.c,内容如下:#include…

    2023-03-19 08:46:39
    0 68 53

发表评论

登录 后才能评论

评论列表(76条)