前端特效14：Bootstrap3的弹出式悬浮登录框效果设计

最新推荐文章于 2024-04-21 13:20:11 发布

hzp666

最新推荐文章于 2024-04-21 13:20:11 发布

阅读量2.3k

点赞数

分类专栏： HTML 文章标签： HTML 特效登录

HTML 专栏收录该内容

131 篇文章 17 订阅

订阅专栏

前端特效14：Bootstrap3的弹出式悬浮登录框效果设计

今天，小编将与大家分享web前端特效荟萃系列第十四期，喜欢把玩儿炫酷效果的小伙伴快快看过来^_^ ，希望大家喜欢呦～

第14期，给大家分享一个使用Bootstrap3生成的弹出式悬浮登录框效果设计效果，相关代码如下：

 <!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>cloth</title>
  <style>
    @import url('http://cdn.gbtags.com/twitter-bootstrap/3.2.0/css/bootstrap.css');

body{
 font-family: 'microsoft yahei',Arial,sans-serif;
 margin:0;
 padding:0;
}
   
  </style>
</head>

  
<body>
  <div id="loginModal" class="modal show">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close">x</button>
        <h1 class="text-center text-primary">登录</h1>
      </div>
      <div class="modal-body">
        <form action="" class="form col-md-12 center-block">
          <div class="form-group">
            <input type="text" class="form-control input-lg" placeholder="电子邮件">
          </div>
          <div class="form-group">
            <input type="password" class="form-control input-lg" placeholder="登录密码">
          </div>
          <div class="form-group">
            <button class="btn btn-primary btn-lg btn-block">立刻登录</button>
            <span><a href="#">找回密码</a></span>
            <span><a href="#" class="pull-right">注册</a></span>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        
      </div>
    </div>
  </div>
</div>

</body>
</html>

在线演示：Here～

今天的分享就是这些啦，这里是igeekbar，希望可以给各位geek小伙伴们带来帮助呦~~~如果你制作出了或收藏了哪些炫酷的前端特效，赶快留言分享给我们呦~~~

hzp666

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端特效14：Bootstrap3的弹出式悬浮登录框效果设计

前端特效14：Bootstrap3的弹出式悬浮登录框效果设计#精选WEB前端特效今天，小编将与大家分享web前端特效荟萃系列第十四期，喜欢把玩儿炫酷效果的小伙伴快快看过来^_^ ，希望大家喜欢呦～第14期，给大家分享一个使用Bootstrap3生成的弹出式悬浮登录框效果设计效果，相关代码如下： cloth @
复制链接

扫一扫