前端特效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小伙伴们带来帮助呦~~~如果你制作出了或收藏了哪些炫酷的前端特效,赶快留言分享给我们呦~~~


分享给朋友:
您可能感兴趣的文章:
随机阅读: