Mẫu trang đăng nhập và đăng ký trong bootstrap

Tài nguyên thiết kế web ngày nay là một gói các biểu mẫu đăng nhập và đăng nhập Bootstrap miễn phí trong cùng một trang. Nó chứa 3 mẫu đáp ứng khác nhau để tích hợp trong các dự án của bạn và sử dụng cho trang “đăng nhập” và “đăng ký” của bạn

Ý tưởng về các mẫu này đến từ một nhận xét của độc giả của Azmind vài ngày trước, vì vậy nếu bạn có bất kỳ ý tưởng tuyệt vời nào khác, vui lòng cho tôi biết

Một số tính năng của các mẫu biểu mẫu này là. nền toàn màn hình (cũng có sẵn thanh trượt hình ảnh), biểu tượng Font Awesome, xác thực biểu mẫu jQuery đơn giản, v.v. Dưới đây, bạn sẽ tìm thấy danh sách đầy đủ các tính năng, liên kết xem trước trực tiếp và liên kết tải xuống. Vui thích

Bạn cũng có thể thích

Các biểu mẫu đăng nhập và đăng ký Bootstrap trong một trang với hiệu ứng ẩn/hiện
Các biểu mẫu đăng ký Bootstrap. 3 mẫu đáp ứng miễn phí
Biểu mẫu đăng nhập Bootstrap. 3 mẫu đáp ứng miễn phí
Biểu mẫu liên hệ Bootstrap. 2 mẫu đáp ứng miễn phí

Đặc trưng

• Bố cục đáp ứng (khung Bootstrap)
• 3 mẫu biểu mẫu khác nhau
• Nền toàn màn hình (Thanh trượt hình ảnh cũng có sẵn)
• Xác thực biểu mẫu jQuery đơn giản (để ngăn người dùng rời khỏi các trường trống)
• Phông chữ Biểu tượng tuyệt vời
• Nút “Đăng nhập bằng Facebook, Twitter, Google Plus”

3 mẫu biểu mẫu

mẫu 1

Dạng ánh sáng với nền toàn màn hình

mẫu 2

Biểu mẫu trong suốt tối với nền toàn màn hình

mẫu 3

Các dạng ánh sáng và nền sáng với hoa văn tinh tế

Cách sử dụng các mẫu

Tải xuống gói zip bên dưới và giải nén nó. Bạn sẽ thấy rằng mỗi mẫu biểu mẫu nằm trong thư mục riêng của nó (có tên là “biểu mẫu-1”, “biểu mẫu-2”, v.v.) với tất cả các tệp cần thiết

Sử dụng “chỉ số. html” để sửa đổi mã HTML. Có thể thay đổi kiểu từ các tệp CSS trong thư mục “css” (nội dung/css)

Trong các mẫu, tôi cũng đã sử dụng một số Javascript (jQuery) để xác thực biểu mẫu và nền toàn màn hình. Bạn có thể tìm thấy mã này trong “tập lệnh. js” (nội dung/js)

Các hình ảnh được đặt trong thư mục “img” (nội dung/img). Biểu tượng yêu thích và biểu tượng cảm ứng của Apple nằm trong thư mục “ico” (nội dung/ico)

Demo, Tải xuống và Giấy phép

XEM BẢN THỬ

TẢI XUỐNG. Biểu mẫu đăng nhập và đăng ký Bootstrap trong một trang (67891 lượt tải xuống)

CẦN LƯU TRỮ? . 95/tháng).
(liên kết liên kết, nghĩa là bạn không phải trả thêm phí, tôi kiếm được hoa hồng nếu bạn nhấp vào liên kết và mua dịch vụ lưu trữ. )

GIẤY PHÉP

Bạn có thể sử dụng các mẫu biểu mẫu đăng nhập và đăng nhập này trong các dự án cá nhân và thương mại, nhưng bạn không thể bán hoặc phân phối chúng trực tiếp, “nguyên trạng”. Nếu bạn dự định sử dụng chúng, một liên kết đến trang này hoặc bất kỳ hình thức truyền bá nào sẽ được đánh giá cao

Muốn thêm?

Nếu bạn thích các mẫu biểu mẫu ở trên và muốn có nhiều bố cục, phối màu và tính năng hơn, cùng với hỗ trợ miễn phí và cập nhật miễn phí, bạn nên xem qua mẫu Marco

Tiếp tục được cập nhật

Đăng ký Bản tin Azmind và tôi sẽ cập nhật cho bạn ngay khi tôi phát hành Chủ đề WordPress mới, Mẫu Bootstrap, Hướng dẫn hoặc Phần mềm miễn phí khác

Hệ thống đăng nhập Framebase là một khái niệm thiết kế giao diện người dùng, thân thiện với mặt trước, đi kèm với trải nghiệm người dùng đầy đủ. Được tạo bằng Adobe Illustrator và Photoshop (có thể sử dụng từ CS3 đến CC)

—

HÌNH THỨC ĐĂNG NHẬP VÀ ĐĂNG KÝ BAO GỒM

• Đăng nhập thường xuyên

• Đăng nhập mở rộng với nhiều tùy chọn phương tiện truyền thông xã hội

• Mẫu đăng ký

• Mẫu thư xác nhận

• Đặt lại mẫu mật khẩu và hướng dẫn

• Bạn sẽ nhận được Hệ thống đăng nhập này với hai tùy chọn. Có và không có góc bo tròn

—

body { padding-top. 90px; . đăng nhập bảng điều khiển { màu viền. #ccc; . 0px 2px 3px 0px rgba(0,0,0,0. 2); . 0px 2px 3px 0px rgba(0,0,0,0. 2); . 0px 2px 3px 0px rgba(0,0,0,0. 2); . đăng nhập bảng điều khiển>. tiêu đề bảng điều khiển { màu. #00415d; . #ffff; . #ffff; . trung tâm; . đăng nhập bảng điều khiển>. panel-heading a{ text-decoration. không ai; . #666; . in đậm; . 15px; . tất cả 0. 1s tuyến tính; . tất cả 0. 1s tuyến tính; . tất cả 0. 1s tuyến tính; . đăng nhập bảng điều khiển>. tiêu đề bảng a. hoạt động { màu. #029f5b; . 18px; . đăng nhập bảng điều khiển>. panel-heading hr{ lề-top. 10px; . 0px; . cả hai; . 0; . 1px; . -webkit-tuyến tính-gradient(trái,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0. 15),rgba(0, 0, 0, 0)); . -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0. 15),rgba(0,0,0,0)); . -ms-tuyến tính-gradient(trái,rgba(0,0,0,0),rgba(0,0,0,0. 15),rgba(0,0,0,0)); . -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0. 15),rgba(0,0,0,0)); . đầu vào đăng nhập bảng điều khiển [loại = "văn bản"],. đầu vào đăng nhập bảng điều khiển [loại = "email"],. đầu vào đăng nhập bảng điều khiển [loại = "mật khẩu"] { chiều cao. 45px; . 1px rắn #ddd; . 16px; . tất cả 0. 1s tuyến tính; . tất cả 0. 1s tuyến tính; . tất cả 0. 1s tuyến tính; . đầu vào đăng nhập bảng điều khiển. bay lượn,. đầu vào đăng nhập bảng điều khiển. tập trung { phác thảo. không ai; . không ai; . không ai; . không ai; . #ccc; . đăng nhập btn { màu nền. #59B2E0; . không ai; . #ffff; . 14px; . tự động; . thông thường; . 14px 0; . chữ hoa; . #59B2E6; . đăng nhập btn. bay lượn,. đăng nhập btn. tiêu điểm { màu. #ffff; . #53A3CD; . #53A3CD; . quên mật khẩu { trang trí văn bản. gạch dưới; . #888; . Quên mật khẩu. bay lượn,. Quên mật khẩu. tiêu điểm { trang trí văn bản. gạch dưới; . #666; . btn-đăng ký { màu nền. #1CB94E; . không ai; . #ffff; . 14px; . tự động; . thông thường; . 14px 0; . chữ hoa; . #1CB94A; . đăng ký btn. bay lượn,. đăng ký btn. tiêu điểm { màu. #ffff; . #1CA347; . #1CA347;

$(function() { $('#login-form-link'). nhấp chuột (hàm (e) { $("#login-form"). chậm trễ(100). phaiIn(100); . mờ dần (100); . removeClass('đang hoạt động'); . addClass('đang hoạt động'); . ngăn chặn Mặc định(); . nhấp chuột (hàm (e) { $("#register-form"). chậm trễ(100). phaiIn(100); . mờ dần (100); . removeClass('đang hoạt động'); . addClass('đang hoạt động'); . ngăn chặn Mặc định();

Làm cách nào để tạo trang đăng nhập trong Bootstrap?