Xem Demo. Tải xuống

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

Kế tiếp là các bạn copy cấu trúc html cho form vào bên trong thẻ

    

        

            
Sign in to continue to Bootsnipp
            

                

                

                
                
                
                    Sign in
                
                    
                    Remember me
                
                Need help? 
                
            
            Create an account 
        
    

CSS

Bây giờ các bạn chỉ việc thêm một số dòng CSS bên dưới để tạo form hoàn tất

.form-signin
{
    max-width: 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
{
    width: 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 ra được những mẫu bất kỳ mà các bạn bắt gặp trên Internet hoặc các trang web mà các bạn đang thiết kế

Chuyên Mục. css

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

quản trị viên

Xin chào, diendanhocweb. com là nơi mình sẽ chia sẻ những thủ thuật, kiến ​​thức về website mà mình tìm hiểu được. Hy vọng, nó sẽ giúp ích cho mọi người

Trong bài học này, mình sẽ hướng dẫn các bạn cách ẩn hiện nội dung bằng jQuery và ứng dụng vào công việc làm form đăng nhập

Nội dung chính

• Video – Ẩn hiện nội dung bằng jQuery
• Ý tưởng chính
• Hướng dẫn chi tiết
  • Phần HTML cho 2 biểu mẫu
  • Phần CSS
  • Phần JS – jQuery

Video – Ẩn hiện nội dung bằng jQuery

Bài này tương quân đơn giản, chủ yếu giúp các bạn ôn tập cấu trúc lại câu lệnh cấu trúc của jquery bao gồm. lựa chọn phần tử – sự kiện tương tác – hiệu ứng. Phần code mẫu của bài này sẽ có 2 file nhé. Một tệp sử dụng mã tự động html và css. Một tập tin sử dụng bootstrap để căn chỉnh

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

Ý tưởng chính

+ dùng 1 class hidden để ẩn nội dung. Hiệu ứng mình sử dụng để ẩn khá đơn giản, các bạn có thể thêm css để tùy biến thêm. Các bạn có thể tham khảo bài 2 nhé

+ lớp ẩn sẽ nằm trong biểu mẫu đăng ký

+ Khi nhấn vào nút đăng ký, thêm lớp ẩn cho biểu mẫu đăng nhập và bỏ lớp ẩn cho biểu mẫu đăng ký

+ new format. Hàm addClass() và removeClass()

Bài viết cùng chủ đề

bài 22. Tạo hiệu ứng chuyển động với thư viện…

bài 21. Tạo bảng có tính năng lọc và tìm kiếm với…

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

Hướng dẫn chi tiết

Phần HTML cho 2 biểu mẫu

   

      
      
      Đăng nhậpĐăng ký
   
   

      
      
      
      Đăng Ký
   

Phần CSS

*{
   margin: 0;
   padding: 0;
}
.main{
   width: 100%;
   height: 1000px;
   background-color: #f5f5f5;
   padding-top: 50px;
}
.form{
   width: 40%;
   height: 300px;
   background-color: white;
   margin: auto;
}
div.form input {
   width: 100%;
   padding: 10px 12px;
   margin-top: 20px;
}
div.form button {
   width: 35%;
   margin-left: 10%;
   margin-top: 20px;
}
.hidden{
   margin-left: -300px;
   opacity: 0;
}

Phần JS – jQuery

$(document).ready(function() {
   $('#btn-dangky').click(function(event) {
      // $('#form-login').animate({marginLeft: -300,opacity: 0});
      // $('#form-dangky').animate({marginLeft: 0,opacity: 1});
      $('#form-login').addClass('hidden');
      $('#form-dangky').removeClass('hidden');
   });
});

mẫu mã. Tải xuống

Mẫu mã có Bootstrap. Tải xuống

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách bình luận bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web