Bootstrap 5 Biểu mẫu đăng nhập
|
Bootstrap là một trong những khung phổ biến nhất được sử dụng để xây dựng các trang web phản hồi. Đó là một khuôn khổ giao diện người dùng mã nguồn mở, miễn phí được xây dựng bởi các nhà phát triển Twitter Nó cung cấp các công cụ để xây dựng các trang web dành cho thiết bị di động đầu tiên mà không cần viết bất kỳ mã nào. Phần tốt nhất về Bootstrap là nó hoàn toàn có thể tùy chỉnh – bạn có thể chọn các thành phần bạn muốn trên trang web của mình. Nó bao gồm một hệ thống lưới đáp ứng để thiết kế bố cục trên thiết bị di động. Bootstrap cũng bao gồm các thành phần có thể tái sử dụng như thanh điều hướng, biểu mẫu và phương thức để giúp nhà phát triển xây dựng trang web nhanh hơn Màn hình đăng nhập là thứ đầu tiên người dùng nhìn thấy khi họ truy cập trang web của bạn và do đó, nó phải được thiết kế theo cách thu hút sự chú ý của người dùng và khiến họ cảm thấy thoải mái. Các mẫu biểu mẫu đăng nhập Bootstrap rất hữu ích trong việc tạo biểu mẫu cho trang web. Bootstrap có nhiều lợi thế để phát triển các hình thức đăng nhập. Chúng cung cấp nhiều phần tử giao diện người dùng có thể được sử dụng cho các phần tử biểu mẫu như nhãn, nút, vùng văn bản, thẻ đầu vào và các phần tử liên quan đến biểu mẫu khác nhau như nhóm đầu vào và bảng điều khiển. Ngôn ngữ lập trình cho Bootstrap là CSS và HTML nên có thể tùy biến dễ dàng. Hôm nay, chúng tôi giới thiệu các biểu mẫu đăng nhập bootstrap miễn phí có thể làm cho trang web của bạn hấp dẫn. Các biểu mẫu đăng nhập bootstrap miễn phí này rất dễ tùy chỉnh và triển khai trong trang web của bạn. Nếu bạn đang tìm kiếm một biểu mẫu đăng nhập hiện đại cho trang web doanh nghiệp của mình thì các biểu mẫu đăng nhập bootstrap miễn phí này là lựa chọn tốt nhất Biểu mẫu đăng nhập đáp ứng được xây dựng với Bootstrap 5. Rất nhiều mẫu biểu mẫu đăng ký và các trang biểu mẫu được xác định trước. Thiết kế, phong cách và chức năng khác nhau Xem Tài liệu biểu mẫu đăng nhập Bootstrap để biết hướng dẫn chi tiết và thậm chí nhiều ví dụ hơn Ví dụ cơ bản <section class="vh-100"> <div class="container-fluid h-custom"> <div class="row d-flex justify-content-center align-items-center h-100"> <div class="col-md-9 col-lg-6 col-xl-5"> <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.webp" class="img-fluid" alt="Sample image"> div> <div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1"> <form> <div class="d-flex flex-row align-items-center justify-content-center justify-content-lg-start"> <p class="lead fw-normal mb-0 me-3">Sign in withp> <button type="button" class="btn btn-primary btn-floating mx-1"> <i class="fab fa-facebook-f">i> button> <button type="button" class="btn btn-primary btn-floating mx-1"> <i class="fab fa-twitter">i> button> <button type="button" class="btn btn-primary btn-floating mx-1"> <i class="fab fa-linkedin-in">i> button> div> <div class="divider d-flex align-items-center my-4"> <p class="text-center fw-bold mx-3 mb-0">Orp> div> <div class="form-outline mb-4"> <input type="email" id="form3Example3" class="form-control form-control-lg" placeholder="Enter a valid email address" /> <label class="form-label" for="form3Example3">Email addresslabel> div> <div class="form-outline mb-3"> <input type="password" id="form3Example4" class="form-control form-control-lg" placeholder="Enter password" /> <label class="form-label" for="form3Example4">Passwordlabel> div> <div class="d-flex justify-content-between align-items-center"> <div class="form-check mb-0"> <input class="form-check-input me-2" type="checkbox" value="" id="form2Example3" /> <label class="form-check-label" for="form2Example3"> Remember me label> div> <a href="#!" class="text-body">Forgot password?a> div> <div class="text-center text-lg-start mt-4 pt-2"> <button type="button" class="btn btn-primary btn-lg" style="padding-left: 2.5rem; padding-right: 2.5rem;">Loginbutton> <p class="small fw-bold mt-2 pt-1 mb-0">Don't have an account? <a href="#!" class="link-danger">Registera>p> div> form> div> div> div> <div class="d-flex flex-column flex-md-row text-center text-md-start justify-content-between py-4 px-4 px-xl-5 bg-primary"> <div class="text-white mb-3 mb-md-0"> Copyright © 2020. All rights reserved. div> <div> <a href="#!" class="text-white me-4"> <i class="fab fa-facebook-f">i> a> <a href="#!" class="text-white me-4"> <i class="fab fa-twitter">i> a> <a href="#!" class="text-white me-4"> <i class="fab fa-google">i> a> <a href="#!" class="text-white"> <i class="fab fa-linkedin-in">i> a> div> div> section> CSS .divider:after, .divider:before { content: ""; flex: 1; height: 1px; background: #eee; } .h-custom { height: calc(100% - 73px); } @media (max-width: 450px) { .h-custom { height: 100%; } } Làm thế nào để sử dụng?
▶️Đăng ký kênh YouTube để nhận tài nguyên và hướng dẫn phát triển web Thêm ví dụBiểu mẫu đăng nhập Bootstrap #2. Biểu mẫu đăng nhập Bootstrap #3. Biểu mẫu đăng nhập Bootstrap #4. Biểu mẫu đăng nhập Bootstrap #5. Biểu mẫu đăng nhập Bootstrap #6. Biểu mẫu đăng nhập Bootstrap #7. Thêm tài liệu Bootstrap mở rộng
|
