Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"表单样式3"
Bootstrap 3.2.0 Snippet by
Tinker404
3.2.0
Preview
HTML
CSS
View Full Screen
Forked from
Fork
Fork this
Parent
93
 
0 Fav
Post to Facebook
Tweet this
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="login-body"> <article class="container-login center-block"> <section> <ul id="top-bar" class="nav nav-tabs nav-justified"> <li class="active"><a href="#login-access">Accesso</a></li> <li><a href="#">Password dimenticata</a></li> </ul> <div class="tab-content tabs-login col-lg-12 col-md-12 col-sm-12 cols-xs-12"> <div id="login-access" class="tab-pane fade active in"> <h2><i class="glyphicon glyphicon-log-in"></i> Accesso</h2> <form method="post" accept-charset="utf-8" autocomplete="off" role="form" class="form-horizontal"> <div class="form-group "> <label for="login" class="sr-only">Email</label> <input type="text" class="form-control" name="login" id="login_value" placeholder="Email" tabindex="1" value="" /> </div> <div class="form-group "> <label for="password" class="sr-only">Password</label> <input type="password" class="form-control" name="password" id="password" placeholder="Password" value="" tabindex="2" /> </div> <div class="checkbox"> <label class="control-label" for="remember_me"> <input type="checkbox" name="remember_me" id="remember_me" value="1" class="" tabindex="3" /> Ricordami </label> </div> <br/> <div class="form-group "> <button type="submit" name="log-me-in" id="submit" tabindex="5" class="btn btn-lg btn-primary">Entra</button> </div> </form> </div> </div> </section> </article> </div>
@import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700"); body { font-family: Open Sans; font-size: 14px; line-height: 1.42857; background: #333333; height: 350px; padding: 0; margin: 0; } .container-login { min-height: 0; width: 480px; color: #333333; margin-top: 40px; padding: 0; } .center-block { display: block; margin-left: auto; margin-right: auto; } .container-login > section { margin-left: 0; margin-right: 0; padding-bottom: 10px; } #top-bar { display: inherit; } .nav-tabs.nav-justified { border-bottom: 0 none; width: 100%; } .nav-tabs.nav-justified > li { display: table-cell; width: 1%; float: none; } .container-login .nav-tabs.nav-justified > li > a, .container-login .nav-tabs.nav-justified > li > a:hover, .container-login .nav-tabs.nav-justified > li > a:focus { background: #ea533f; border: medium none; color: #ffffff; margin-bottom: 0; margin-right: 0; border-radius: 0; } .container-login .nav-tabs.nav-justified > .active > a, .container-login .nav-tabs.nav-justified > .active > a:hover, .container-login .nav-tabs.nav-justified > .active > a:focus { background: #ffffff; color: #333333; } .container-login .nav-tabs.nav-justified > li > a:hover, .container-login .nav-tabs.nav-justified > li > a:focus { background: #de2f18; } .tabs-login { background: #ffffff; border: medium none; margin-top: -1px; padding: 10px 30px; } .container-login h2 { color: #ea533f; } .form-control { background-color: #ffffff; background-image: none; border: 1px solid #999999; border-radius: 0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; color: #333333; display: block; font-size: 14px; height: 34px; line-height: 1.42857; padding: 6px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%; } .container-login .checkbox { margin-top: -15px; } .container-login button { background-color: #ea533f; border-color: #e73e28; color: #ffffff; border-radius: 0; font-size: 18px; line-height: 1.33; padding: 10px 16px; width: 100%; } .container-login button:hover, .container-login button:focus { background: #de2f18; border-color: #be2815; }
Related:
See More
Template
Material Dashboard Pro Angular
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76