rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Code Issues Actions Packages Releases Activity

unified and simplified sign in form example

Browse Source
This commit is contained in:
Mark Otto 2013-01-18 01:52:16 -08:00
parent 07543a9403
commit e405a22301
1 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
signin.html
View File

@ -29,32 +29,44 @@
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
background-color: #eee;
}
.form-signin {
max-width: 300px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
padding: 30px;
margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
position: relative;
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin input[type="text"]:focus,
.form-signin input[type="password"]:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>
@ -68,12 +80,12 @@
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="input-block-level" placeholder="Email address">
<input type="text" class="input-block-level" placeholder="Email address" autofocus>
<input type="password" class="input-block-level" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-large btn-primary" type="submit">Sign in</button>
<button class="btn btn-large btn-primary btn-block" type="submit">Sign in</button>
</form>
</div> <!-- /container -->