04/10/2018, 20:12

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.

Tạo form đăng nhập phong cách Google với Bootstrap

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ế.

Tags: Bootstrap google style login form

Chuyên Mục: Css

Bài viết được đăng bởi webmaster

Bài liên quan

Tạo meu theo phong cách Youtube với jQuery và CSS

Có lẽ các bạn đã quá quen thuộc với hiệu ứng menu thường xuất hiện ở trang Youtube. Đây là một mẫu menu rất tiện lợi trong việc tiết kiệm không gian hiển thị web. Với menu này, các bạn sẽ có thêm nhiều vị trí để hiển thị những thông tin khác trên web của mình. Xem Demo | Download HTML ...

Trần Trung Dũng viết 3 tuần trước

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 ...

Vũ Văn Thanh viết 3 tuần trước

Tạo form đăng nhập – đăng ký thành viên giống trang Facebook

Hôm bữa có một bạn trên Facebook đã hỏi mình về cách tạo form đăng nhập và đăng ký thành viên giống như trên Facebook. Hôm nay mình sẽ bê nguyên xi trang chủ của facebook về và cũng là một bài học hữu ích cho các bạn, có thể học cách sắp xếp cũng như trang trí các field sao cho đẹp mắt và gọn gàng ...

Trần Trung Dũng viết 3 tuần trước

Tạo Side Menu theo phong cách iOS 7 với jQuery và CSS3

Fly Side Menu là một jQuery plugin cực cool được dùng để tạo menu với sự hỗ trợ của CSS3. Trong bài viết này, mình sẽ chia sẻ cho các bạn một menu có hiệu ứng 3D tượng tự như menu được dùng trong iOS7. Xem Demo | Download Đầu tiên , các bạn chèn khai báo đoạn code sau bên trong thẻ head ...

Trần Trung Dũng viết 3 tuần trước

Tạo biểu tượng (icons) theo phong cách IOS7 với CSS3

Nếu các bạn đang dùng iPhone hay iPad và đã cập nhật phiên bản IOS 7, chắc hẳn là đã quen thuộc với kiểu thiết kế đẹp và lạ mắt của các biểu tượng (icons) trên màn hình. Kiểu thiết kế này được gọi là Squircles, nó là sự kết hợp giữa hình vuông và hình tròn. Nếu các bạn cũng muốn áp dụng kiểu ...

Bùi Văn Nam viết 3 tuần trước
0