Best Bootstrap Login Form Style
由于上一篇提到flask + bootstarp 做一个简单的登录页面，所以本篇幅是上一篇幅的一个副产品，在找模板的时候，会国外一篇文章上看到的几个不错的模板，这里摘录如下。
A few weeks ago I made a post about the login form style using CSS.Now, I find the CSS login form with bootstrap. We know, bootstrap is most CSS fraemwork used on the planet. I am using bootstrap to design an online store, this blog and others. Bootstrap is easy to use and produce responsive web design.
Login form is usually used as a screen to enter an application or service. Nearly all of the web using the login form. I found some login form designs that you can use. All use bootrap as framework. Incidentally, I was looking for a design for applications that I make. So, this list may be useful for you as well.
All this code and example using latest bootstrap version (3.03), make sure you use right version before apply.
1. Parallax Login form with Bootstrap
Its awesome login form with parallax effect. Using CSS+Javascript to build it. See this code
HTML code
1<script src="http://mymaplist.com/js/vendor/TweenLite.min.js"></script>
2<!-- This is a very simple parallax effect achieved by simple CSS 3 multiple backgrounds, made by http://twitter.com/msurguy -->
3<div class="container">
4 <div class="row vertical-offset-100">
5 <div class="col-md-4 col-md-offset-4">
6 <div class="panel panel-default">
7 <div class="panel-heading">
8 <h3 class="panel-title">Please sign in</h3>
9 </div>
10 <div class="panel-body">
11 <form accept-charset="UTF-8" role="form">
12 <fieldset>
13 <div class="form-group">
14 <input class="form-control" placeholder="E-mail" name="email" type="text">
15 </div>
16 <div class="form-group">
17 <input class="form-control" placeholder="Password" name="password" type="password" value="">
18 </div>
19 <div class="checkbox">
20 <label>
21 <input name="remember" type="checkbox" value="Remember Me"> Remember Me
22 </label>
23 </div>
24 <input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
25 </fieldset>
26 </form>
27 </div>
28 </div>
29 </div>
30 </div>
31</div>
CSS
1body{
2 background: url(http://mymaplist.com/img/parallax/back.png);
3 background-color: #444;
4 background: url(http://mymaplist.com/img/parallax/pinlayer2.png),url(http://mymaplist.com/img/parallax/pinlayer1.png),url(http://mymaplist.com/img/parallax/back.png);
5}
6.vertical-offset-100{
7 padding-top:100px;
8}
Javascript (Jquery needed)
1$(document).ready(function(){
2 $(document).mousemove(function(e){
3 TweenLite.to($('body'),
4 .5,
5 { css:
6 {
7 'background-position':parseInt(event.pageX/8) + "px "+parseInt(event.pageY/12)+"px, "+parseInt(event.pageX/15)+"px "+parseInt(event.pageY/15)+"px, "+parseInt(event.pageX/30)+"px "+parseInt(event.pageY/30)+"px"
8 }
9 });
10 });
11});
This code has been created by msurguy Source. / Demo
2. Full Screen Login Form with Bootstrap
HTML Code
1<div class="container">
2 <div class="row">
3 <div class="col-md-12">
4 <div class="pr-wrap">
5 <div class="pass-reset">
6 <label>
7 Enter the email you signed up with</label>
8 <input type="email" placeholder="Email" />
9 <input type="submit" value="Submit" class="pass-reset-submit btn btn-success btn-sm" />
10 </div>
11 </div>
12 <div class="wrap">
13 <p class="form-title">
14 Sign In</p>
15 <form class="login">
16 <input type="text" placeholder="Username" />
17 <input type="password" placeholder="Password" />
18 <input type="submit" value="Sign In" class="btn btn-success btn-sm" />
19 <div class="remember-forgot">
20 <div class="row">
21 <div class="col-md-6">
22 <div class="checkbox">
23 <label>
24 <input type="checkbox" />
25 Remember Me
26 </label>
27 </div>
28 </div>
29 <div class="col-md-6 forgot-pass-content">
30 <a href="javascription:void(0)" class="forgot-pass">Forgot Password</a>
31 </div>
32 </div>
33 </div>
34 </form>
35 </div>
36 </div>
37 </div>
38 <div class="posted-by">Posted By: <a href="http://www.jquery2dotnet.com">Bhaumik Patel</a></div>
39</div>
CSS
1body
2{
3 background: url('http://farm3.staticflickr.com/2832/12303719364_c25cecdc28_b.jpg') fixed;
4 background-size: cover;
5 padding: 0;
6 margin: 0;
7}
8.wrap
9{
10 width: 100%;
11 height: 100%;
12 min-height: 100%;
13 position: absolute;
14 top: 0;
15 left: 0;
16 z-index: 99;
17}
18p.form-title
19{
20 font-family: 'Open Sans' , sans-serif;
21 font-size: 20px;
22 font-weight: 600;
23 text-align: center;
24 color: #FFFFFF;
25 margin-top: 5%;
26 text-transform: uppercase;
27 letter-spacing: 4px;
28}
29form
30{
31 width: 250px;
32 margin: 0 auto;
33}
34form.login input[type="text"], form.login input[type="password"]
35{
36 width: 100%;
37 margin: 0;
38 padding: 5px 10px;
39 background: 0;
40 border: 0;
41 border-bottom: 1px solid #FFFFFF;
42 outline: 0;
43 font-style: italic;
44 font-size: 12px;
45 font-weight: 400;
46 letter-spacing: 1px;
47 margin-bottom: 5px;
48 color: #FFFFFF;
49 outline: 0;
50}
51form.login input[type="submit"]
52{
53 width: 100%;
54 font-size: 14px;
55 text-transform: uppercase;
56 font-weight: 500;
57 margin-top: 16px;
58 outline: 0;
59 cursor: pointer;
60 letter-spacing: 1px;
61}
62form.login input[type="submit"]:hover
63{
64 transition: background-color 0.5s ease;
65}
66form.login .remember-forgot
67{
68 float: left;
69 width: 100%;
70 margin: 10px 0 0 0;
71}
72form.login .forgot-pass-content
73{
74 min-height: 20px;
75 margin-top: 10px;
76 margin-bottom: 10px;
77}
78form.login label, form.login a
79{
80 font-size: 12px;
81 font-weight: 400;
82 color: #FFFFFF;
83}
84form.login a
85{
86 transition: color 0.5s ease;
87}
88form.login a:hover
89{
90 color: #2ecc71;
91}
92.pr-wrap
93{
94 width: 100%;
95 height: 100%;
96 min-height: 100%;
97 position: absolute;
98 top: 0;
99 left: 0;
100 z-index: 999;
101 display: none;
102}
103.show-pass-reset
104{
105 display: block !important;
106}
107.pass-reset
108{
109 margin: 0 auto;
110 width: 250px;
111 position: relative;
112 margin-top: 22%;
113 z-index: 999;
114 background: #FFFFFF;
115 padding: 20px 15px;
116}
117.pass-reset label
118{
119 font-size: 12px;
120 font-weight: 400;
121 margin-bottom: 15px;
122}
123.pass-reset input[type="email"]
124{
125 width: 100%;
126 margin: 5px 0 0 0;
127 padding: 5px 10px;
128 background: 0;
129 border: 0;
130 border-bottom: 1px solid #000000;
131 outline: 0;
132 font-style: italic;
133 font-size: 12px;
134 font-weight: 400;
135 letter-spacing: 1px;
136 margin-bottom: 5px;
137 color: #000000;
138 outline: 0;
139}
140.pass-reset input[type="submit"]
141{
142 width: 100%;
143 border: 0;
144 font-size: 14px;
145 text-transform: uppercase;
146 font-weight: 500;
147 margin-top: 10px;
148 outline: 0;
149 cursor: pointer;
150 letter-spacing: 1px;
151}
152.pass-reset input[type="submit"]:hover
153{
154 transition: background-color 0.5s ease;
155}
156.posted-by
157{
158 position: absolute;
159 bottom: 26px;
160 margin: 0 auto;
161 color: #FFF;
162 background-color: rgba(0, 0, 0, 0.66);
163 padding: 10px;
164 left: 45%;
165}
Javascript (Jquery needed)
1$(document).ready(function () {
2 $('.forgot-pass').click(function(event) {
3 $(".pr-wrap").toggleClass("show-pass-reset");
4 });
5 $('.pass-reset-submit').click(function(event) {
6 $(".pr-wrap").removeClass("show-pass-reset");
7 });
8});
I’ll update this list soon, please stay tune. Dont forget to subscribe our RSS feed
Update : Ok, i am back to update this awesome list.
3. Flip Login Form and Register with 3D Effect
This snippet will give a flip 3D effect, check this demo and read the code.
1<div class="container">
2 <div class="row">
3 <div class="container" id="formContainer">
4 <form class="form-signin" id="login" role="form">
5 <h3 class="form-signin-heading">Please sign in</h3>
6 <a href="#" id="flipToRecover" class="flipLink">
7 <div id="triangle-topright"></div>
8 </a>
9 <input type="email" class="form-control" name="loginEmail" id="loginEmail" placeholder="Email address" required autofocus>
10 <input type="password" class="form-control" name="loginPass" id="loginPass" placeholder="Password" required>
11 <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
12 </form>
13 <form class="form-signin" id="recover" role="form">
14 <h3 class="form-signin-heading">Enter email address</h3>
15 <a href="#" id="flipToLogin" class="flipLink">
16 <div id="triangle-topleft"></div>
17 </a>
18 <input type="email" class="form-control" name="loginEmail" id="loginEmail" placeholder="Email address" required autofocus>
19 <button class="btn btn-lg btn-primary btn-block" type="submit">Recover password</button>
20 </form>
21 </div> <!-- /container -->
22 </div>
23</div>
24====CSS
25body {
26 padding-top: 40px;
27 padding-bottom: 40px;
28 background-color: #ddd;
29}
30.form-signin {
31 max-width: 330px;
32 padding: 15px;
33 margin: 0 auto;
34 background-color: #f3f3f3;
35}
36.form-signin .form-signin-heading,
37.form-signin .checkbox {
38 margin-bottom: 10px;
39}
40.form-signin .checkbox {
41 font-weight: normal;
42}
43.form-signin .form-control {
44 -webkit-touch-callout: none;
45 -webkit-user-select: none;
46 -khtml-user-select: none;
47 -moz-user-select: none;
48 -ms-user-select: none;
49 user-select: none;
50 position: relative;
51 font: 15px 'Segoe UI',Arial,sans-serif;
52 background-color: #EAEBE5;
53 height: auto;
54 padding: 10px;
55 color:#7e8c8d;
56 outline:none;
57 -webkit-box-sizing: border-box;
58 -moz-box-sizing: border-box;
59 box-sizing: border-box;
60}
61.form-signin .form-control:focus {
62 z-index: 2;
63}
64.form-signin input[type="email"] {
65 margin-bottom: -1px;
66 border-bottom-left-radius: 0;
67 border-bottom-right-radius: 0;
68}
69.form-signin input[type="password"] {
70 margin-bottom: 10px;
71 border-top-left-radius: 0;
72 border-top-right-radius: 0;
73}
74#recover input[type="email"] {
75 margin-bottom: 10px;
76 border-bottom-left-radius: 0;
77 border-bottom-right-radius: 0;
78}
79/*___________________________________*/
80.container {
81 border-top: 2px solid #aaa;
82 box-shadow: 0 2px 10px rgba(0,0,0,0.8);
83 width:288px;
84 height:321px;
85 margin:0 auto;
86 position:relative;
87 z-index:1;
88 -moz-perspective: 800px;
89 -webkit-perspective: 800px;
90 perspective: 800px;
91}
92.container form {
93 width:100%;
94 height:100%;
95 position:absolute;
96 top:0;
97 left:0;
98 /* Enabling 3d space for the transforms */
99 -moz-transform-style: preserve-3d;
100 -webkit-transform-style: preserve-3d;
101 transform-style: preserve-3d;
102 /* When the forms are flipped, they will be hidden */
103 -moz-backface-visibility: hidden;
104 -webkit-backface-visibility: hidden;
105 backface-visibility: hidden;
106 /* Enabling a smooth animated transition */
107 -moz-transition:0.8s;
108 -webkit-transition:0.8s;
109 transition:0.8s;
110}
111.container.flipped .form-signin{
112 opacity:0;
113 /**
114 * Rotating the login form when the
115 * flipped class is added to the container
116 */
117 -moz-transform:rotateY(-180deg);
118 -webkit-transform:rotateY(-180deg);
119 transform:rotateY(-180deg);
120}
121.container.flipped #recover{
122 opacity:1;
123 /* Rotating the recover div into view */
124 -moz-transform:rotateY(0deg);
125 -webkit-transform:rotateY(0deg);
126 transform:rotateY(0deg);
127}
128.form-signin {
129 z-index:100;
130}
131 /* Enabling 3d space for the transforms */
132 -moz-transform-style: preserve-3d;
133 -webkit-transform-style: preserve-3d;
134 transform-style: preserve-3d;
135 /* When the forms are flipped, they will be hidden */
136 -moz-backface-visibility: hidden;
137 -webkit-backface-visibility: hidden;
138 backface-visibility: hidden;
139 /* Enabling a smooth animated transition */
140 -moz-transition:0.8s;
141 -webkit-transition:0.8s;
142 transition:0.8s;
143}
144#login{
145 background: #f3f3f3;
146 z-index: 100;
147}
148#recover:before {
149 /* The "Click here" tooltip */
150 width:100px;
151 height:26px;
152 content:'Sign in ->';
153 position:absolute;
154 right:270px;
155 top:15px;
156}
157#login:after {
158 /* The "Click here" tooltip */
159 width:150px;
160 height:26px;
161 content:'<- Forgot password?';
162 position:absolute;
163 right:-170px;
164 top:15px;
165}
166#recover{
167 background:#f3f3f3;
168 z-index:1;
169 /* Rotating the recover password form by default */
170 -moz-transform:rotateY(180deg);
171 -webkit-transform:rotateY(180deg);
172 transform:rotateY(180deg);
173}
174#formContainer.flipped #login{
175 opacity:0;
176 /**
177 * Rotating the login form when the
178 * flipped class is added to the container
179 */
180 -moz-transform:rotateY(-180deg);
181 -webkit-transform:rotateY(-180deg);
182 transform:rotateY(-180deg);
183}
184#formContainer.flipped #recover{
185 opacity:1;
186 /* Rotating the recover div into view */
187 -moz-transform:rotateY(0deg);
188 -webkit-transform:rotateY(0deg);
189 transform:rotateY(0deg);
190}
191/*----------------------------
192 Inputs, Buttons & Links
193-----------------------------*/
194#login .flipLink,
195#recover .flipLink{
196 height: 50px;
197 overflow: hidden;
198 position: absolute;
199 right: 0;
200 text-indent: -9999px;
201 top: 0;
202 width: 50px;
203}
204#triangle-topright {
205 -webkit-touch-callout: none;
206 -webkit-user-select: none;
207 -khtml-user-select: none;
208 -moz-user-select: none;
209 -ms-user-select: none;
210 user-select: none;
211 width: 0;
212 height: 0;
213 border-top: 100px solid #ddd;
214 border-left: 100px solid transparent;
215}
216#triangle-topleft {
217 -webkit-touch-callout: none;
218 -webkit-user-select: none;
219 -khtml-user-select: none;
220 -moz-user-select: none;
221 -ms-user-select: none;
222 user-select: none;
223 right:auto;
224 left:0;
225 width: 0;
226 height: 0;
227 border-top: 50px solid #ddd;
228 border-right: 50px solid transparent;
229}
230#recover .flipLink{
231 right:auto;
232 left:0;
233}
234#forkongithub a {
235 box-sizing: content-box;
236 background:#ddd;
237 color:#fff;
238 text-decoration:none;
239 font-family:arial, sans-serif;
240 text-align:center;
241 font-weight:bold;
242 padding:5px 40px;
243 font-size:1rem;
244 line-height:2rem;
245 position:relative;
246 transition:0.5s;
247}
248#forkongithub a:hover {
249 background:#aaa;
250 color:#fff;
251}
252#forkongithub a::before, #forkongithub a::after {
253 content:"";
254 width:100%;
255 display:block;
256 position:absolute;
257 top:1px;
258 left:0;
259 height:1px;
260 background:#fff;
261}
262#forkongithub a::after {
263 bottom:1px;
264 top:auto;
265}
266@media screen and (min-width:800px){
267 #forkongithub {
268 position:absolute;
269 display:block;
270 top:0;
271 right:0;
272 width:200px;
273 overflow:hidden;
274 height:200px;
275 }
276 #forkongithub a {
277 width:200px;
278 position:absolute;
279 top:60px;
280 right:-60px;
281 transform:rotate(45deg);
282 -webkit-transform:rotate(45deg);
283 box-shadow:2px 2px 10px rgba(0,0,0,0.8);
284 }
285}
286==============Javascript
287$(function(){
288 // Checking for CSS 3D transformation support
289 $.support.css3d = supportsCSS3D();
290 var formContainer = $('#formContainer');
291 // Listening for clicks on the ribbon links
292 $('.flipLink').click(function(e){
293 // Flipping the forms
294 formContainer.toggleClass('flipped');
295 // If there is no CSS3 3D support, simply
296 // hide the login form (exposing the recover one)
297 if(!$.support.css3d){
298 $('#login').toggle();
299 }
300 e.preventDefault();
301 });
302 formContainer.find('form').submit(function(e){
303 // Preventing form submissions. If you implement
304 // a backend, you might want to remove this code
305 e.preventDefault();
306 });
307 // A helper function that checks for the
308 // support of the 3D CSS3 transformations.
309 function supportsCSS3D() {
310 var props = [
311 'perspectiveProperty', 'WebkitPerspective', 'MozPerspective'
312 ], testDom = document.createElement('a');
313 for(var i=0; i<props.length; i++){
314 if(props[i] in testDom.style){
315 return true;
316 }
317 }
318 return false;
319 }
320});
4、Iron Man Style Login Form
Create a login form like in the Iron Man movie, make sure your visitors surprised with this style.Demo and Source code
捐赠本站(Donate)
如您感觉文章有用，可扫码捐赠本站！(If the article useful, you can scan the QR code to donate))
- Author: shisekong
- Link: https://blog.361way.com/best-bootstrap-login/4454.html
- License: This work is under a 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议. Kindly fulfill the requirements of the aforementioned License when adapting or creating a derivative of this work.