rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +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 82bfa965a7
commit 411e6b18cb
1 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
docs/examples/signin.html
View File

@ -29,32 +29,44 @@
body { body {
padding-top: 40px; padding-top: 40px;
padding-bottom: 40px; padding-bottom: 40px;
background-color: #f5f5f5; background-color: #eee;
} }
.form-signin { .form-signin {
max-width: 300px; max-width: 300px;
padding: 19px 29px 29px; padding: 30px;
margin: 0 auto 20px; margin: 0 auto;
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);
} }
.form-signin .form-signin-heading, .form-signin .form-signin-heading,
.form-signin .checkbox { .form-signin .checkbox {
margin-bottom: 10px; margin-bottom: 10px;
} }
.form-signin .checkbox {
font-weight: normal;
}
.form-signin input[type="text"], .form-signin input[type="text"],
.form-signin input[type="password"] { .form-signin input[type="password"] {
position: relative;
font-size: 16px; font-size: 16px;
height: auto; height: auto;
margin-bottom: 15px; padding: 10px;
padding: 7px 9px; -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> </style>
@ -68,12 +80,12 @@
<form class="form-signin"> <form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2> <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"> <input type="password" class="input-block-level" placeholder="Password">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me <input type="checkbox" value="remember-me"> Remember me
</label> </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> </form>
</div> <!-- /container --> </div> <!-- /container -->