Tạo form đăng nhập phong cách Google với Bootstrap
Cách đây vài hôm, mình có đăng một bài viết là Tạo form đăng nhập – đăng ký thành viên giống trang Facebook . Hôm nay mình sẽ tiếp tục mang đến cho các bạn thêm một mẫu form đăng nhập được bắt chước từ gã khổng lồ Google. Bài viết này sử dụng Bootstrap framewokd để tạo hiệu ứng và sắp xếp ...
Cách đây vài hôm, mình có đăng một bài viết là Tạo form đăng nhập – đăng ký thành viên giống trang Facebook. Hôm nay mình sẽ tiếp tục mang đến cho các bạn thêm một mẫu form đăng nhập được bắt chước từ gã khổng lồ Google. Bài viết này sử dụng Bootstrap framewokd để tạo hiệu ứng và sắp xếp layout. Đây là một trong những front-end framework đang được sử dụng nhiều nhất hiện nay, vì thế ngoài việc học hỏi cách thiết kế của google, các bạn còn có thể học được cách sử dụng bootstrap cho những mẫu thiết kế của mình sau này.
Xem Demo | Download
HTML
Đầu tiên là chúng ta sẽ chèn file CSS và JS từ bootstrap CDN server vào bên trong thẻ <head>.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Kế tiếp là các bạn copy cấu trúc html cho form vào bên trong thẻ <body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<h1 class="text-center login-title">Sign in to continue to Bootsnipp</h1>
<div class="account-wall">
<img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
alt="">
<form class="form-signin">
<input type="text" class="form-control" placeholder="Email" required autofocus>
<input type="password" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">
Sign in</button>
<label class="checkbox pull-left">
<input type="checkbox" value="remember-me">
Remember me
</label>
<a href="#" class="pull-right need-help">Need help? </a><span class="clearfix"></span>
</form>
</div>
<a href="#" class="text-center new-account">Create an account </a>
</div>
</div>
</div>
CSS
Bây giờ các bạn chỉ việc thêm một số dòng CSS bên dưới là tạo hình xong form.
.form-signin
{
max-awidth: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading, .form-signin .checkbox
{
margin-bottom: 10px;
}
.form-signin .checkbox
{
font-weight: normal;
}
.form-signin .form-control
{
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control: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;
}
.account-wall
{
margin-top: 20px;
padding: 40px 0px 20px 0px;
background-color: #f7f7f7;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title
{
color: #555;
font-size: 18px;
font-weight: 400;
display: block;
}
.profile-img
{
awidth: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.need-help
{
margin-top: 10px;
}
.new-account
{
display: block;
margin-top: 10px;
}
Nhờ có sự giúp đỡ của Bootstrap mà công việc của chúng ta tiết kiệm được khá nhiều thời gian. Hy vọng , qua bài viết này, các bạn có thể tạo được những mẫu form bất kì mà các bạn bắt gặp trên Internet hoặc các website mà các bạn đang thiết kế.
Chuyên Mục: Css
Bài viết được đăng bởi webmaster
