ví dụ, mẫu và hướng dẫn miễn phí – biểu mẫu đăng nhập bootstrap css

Biểu mẫu đăng nhập đáp ứng được xây dựng bằng Bootstrap 5. Bộ sưu tập các ví dụ về biểu mẫu đăng ký, mẫu đăng nhập toàn trang, phương thức đăng nhập & nhiều thiết kế đăng nhập khác.

Bạn đang xem : biểu mẫu đăng nhập bootstrap css

Biểu mẫu đăng nhập

Bootstrap 5 Thành phần biểu mẫu đăng nhập

Biểu mẫu đăng nhập đáp ứng được xây dựng bằng Bootstrap 5. Bộ sưu tập các ví dụ về biểu mẫu đăng ký, mẫu đăng nhập toàn trang, phương thức đăng nhập & amp; nhiều dấu hiệu khác trong thiết kế.

Ví dụ cơ bản

Biểu mẫu đăng nhập / đăng nhập điển hình với các nút đăng ký bổ sung.

Địa chỉ email

Mật khẩu

Nhớ tôi

Quên mật khẩu?

Không phải là thành viên? Đăng ký

hoặc đăng ký với:

Hiển thị mã


Chỉnh sửa trong hộp cát

        
            
          & lt; biểu mẫu & gt;
            & lt;! - Nhập email - & gt;
            & lt; div class = "form-outline mb-4" & gt;
              & lt; input type = "email" id = "form2Example1" class = "form-control" / & gt;
              & lt; label class = "form-label" for = "form2Example1" & gt; Địa chỉ email & lt; / label & gt;
            & lt; / div & gt;

            & lt;! - Nhập mật khẩu - & gt;
            & lt; div class = "form-outline mb-4" & gt;
              & lt; input type = "password" id = "form2Example2" class = "form-control" / & gt;
              & lt; label class = "form-label" for = "form2Example2" & gt; Mật khẩu & lt; / label & gt;
            & lt; / div & gt;

            & lt;! - Bố cục lưới 2 cột để tạo kiểu nội tuyến - & gt;
            & lt; div class = "row mb-4" & gt;
              & lt; div class = "col d-flex justify-content-center" & gt;
                & lt;! - Hộp kiểm - & gt;
                & lt; div class = "form-check" & gt;
                  & lt; input class = "form-check-input" type = "checkbox" value = "" id = "form2Example31" đã kiểm tra / & gt;
                  & lt; label class = "form-check-label" for = "form2Example31" & gt; Hãy nhớ tôi & lt; / label & gt;
                & lt; / div & gt;
              & lt; / div & gt;

              & lt; div class = "col" & gt;
                & lt;! - Liên kết đơn giản - & gt;
                & lt; a href = "#!" & gt; Quên mật khẩu? & lt; / a & gt;
              & lt; / div & gt;
            & lt; / div & gt;

            & lt;! - Nút gửi - & gt;
            & lt; button type = "button" class = "btn btn-primary btn-block mb-4" & gt; Đăng nhập & lt; / button & gt;

            & lt;! - Các nút đăng ký - & gt;
            & lt; div class = "text-center" & gt;
              & lt; p & gt; Bạn không phải là thành viên? & lt; a href = "#!" & gt; Đăng ký & lt; / a & gt; & lt; / p & gt;
              & lt; p & gt; hoặc đăng ký bằng: & lt; / p & gt;
              & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                & lt; i class = "fab fa-facebook-f" & gt; & lt; / i & gt;
              & lt; / nút & gt;

              & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                & lt; i class = "fab fa-google" & gt; & lt; / i & gt;
              & lt; / nút & gt;

              & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                & lt; i class = "fab fa-twitter" & gt; & lt; / i & gt;
              & lt; / nút & gt;

              & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                & lt; i class = "fab fa-github" & gt; & lt; / i & gt;
              & lt; / nút & gt;
            & lt; / div & gt;
          & lt; / form & gt;
          
        
    

Đăng nhập – đăng ký

Bằng cách sử dụng thuốc , bạn có thể đăng nhập và
đăng ký các biểu mẫu trong một thành phần duy nhất. Kiểm tra của chúng tôi
đăng ký / biểu mẫu đăng ký tài liệu cho
hơn
các ví dụ.

Đăng nhập bằng:

hoặc:

Thư điện tử hoặc tên người dùng

Mật khẩu

Nhớ tôi

Quên mật khẩu?

Không phải là thành viên? Đăng ký

Đăng ký bằng:

hoặc:

Tên

tên tài khoản

E-mail

Mật khẩu

lặp lại mật khẩu

Tôi đã đọc và đồng ý với các điều khoản

Hiển thị mã


Chỉnh sửa trong hộp cát


            
          & lt;! - Thuốc navs - & gt;
          & lt; ul class = "nav nav-Drugs nav-justified mb-3" id = "ex1" role = "tablist" & gt;
            & lt; li class = "nav-item" role = "trình bày" & gt;
              & lt; a class = "nav-link active" id = "tab-login" data-mdb-toggle = "tablet" href = "# Drugs-login" role = "tab"
                aria-control = "capsules-login" aria-select = "true" & gt; Đăng nhập & lt; / a & gt;
            & lt; / li & gt;
            & lt; li class = "nav-item" role = "trình bày" & gt;
              & lt; a class = "nav-link" id = "tab-register" data-mdb-toggle = "thuốc" href = "# thuốc-đăng ký" role = "tab"
                aria-control = "Drugs-register" aria-select = "false" & gt; Đăng ký & lt; / a & gt;
            & lt; / li & gt;
          & lt; / ul & gt;
          & lt;! - Thuốc navs - & gt;

          & lt;! - Nội dung thuốc - & gt;
          & lt; div class = "tab-content" & gt;
            & lt; div class = "tab-panel phai hiển thị hoạt động" id = "Drugs-login" role = "tabpanel" aria-labellingby = "tab-login" & gt;
              & lt; biểu mẫu & gt;
                & lt; div class = "text-center mb-3" & gt;
                  & lt; p & gt; Đăng nhập bằng: & lt; / p & gt;
                  & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                    & lt; i class = "fab fa-facebook-f" & gt; & lt; / i & gt;
                  & lt; / nút & gt;

                  & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                    & lt; i class = "fab fa-google" & gt; & lt; / i & gt;
                  & lt; / nút & gt;

                  & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                    & lt; i class = "fab fa-twitter" & gt; & lt; / i & gt;
                  & lt; / nút & gt;

                  & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                    & lt; i class = "fab fa-github" & gt; & lt; / i & gt;
                  & lt; / nút & gt;
                & lt; / div & gt;

                & lt; p class = "text-center" & gt; hoặc: & lt; / p & gt;

                & lt;! - Nhập email - & gt;
                & lt; div class = "form-outline mb-4" & gt;
                  & lt; input type = "email" id = "loginName" class = "form-control" / & gt;
                  & lt; label class = "form-label" for = "loginName" & gt; Email hoặc tên người dùng & lt; / label & gt;
                & lt; / div & gt;

                & lt;! - Nhập mật khẩu - & gt;
                & lt; div class = "form-outline mb-4" & gt;
                  & lt; input type = "password" id = "loginPassword" class = "form-control" / & gt;
                  & lt; label class = "form-label" for = "loginPassword" & gt; Mật khẩu & lt; / label & gt;
                & lt; / div & gt;

                & lt;! - Bố cục lưới 2 cột - & gt;
                & lt; div class = "row mb-4" & gt;
                  & lt; div class = "col-md-6 d-flex justify-content-center" & gt;
                    & lt;! - Hộp kiểm - & gt;
                    & lt; div class = "form-check mb-3 mb-md-0" & gt;
                      & lt; input class = "form-check-input" type = "checkbox" value = "" id = "loginCheck" đã kiểm tra / & gt;
                      & lt; label class = "form-check-label" for = "loginCheck" & gt; Hãy nhớ tôi & lt; / label & gt;
                    & lt; / div & gt;
                  & lt; / div & gt;

                  & lt; div class = "col-md-6 d-flex justify-content-center" & gt;
                    & lt;! - Liên kết đơn giản - & gt;
                    & lt; a href = "#!" & gt; Quên mật khẩu? & lt; / a & gt;
                  & lt; / div & gt;
                & lt; / div & gt;

                & lt;! - Nút gửi - & gt;
                & lt; button type = "submit" class = "btn btn-primary btn-block mb-4" & gt; Đăng nhập & lt; / button & gt;

                & lt;! - Các nút đăng ký - & gt;
                & lt; div class = "text-center" & gt;
                  & lt; p & gt; Bạn không phải là thành viên? & lt; a href = "#!" & gt; Đăng ký & lt; / a & gt; & lt; / p & gt;
                & lt; / div & gt;
              & lt; / form & gt;
            & lt; / div & gt;
            & lt; div class = "tab-pane fade" id = "Drugs-register" role = "tabpanel" aria-labellingby = "tab-register" & gt;
              & lt; biểu mẫu & gt;
                & lt; div class = "text-center mb-3" & gt;
                  & lt; p & gt; Đăng ký bằng: & lt; / p & gt;
                  & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                    & lt; i class = "fab fa-facebook-f" & gt; & lt; / i & gt;
                  & lt; / nút & gt;

                  & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                    & lt; i class = "fab fa-google" & gt; & lt; / i & gt;
                  & lt; / nút & gt;

                  & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                    & lt; i class = "fab fa-twitter" & gt; & lt; / i & gt;
                  & lt; / nút & gt;

                  & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                    & lt; i class = "fab fa-github" & gt; & lt; / i & gt;
                  & lt; / nút & gt;
                & lt; / div & gt;

                & lt; p class = "text-center" & gt; hoặc: & lt; / p & gt;

                & lt;! - Nhập tên - & gt;
                & lt; div class = "form-outline mb-4" & gt;
                  Đăng ký & lt; input type = "text" id = "Đặt tên "class =" form-control "/ & gt;
                  & lt; label class = "form-label" for = "registerName" & gt; Tên & lt; / label & gt;
                & lt; / div & gt;

                & lt;! - Nhập tên người dùng - & gt;
                & lt; div class = "form-outline mb-4" & gt;
                  & lt; input type = "text" id = "registerUsername" class = "form-control" / & gt;
                  & lt; label class = "form-label" for = "registerUsername" & gt; Tên người dùng & lt; / label & gt;
                & lt; / div & gt;

                & lt;! - Nhập email - & gt;
                & lt; div class = "form-outline mb-4" & gt;
                  & lt; input type = "email" id = "registerEmail" class = "form-control" / & gt;
                  & lt; label class = "form-label" for = "registerEmail" & gt; Email & lt; / label & gt;
                & lt; / div & gt;

                & lt;! - Nhập mật khẩu - & gt;
                & lt; div class = "form-outline mb-4" & gt;
                  & lt; input type = "password" id = "registerPassword" class = "form-control" / & gt;
                  & lt; label class = "form-label" for = "registerPassword" & gt; Mật khẩu & lt; / label & gt;
                & lt; / div & gt;

                & lt;! - Lặp lại Nhập mật khẩu - & gt;
                & lt; div class = "form-outline mb-4" & gt;
                  & lt; input type = "password" id = "registerRepeatPassword" class = "form-control" / & gt;
                  & lt; label class = "form-label" for = "registerRepeatPassword" & gt; Mật khẩu lặp lại & lt; / label & gt;
                & lt; / div & gt;

                & lt;! - Hộp kiểm - & gt;
                & lt; div class = "form-check d-flex justify-content-center mb-4" & gt;
                  & lt; input class = "form-check-input me-2" type = "checkbox" value = "" id = "registerCheck" đã được kiểm tra
                    aria-descriptionby = "registerCheckHelpText" / & gt;
                  & lt; label class = "form-check-label" for = "registerCheck" & gt;
                    Tôi đã đọc và đồng ý với các điều khoản
                  & lt; / label & gt;
                & lt; / div & gt;

                & lt;! - Nút gửi - & gt;
                & lt; button type = "submit" class = "btn btn-primary btn-block mb-3" & gt; Đăng nhập & lt; / button & gt;
              & lt; / form & gt;
            & lt; / div & gt;
          & lt; / div & gt;
          & lt;! - Nội dung thuốc - & gt;
          
        
    

Trang đăng nhập

Thông lệ phổ biến là tạo một trang đăng nhập riêng biệt có toàn bộ chế độ xem.
Bạn có thể sử dụng một nửa của trang bằng cách đặt một hình ảnh liên quan đến thương hiệu vào đó và đặt thông tin đăng nhập của bạn
đầu vào
trong cột thứ hai bằng cách sử dụng
Lưới Bootstrap .

Đăng nhập bằng

Hoặc

Địa chỉ email

Mật khẩu

Nhớ tôi

Quên mật khẩu?

Bạn chưa có tài khoản? Đăng ký

Bản quyền © 2020. Tất cả các quyền.





Hiển thị mã


Chỉnh sửa trong hộp cát


            
          & lt; section class = "vh-100" & gt;
            & lt; div class = "container-liquid h-custom" & gt;
              & lt; div class = "row d-flex justify-content-center align-items-center h-100" & gt;
                & lt; div class = "col-md-9 col-lg-6 col-xl-5" & gt;
                  & lt; img src = "https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.webp"
                    class = "img-liquid" alt = "Hình ảnh mẫu" & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-8 col-lg-6 col-xl-4 offset-xl-1" & gt;
                  & lt; biểu mẫu & gt;
                    & lt; div class = "d-flex flex-row align-items-center justify-content-center justify-content-lg-start" & gt;
                      & lt; p class = "lead fw-normal mb-0 me-3" & gt; Đăng nhập bằng & lt; / p & gt;
                      & lt; button type = "button" class = "btn btn-primary btn-float mx-1" & gt;
                        & lt; i class = "fab fa-facebook-f" & gt; & lt; / i & gt;
                      & lt; / nút & gt;

                      & lt; button type = "button" class = "btn btn-primary btn-float mx-1" & gt;
                        & lt; i class = "fab fa-twitter" & gt; & lt; / i & gt;
                      & lt; / nút & gt;

                      & lt; button type = "button" class = "btn btn-primary btn-float mx-1" & gt;
                        & lt; i class = "fab fa-linkedin-in" & gt; & lt; / i & gt;
                      & lt; / nút & gt;
                    & lt; / div & gt;

                    & lt; div class = "divider d-flex align-items-center my-4" & gt;
                      & lt; p class = "text-center fw-bold mx-3 mb-0" & gt; Hoặc & lt; / p & gt;
                    & lt; / div & gt;

                    & lt;! - Nhập email - & gt;
                    & lt; div class = "form-outline mb-4" & gt;
                      & lt; input type = "email" id = "form3Example3" class = "form-control form-control-lg"
                        placeholder = "Nhập địa chỉ email hợp lệ" / & gt;
                      & lt; label class = "form-label" for = "form3Example3" & gt; Địa chỉ email & lt; / label & gt;
                    & lt; / div & gt;

                    & lt;! - Nhập mật khẩu - & gt;
                    & lt; div class = "form-outline mb-3" & gt;
                      & lt; input type = "password" id = "form3Example4" class = "form-control form-control-lg"
                        placeholder = "Nhập mật khẩu" / & gt;
                      & lt; label class = "form-label" for = "form3Example4" & gt; Mật khẩu & lt; / label & gt;
                    & lt; / div & gt;

                    & lt; div class = "d-flex justify-content-between align-items-center" & gt;
                      & lt;! - Hộp kiểm - & gt;
                      & lt; div class = "form-check mb-0" & gt;
                        & lt; input class = "form-check-input me-2" type = "checkbox" value = "" id = "form2Example3" / & gt;
                        & lt; label class = "form-check-label" for = "form2Example3" & gt;
                          Nhớ tôi
                        & lt; / label & gt;
                      & lt; / div & gt;
                      & lt; a href = "#!" class = "text-body" & gt; Quên mật khẩu? & lt; / a & gt;
                    & lt; / div & gt;

                    & lt; div class = "text-center text-lg-start mt-4 pt-2" & gt;
                      & lt; button type = "button" class = "btn btn-primary btn-lg"
                        style = "padding-left: 2.5rem; padding-right: 2.5rem;" & gt; Đăng nhập & lt; / button & gt;
                      & lt; p class = "small fw-bold mt-2 pt-1 mb-0" & gt; Bạn chưa có tài khoản? & lt; a href = "#!"
                          class = "link-risk" & gt; Đăng ký & lt; / a & gt; & lt; / p & gt;
                    & lt; / div & gt;

                  & lt; / form & gt;
                & lt; / div & gt;
              & lt; / div & gt;
            & lt; / div & gt;
            & lt; 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" & gt;
              & lt;! - Bản quyền - & gt;
              & lt; div class = "text-white mb-3 mb-md-0" & gt;
                Bản quyền © 2020. Tất cả các quyền.
              & lt; / div & gt;
              & lt;! - Bản quyền - & gt;

              & lt;! - Đúng - & gt;
              & lt; div & gt;
                & lt; a href = "#!" class = "text-white me-4" & gt;
                  & lt; i class = "fab fa-facebook-f" & gt; & lt; / i & gt;
                & lt; / a & gt;
                & lt; a href = "#!" class = "text-white me-4" & gt;
                  & lt; i class = "fab fa-twitter" & gt; & lt; / i & gt;
                & lt; / a & gt;
                & lt; a href = "#!" class = "text-white me-4" & gt;
                  & lt; i class = "fab fa-google" & gt; & lt; / i & gt;
                & lt; / a & gt;
                & lt; a href = "#!" class = "text-white" & gt;
                  & lt; i class = "fab fa-linkedin-in" & gt; & lt; / i & gt;
                & lt; / a & gt;
              & lt; / div & gt;
              & lt;! - Đúng - & gt;
            & lt; / div & gt;
          & lt; / phần & gt;
          
        
    

            
          .divider: sau khi,
          .divider: trước {
          Nội dung: "";
          linh hoạt: 1;
          chiều cao: 1px;
          nền: #eee;
          }
          .h-custom {
          chiều cao: calc (100% - 73px);
          }
          @media (max-width: 450px) {
          .h-custom {
          chiều cao: 100%;
          }
          }
          
        
    

Mẫu Đăng nhập

Đặt biểu trưng thương hiệu của bạn trên trang đăng nhập là một phương pháp hay, ngoài biểu trưng, ​​bạn cũng có thể thêm một sứ mệnh
câu lệnh hoặc văn bản khác như trong ví dụ bên dưới.
Nếu bạn muốn tạo một nền đẹp cho văn bản của mình phù hợp với màu sắc thương hiệu của bạn, hãy sử dụng
máy tạo độ dốc .

Chúng tôi là Nhóm Hoa sen

Vui lòng đăng nhập vào tài khoản của bạn

tên tài khoản

Mật khẩu

Quên mật khẩu?

Bạn chưa có tài khoản?

Chúng tôi không chỉ là một công ty

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud tập thể dục
ullamco laboris nisi ut aliquip ex ea Goodsoequat.

Hiển thị mã


Chỉnh sửa trong hộp cát


            
          & lt; section class = "h-100 gradient-form" style = "background-color: #eee;" & gt;
            & lt; div class = "container py-5 h-100" & gt;
              & lt; div class = "row d-flex justify-content-center align-items-center h-100" & gt;
                & lt; div class = "col-xl-10" & gt;
                  & lt; div class = "card round-3 text-black" & gt;
                    & lt; div class = "row g-0" & gt;
                      & lt; div class = "col-lg-6" & gt;
                        & lt; div class = "card-body p-md-5 mx-md-4" & gt;

                          & lt; div class = "text-center" & gt;
                            & lt; img src = "https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/lotus.webp"
                              style = "width: 185px;" alt = "biểu trưng" & gt;
                            & lt; h4 class = "mt-1 mb-5 pb-1" & gt; Chúng tôi là Nhóm Hoa Sen & lt; / h4 & gt;
                          & lt; / div & gt;

                          & lt; biểu mẫu & gt;
                            & lt; p & gt; Vui lòng đăng nhập vào tài khoản của bạn & lt; / p & gt;

                            & lt; div class = "form-outline mb-4" & gt;
                              & lt; input type = "email" id = "form2Example11" class = "form-control"
                                placeholder = "Số điện thoại hoặc địa chỉ email" / & gt;
                              & lt; label class = "form-label" for = "form2Example11" & gt; Tên người dùng & lt; / label & gt;
                            & lt; / div & gt;

                            & lt; div class = "form-outline mb-4" & gt;
                              & lt; input type = "password" id = "form2Example22" class = "form-control" / & gt;
                              & lt; label class = "form-label" for = "form2Example22" & gt; Mật khẩu & lt; / label & gt;
                            & lt; / div & gt;

                            & lt; div class = "text-center pt-1 mb-5 pb-1" & gt;
                              & lt; button class = "btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" type = "button" & gt; Nhật ký
                                trong & lt; / nút & gt;
                              & lt; a class = "text-muted" href = "#!" & gt; Quên mật khẩu? & lt; / a & gt;
                            & lt; / div & gt;

                            & lt; div class = "d-flex align-items-center justify-content-center pb-4" & gt;
                              & lt; p class = "mb-0 me-2" & gt; Bạn chưa có tài khoản? & lt; / p & gt;
                              & lt; button type = "button" class = "btn btn-outline-risk" & gt; Tạo mới & lt; / button & gt;
                            & lt; / div & gt;

                          & lt; / form & gt;

                        & lt; / div & gt;
                      & lt; / div & gt;
                      & lt; div class = "col-lg-6 d-flex align-items-center gradient-custom-2" & gt;
                        & lt; div class = "text-white px-3 py-4 p-md-5 mx-md-4" & gt;
                          & lt; h4 class = "mb-4" & gt; Chúng tôi không chỉ là một công ty & lt; / h4 & gt;
                          & lt; p class = "small mb-0" & gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                            tập thể dục ullamco laboris nisi ut aliquip ex ea Goodsoequat. & lt; / p & gt;
                        & lt; / div & gt;
                      & lt; / div & gt;
                    & lt; / div & gt;
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
            & lt; / div & gt;
          & lt; / phần & gt;
          
        
    
        
            
          .gradient-custom-2 {
          / * dự phòng cho các trình duyệt cũ * /
          nền: # fccb90;

          / * Chrome 10-25, Safari 5.1-6 * /
          background: -webkit-linear-gradient (sang phải, # ee7724, # d8363a, # dd3675, # b44593);

          / * W3C, IE 10 + / Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ * /
          background: linear-gradient (sang phải, # ee7724, # d8363a, # dd3675, # b44593);
          }

          @media (chiều rộng tối thiểu: 768px) {
          .gradient-form {
          chiều cao: 100vh! important;
          }
          }
          @media (chiều rộng tối thiểu: 769px) {
          .gradient-custom-2 {
          border-top-right-radius: .3rem;
          border-bottom-right-radius: .3rem;
          }
          }
          
        
    

Đăng nhập vào biểu mẫu

Đây là một biến thể khác của biểu mẫu đăng nhập, biểu mẫu này nhấn mạnh vào các tùy chọn đăng nhập tài khoản xã hội bằng cách thực hiện
các nút tài khoản xã hội rộng như nút đăng nhập chính.

Địa chỉ email

Mật khẩu

Nhớ tôi

Quên mật khẩu?

HOẶC


Tiếp tục với Facebook


Tiếp tục với Twitter

Hiển thị mã


Chỉnh sửa trong hộp cát

        
            
          & lt; section class = "vh-100" & gt;
            & lt; div class = "container py-5 h-100" & gt;
              & lt; div class = "row d-flex align-items-center justify-content-center h-100" & gt;
                & lt; div class = "col-md-8 col-lg-7 col-xl-6" & gt;
                  & lt; img src = "https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.svg"
                    class = "img-liquid" alt = "Hình ảnh điện thoại" & gt;
                & lt; / div & gt;
                & lt; div class = "col-md-7 col-lg-5 col-xl-5 offset-xl-1" & gt;
                  & lt; biểu mẫu & gt;
                    & lt;! - Nhập email - & gt;
                    & lt; div class = "form-outline mb-4" & gt;
                      & lt; input type = "email" id = "form1Example13" class = "form-control form-control-lg" / & gt;
                      & lt; label class = "form-label" for = "form1Example13" & gt; Địa chỉ email & lt; / label & gt;
                    & lt; / div & gt;

                    & lt;! - Nhập mật khẩu - & gt;
                    & lt; div class = "form-outline mb-4" & gt;
                      & lt; input type = "password" id = "form1Example23" class = "form-control form-control-lg" / & gt;
                      & lt; label class = "form-label" for = "form1Example23" & gt; Mật khẩu & lt; / label & gt;
                    & lt; / div & gt;

                    & lt; div class = "d-flex justify-content-around align-items-center mb-4" & gt;
                      & lt;! - Hộp kiểm - & gt;
                      & lt; div class = "form-check" & gt;
                        & lt; input class = "form-check-input" type = "checkbox" value = "" id = "form1Example3" đã kiểm tra / & gt;
                        & lt; label class = "form-check-label" for = "form1Example3" & gt; Hãy nhớ tôi & lt; / label & gt;
                      & lt; / div & gt;
                      & lt; a href = "#!" & gt; Quên mật khẩu? & lt; / a & gt;
                    & lt; / div & gt;

                    & lt;! - Nút gửi - & gt;
                    & lt; button type = "submit" class = "btn btn-primary btn-lg btn-block" & gt; Đăng nhập & lt; / button & gt;

                    & lt; div class = "divider d-flex align-items-center my-4" & gt;
                      & lt; p class = "text-center fw-bold mx-3 mb-0 text-mute" & gt; HOẶC & lt; / p & gt;
                    & lt; / div & gt;

                    & lt; a class = "btn btn-primary btn-lg btn-block" style = "background-color: # 3b5998" href = "#!"
                      role = "nút" & gt;
                      & lt; i class = "fab fa-facebook-f me-2" & gt; & lt; / i & gt; Tiếp tục với Facebook
                    & lt; / a & gt;
                    & lt; a class = "btn btn-primary btn-lg btn-block" style = "background-color: # 55acee" href = "#!"
                      role = "nút" & gt;
                      & lt; i class = "fab fa-twitter me-2" & gt; & lt; / i & gt; Tiếp tục với Twitter & lt; / a & gt;

                  & lt; / form & gt;
                & lt; / div & gt;
              & lt; / div & gt;
            & lt; / div & gt;
          & lt; / phần & gt;
          
        
    
        
            
          .divider: sau khi,
          .divider: trước {
          Nội dung: "";
          linh hoạt: 1;
          chiều cao: 1px;
          nền: #eee;
          }
          
        
    

Cửa sổ bật lên đăng nhập

Ví dụ về thẻ đăng nhập này sẽ hoạt động tuyệt vời như một
cửa sổ bật lên trên nền tối hơn. Kiểm tra của chúng tôi
trình tạo phương thức để tùy chỉnh cửa sổ bật lên của bạn
phong cách và hành vi.

Đăng nhập

E-mail

Mật khẩu

Nhớ mật khẩu

Hiển thị mã


Chỉnh sửa trong hộp cát


            
          & lt; section class = "vh-100" style = "background-color: # 508bfc;" & gt;
            & lt; div class = "container py-5 h-100" & gt;
              & lt; div class = "row d-flex justify-content-center align-items-center h-100" & gt;
                & lt; div class = "col-12 col-md-8 col-lg-6 col-xl-5" & gt;
                  & lt; div class = "card shadow-2-strong" style = "border-radius: 1rem;" & gt;
                    & lt; div class = "card-body p-5 text-center" & gt;

                      & lt; h3 class = "mb-5" & gt; Đăng nhập & lt; / h3 & gt;

                      & lt; div class = "form-outline mb-4" & gt;
                        & lt; input type = "email" id = "typeEmailX-2" class = "form-control form-control-lg" / & gt;
                        & lt; label class = "form-label" for = "typeEmailX-2" & gt; Email & lt; / label & gt;
                      & lt; / div & gt;

                      & lt; div class = "form-outline mb-4" & gt;
                        & lt; input type = "password" id = "typePasswordX-2" class = "form-control form-control-lg" / & gt;
                        & lt; label class = "form-label" for = "typePasswordX-2" & gt; Mật khẩu & lt; / label & gt;
                      & lt; / div & gt;

                      & lt;! - Hộp kiểm - & gt;
                      & lt; div class = "form-check d-flex justify-content-start mb-4" & gt;
                        & lt; input class = "form-check-input" type = "checkbox" value = "" id = "form1Example3" / & gt;
                        & lt; label class = "form-check-label" for = "form1Example3" & gt; Nhớ mật khẩu & lt; / label & gt;
                      & lt; / div & gt;

                      & lt; button class = "btn btn-primary btn-lg btn-block" type = "submit" & gt; Đăng nhập & lt; / button & gt;

                      & lt; hr class = "my-4" & gt;

                      & lt; button class = "btn btn-lg btn-block btn-primary" style = "background-color: # dd4b39;"
                        type = "submit" & gt; & lt; i class = "fab fa-google me-2" & gt; & lt; / i & gt; Đăng nhập bằng google & lt; / button & gt;
                      & lt; button class = "btn btn-lg btn-block btn-primary mb-2" style = "background-color: # 3b5998;"
                        type = "submit" & gt; & lt; i class = "fab fa-facebook-f me-2" & gt; & lt; / i & gt; Đăng nhập bằng facebook & lt; / button & gt;

                    & lt; / div & gt;
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
            & lt; / div & gt;
          & lt; / phần & gt;
          
        
    

Trang đăng ký

Trang đăng ký khác với trang đăng nhập vì nó được sử dụng để tạo tài khoản mới, không phải để
đăng nhập người dùng vào một tài khoản hiện có.

Bạn nên xem xét thêm nhiều trường nhập vào các trang đăng ký của mình. Ví dụ bên dưới sử dụng các đầu vào bổ sung
cho họ và tên. Các đầu vào thường được sử dụng khác là
biểu mẫu địa chỉ ,
thẻ tín dụng
liên quan đến thanh toán đầu vào hoặc thậm chí
các loại khác nhau của
biểu mẫu khảo sát trong trường hợp bạn cần
để thu thập thêm dữ liệu trong quá trình đăng ký.

Đề nghị tốt nhất

cho doanh nghiệp của bạn

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Eveniet, itaque accantium odio, soluta, rabpti aliquam
quibusdam tạm thời ở cupiditate quis eum maiores libero
veritatis? Dictaosystemis sint aliquid ipsum atque?

Họ

Họ

Địa chỉ email

Mật khẩu

Theo dõi bản tin của chúng tôi

hoặc đăng ký với:

Hiển thị mã


Chỉnh sửa trong hộp cát


            
          & lt;! - Phần: Khối Thiết kế - & gt;
          & lt; section class = "" & gt;
            & lt;! - Jumbotron - & gt;
            & lt; div class = "px-4 py-5 px-md-5 text-center text-lg-start" style = "background-color: hsl (0, 0%, 96%)" & gt;
              & lt; div class = "container" & gt;
                & lt; div class = "row gx-lg-5 align-items-center" & gt;
                  & lt; div class = "col-lg-6 mb-5 mb-lg-0" & gt;
                    & lt; h1 class = "my-5 display-3 fw-bold ls-chật" & gt;
                      Ưu đãi tốt nhất & lt; br / & gt;
                      & lt; span class = "text-primary" & gt; dành cho doanh nghiệp của bạn & lt; / span & gt;
                    & lt; / h1 & gt;
                    & lt; p style = "color: hsl (217, 10%, 50,8%)" & gt;
                      Bản thân nỗi đau là quan trọng đối với tầng lớp ưa thích chính.
                      Do đó, sự căm ghét của những kẻ tố cáo, những kẻ không được kiềm chế, đã bị tha hóa bằng cách nào đó sẽ qua đi.
                      một số lần, nhưng từ mong muốn của một người đàn ông được tự do hơn tổ tiên của mình
                      sự thật? Họ rất dễ nói và làm điều gì đó cho chính bạn!
                    & lt; / p & gt;
                  & lt; / div & gt;

                  & lt; div class = "col-lg-6 mb-5 mb-lg-0" & gt;
                    & lt; div class = "thẻ" & gt;
                      & lt; div class = "card-body py-5 px-md-5" & gt;
                        & lt; biểu mẫu & gt;
                          & lt;! - Bố cục lưới 2 cột với đầu vào văn bản cho họ và tên - & gt;
                          & lt; div class = "row" & gt;
                            & lt; div class = "col-md-6 mb-4" & gt;
                              & lt; div class = "form-outline" & gt;
                                & lt; input type = "text" id = "form3Example1" class = "form-control" / & gt;
                                & lt; label class = "form-label" for = "form3Example1" & gt; Tên & lt; / label & gt;
                              & lt; / div & gt;
                            & lt; / div & gt;
                            & lt; div class = "col-md-6 mb-4" & gt;
                              & lt; div class = "form-outline" & gt;
                                & lt; input type = "text" id = "form3Example2" class = "form-control" / & gt;
                                & lt; label class = "form-label" for = "form3Example2" & gt; Họ & lt; / label & gt;
                              & lt; / div & gt;
                            & lt; / div & gt;
                          & lt; / div & gt;

                          & lt;! - Nhập email - & gt;
                          & lt; div class = "form-outline mb-4" & gt;
                            & lt; input type = "email" id = "form3Example3" class = "form-control" / & gt;
                            & lt; label class = "form-label" for = "form3Example3" & gt; Địa chỉ email & lt; / label & gt;
                          & lt; / div & gt;

                          & lt;! - Chuyển đầu vào - & gt;
                          & lt; div class = "form-outline mb-4" & gt;
                            & lt; input type = "password" id = "form3Example4" class = "form-control" / & gt;
                            & lt; label class = "form-label" for = "form3Example4" & gt; Mật khẩu & lt; / label & gt;
                          & lt; / div & gt;

                          & lt;! - Hộp kiểm - & gt;
                          & lt; div class = "form-check d-flex justify-content-center mb-4" & gt;
                            & lt; input class = "form-check-input me-2" type = "checkbox" value = "" id = "form2Example33" đã kiểm tra / & gt;
                            & lt; label class = "form-check-label" for = "form2Example33" & gt;
                              Theo dõi bản tin của chúng tôi
                            & lt; / label & gt;
                          & lt; / div & gt;

                          & lt;! - Nút gửi - & gt;
                          & lt; button type = "submit" class = "btn btn-primary btn-block mb-4" & gt;
                            Đăng ký
                          & lt; / nút & gt;

                          & lt;! - Các nút đăng ký - & gt;
                          & lt; div class = "text-center" & gt;
                            & lt; p & gt; hoặc đăng ký bằng: & lt; / p & gt;
                            & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                              & lt; i class = "fab fa-facebook-f" & gt; & lt; / i & gt;
                            & lt; / nút & gt;

                            & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                              & lt; i class = "fab fa-google" & gt; & lt; / i & gt;
                            & lt; / nút & gt;

                            & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                              & lt; i class = "fab fa-twitter" & gt; & lt; / i & gt;
                            & lt; / nút & gt;

                            & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                              & lt; i class = "fab fa-github" & gt; & lt; / i & gt;
                            & lt; / nút & gt;
                          & lt; / div & gt;
                        & lt; / form & gt;
                      & lt; / div & gt;
                    & lt; / div & gt;
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
            & lt; / div & gt;
            & lt;! - Jumbotron - & gt;
          & lt; / phần & gt;
          & lt;! - Phần: Khối Thiết kế - & gt;
          
        
    

Biểu mẫu đăng nhập đơn giản

Mặt khác, biểu mẫu đăng nhập / đăng nhập chỉ nên bao gồm số lượng đầu vào tối thiểu cần thiết để đăng nhập vào
tài khoản hiện có.

Quần và giày hợp thời trang

Địa chỉ email

Mật khẩu

Nhớ tôi

Quên mật khẩu?

Hiển thị mã


Chỉnh sửa trong hộp cát

        
            

          & lt;! - Phần: Khối Thiết kế - & gt;
          & lt; section class = "text-center text-lg-start" & gt;
            & lt; phong cách & gt;
              .rounded-t-5 {
                border-top-left-radius: 0,5rem;
                border-top-right-radius: 0,5rem;
              }

              @media (chiều rộng tối thiểu: 992px) {
                .rounded-tr-lg-0 {
                  border-top-right-radius: 0;
                }

                .rounded-bl-lg-5 {
                  viền-dưới-trái-bán kính: 0,5rem;
                }
              }
            & lt; / style & gt;
            & lt; div class = "thẻ mb-3" & gt;
              & lt; div class = "row g-0 d-flex align-items-center" & gt;
                & lt; div class = "col-lg-4 d-none d-lg-flex" & gt;
                  & lt; img src = "https://mdbootstrap.com/img/new/ecommerce/vertical/004.jpg" alt = "Quần và giày hợp thời trang"
                    class = "w-100 tròn-t-5 làm tròn-tr-lg-0 làm tròn-bl-lg-5" / & gt;
                & lt; / div & gt;
                & lt; div class = "col-lg-8" & gt;
                  & lt; div class = "card-body py-5 px-md-5" & gt;

                    & lt; biểu mẫu & gt;
                      & lt;! - Nhập email - & gt;
                      & lt; div class = "form-outline mb-4" & gt;
                        & lt; input type = "email" id = "form2Example1" class = "form-control" / & gt;
                        & lt; label class = "form-label" for = "form2Example1" & gt; Địa chỉ email & lt; / label & gt;
                      & lt; / div & gt;

                      & lt;! - Nhập mật khẩu - & gt;
                      & lt; div class = "form-outline mb-4" & gt;
                        & lt; input type = "password" id = "form2Example2" class = "form-control" / & gt;
                        & lt; label class = "form-label" for = "form2Example2" & gt; Mật khẩu & lt; / label & gt;
                      & lt; / div & gt;

                      & lt;! - Bố cục lưới 2 cột để tạo kiểu nội tuyến - & gt;
                      & lt; div class = "row mb-4" & gt;
                        & lt; div class = "col d-flex justify-content-center" & gt;
                          & lt;! - Hộp kiểm - & gt;
                          & lt; div class = "form-check" & gt;
                            & lt; input class = "form-check-input" type = "checkbox" value = "" id = "form2Example31" đã kiểm tra / & gt;
                            & lt; label class = "form-check-label" for = "form2Example31" & gt; Hãy nhớ tôi & lt; / label & gt;
                          & lt; / div & gt;
                        & lt; / div & gt;

                        & lt; div class = "col" & gt;
                          & lt;! - Liên kết đơn giản - & gt;
                          & lt; a href = "#!" & gt; Quên mật khẩu? & lt; / a & gt;
                        & lt; / div & gt;
                      & lt; / div & gt;

                      & lt;! - Nút gửi - & gt;
                      & lt; button type = "button" class = "btn btn-primary btn-block mb-4" & gt; Đăng nhập & lt; / button & gt;

                    & lt; / form & gt;

                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
            & lt; / div & gt;
          & lt; / phần & gt;
          & lt;! - Phần: Khối Thiết kế - & gt;

          
        
    

Trang đăng ký

Một lần nữa, ví dụ dưới đây là một đăng ký không phải là một hình thức đăng nhập. Cái này sử dụng
hiệu ứng thủy tinh
cùng với tối giản
biểu tượng truyền thông xã hội .

Đề nghị tốt nhất

cho doanh nghiệp của bạn

Bản thân cơn đau, điều quan trọng là phải được tăng cường bởi quá trình tạo mỡ.
Trong thời gian của sự tha thứ không bị cản trở và công bình, thời gian của sự kiên cường tuyệt vời
không phải chịu hậu quả, cũng không lên án chúng như thể do
nhưng nỗi đau tự nó là từ cùng một chế độ. Cái mà?

Họ

Họ

Địa chỉ email

Mật khẩu

Theo dõi bản tin của chúng tôi

hoặc đăng ký với:

Hiển thị mã


Chỉnh sửa trong hộp cát


            

          & lt;! - Phần: Khối Thiết kế - & gt;
          & lt; section class = "background-radial-gradient over-hidden" & gt;
            & lt; phong cách & gt;
              .background-radial-gradient {
                màu nền: hsl (218, 41%, 15%);
                background-image: radial-gradient (hình tròn 650px ở 0% 0%,
                    hsl (218, 41%, 35%) 15%,
                    hsl (218, 41%, 30%) 35%,
                    hsl (218, 41%, 20%) 75%,
                    hsl (218, 41%, 19%) 80%,
                    trong suốt 100%),
                  radial-gradient (hình tròn 1250px ở 100% 100%,
                    hsl (218, 41%, 45%) 15%,
                    hsl (218, 41%, 30%) 35%,
                    hsl (218, 41%, 20%) 75%,
                    hsl (218, 41%, 19%) 80%,
                    trong suốt 100%);
              }

              # radius-shape-1 {
                chiều cao: 220px;
                chiều rộng: 220px;
                đầu trang: -60px;
                trái: -130px;
                background: radial-gradient (# 44006b, # ad1fff);
                tràn: ẩn;
              }

              # radius-shape-2 {
                bán kính biên giới: 38% 62% 63% 37% / 70% 33% 67% 30%;
                dưới cùng: -60px;
                phải: -110px;
                chiều rộng: 300px;
                chiều cao: 300px;
                background: radial-gradient (# 44006b, # ad1fff);
                tràn: ẩn;
              }

              .bg-glass {
                background-color: hsla (0, 0%, 100%, 0.9)! important;
                phông nền-bộ lọc: bão hòa (200%) mờ (25px);
              }
            & lt; / style & gt;

            & lt; div class = "container px-4 py-5 px-md-5 text-center text-lg-start my-5" & gt;
              & lt; div class = "row gx-lg-5 align-items-center mb-5" & gt;
                & lt; div class = "col-lg-6 mb-5 mb-lg-0" style = "z-index: 10" & gt;
                  & lt; h1 class = "my-5 display-5 fw-bold ls-tight" style = "color: hsl (218, 81%, 95%)" & gt;
                    Ưu đãi tốt nhất & lt; br / & gt;
                    & lt; span style = "color: hsl (218, 81%, 75%)" & gt; dành cho doanh nghiệp của bạn & lt; / span & gt;
                  & lt; / h1 & gt;
                  & lt; p class = "mb-4 opacity-70" style = "color: hsl (218, 81%, 85%)" & gt;
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                    Temporibus, expedita iusto veniam atque, mollitia tạm thời phóng đại
                    dolorumequatur nulla, neque debitis eos reploynderit quasi
                    ab ipsum nisi dolorem modi. Quos?
                  & lt; / p & gt;
                & lt; / div & gt;

                & lt; div class = "col-lg-6 mb-5 mb-lg-0 position-relative" & gt;
                  & lt; div id = "radius-shape-1" class = "position-Absolute Round-circle shadow-5-strong" & gt; & lt; / div & gt;
                  & lt; div id = "radius-shape-2" class = "position-Absolute shadow-5-strong" & gt; & lt; / div & gt;

                  & lt; div class = "card bg-glass" & gt;
                    & lt; div class = "card-body px-4 py-5 px-md-5" & gt;
                      & lt; biểu mẫu & gt;
                        & lt;! - Bố cục lưới 2 cột với đầu vào văn bản cho họ và tên - & gt;
                        & lt; div class = "row" & gt;
                          & lt; div class = "col-md-6 mb-4" & gt;
                            & lt; div class = "form-outline" & gt;
                              & lt; input type = "text" id = "form3Example1" class = "form-control" / & gt;
                              & lt; label class = "form-label" for = "form3Example1" & gt; Tên & lt; / label & gt;
                            & lt; / div & gt;
                          & lt; / div & gt;
                          & lt; div class = "col-md-6 mb-4" & gt;
                            & lt; div class = "form-outline" & gt;
                              & lt; input type = "text" id = "form3Example2" class = "form-control" / & gt;
                              & lt; label class = "form-label" for = "form3Example2" & gt; Họ & lt; / label & gt;
                            & lt; / div & gt;
                          & lt; / div & gt;
                        & lt; / div & gt;

                        & lt;! - Nhập email - & gt;
                        & lt; div class = "form-outline mb-4" & gt;
                          & lt; input type = "email" id = "form3Example3" class = "form-control" / & gt;
                          & lt; label class = "form-label" for = "form3Example3" & gt; Địa chỉ email & lt; / label & gt;
                        & lt; / div & gt;

                        & lt;! - Nhập mật khẩu - & gt;
                        & lt; div class = "form-outline mb-4" & gt;
                          & lt; input type = "password" id = "form3Example4" class = "form-control" / & gt;
                          & lt; label class = "form-label" for = "form3Example4" & gt; Mật khẩu & lt; / label & gt;
                        & lt; / div & gt;

                        & lt;! - Hộp kiểm - & gt;
                        & lt; div class = "form-check d-flex justify-content-center mb-4" & gt;
                          & lt; input class = "form-check-input me-2" type = "checkbox" value = "" id = "form2Example33" đã kiểm tra / & gt;
                          & lt; label class = "form-check-label" for = "form2Example33" & gt;
                            Theo dõi bản tin của chúng tôi
                          & lt; / label & gt;
                        & lt; / div & gt;

                        & lt;! - Nút gửi - & gt;
                        & lt; button type = "submit" class = "btn btn-primary btn-block mb-4" & gt;
                          Đăng ký
                        & lt; / nút & gt;

                        & lt;! - Các nút đăng ký - & gt;
                        & lt; div class = "text-center" & gt;
                          & lt; p & gt; hoặc đăng ký bằng: & lt; / p & gt;
                          & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                            & lt; i class = "fab fa-facebook-f" & gt; & lt; / i & gt;
                          & lt; / nút & gt;

                          & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                            & lt; i class = "fab fa-google" & gt; & lt; / i & gt;
                          & lt; / nút & gt;

                          & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                            & lt; i class = "fab fa-twitter" & gt; & lt; / i & gt;
                          & lt; / nút & gt;

                          & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                            & lt; i class = "fab fa-github" & gt; & lt; / i & gt;
                          & lt; / nút & gt;
                        & lt; / div & gt;
                      & lt; / form & gt;
                    & lt; / div & gt;
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
            & lt; / div & gt;
          & lt; / phần & gt;
          & lt;! - Phần: Khối Thiết kế - & gt;

          
        
    

Thẻ đăng ký

Điều này
thẻ cũng sử dụng
hình ảnh thủy tinh để che phủ hình ảnh một cách tinh vi.

Đăng ký ngay bây giờ

Họ

Họ

Địa chỉ email

Mật khẩu

Theo dõi bản tin của chúng tôi

hoặc đăng ký với:


Hiển thị mã


Chỉnh sửa trong hộp cát


            

          & lt;! - Phần: Khối Thiết kế - & gt;
          & lt; section class = "text-center text-lg-start" & gt;
            & lt; phong cách & gt;
              .cascading-right {
                margin-right: -50px;
              }

              @media (max-width: 991,98px) {
                .cascading-right {
                  margin-right: 0;
                }
              }
            & lt; / style & gt;

            & lt;! - Jumbotron - & gt;
            & lt; div class = "container py-4" & gt;
              & lt; div class = "row g-0 align-items-center" & gt;
                & lt; div class = "col-lg-6 mb-5 mb-lg-0" & gt;
                  & lt; div class = "card cascading-right" style = "
                      nền: hsla (0, 0%, 100%, 0,55);
                      phông nền-bộ lọc: mờ (30px);
                      "& gt;
                    & lt; div class = "card-body p-5 shadow-5 text-center" & gt;
                      & lt; h2 class = "fw-bold mb-5" & gt; Đăng ký ngay bây giờ & lt; / h2 & gt;
                      & lt; biểu mẫu & gt;
                        & lt;! - Bố cục lưới 2 cột với đầu vào văn bản cho họ và tên - & gt;
                        & lt; div class = "row" & gt;
                          & lt; div class = "col-md-6 mb-4" & gt;
                            & lt; div class = "form-outline" & gt;
                              & lt; input type = "text" id = "form3Example1" class = "form-control" / & gt;
                              & lt; label class = "form-label" for = "form3Example1" & gt; Tên & lt; / label & gt;
                            & lt; / div & gt;
                          & lt; / div & gt;
                          & lt; div class = "col-md-6 mb-4" & gt;
                            & lt; div class = "form-outline" & gt;
                              & lt; input type = "text" id = "form3Example2" class = "form-control" / & gt;
                              & lt; label class = "form-label" for = "form3Example2" & gt; Họ & lt; / label & gt;
                            & lt; / div & gt;
                          & lt; / div & gt;
                        & lt; / div & gt;

                        & lt;! - Nhập email - & gt;
                        & lt; div class = "form-outline mb-4" & gt;
                          & lt; input type = "email" id = "form3Example3" class = "form-control" / & gt;
                          & lt; label class = "form-label" for = "form3Example3" & gt; Địa chỉ email & lt; / label & gt;
                        & lt; / div & gt;

                        & lt;! - Nhập mật khẩu - & gt;
                        & lt; div class = "form-outline mb-4" & gt;
                          & lt; input type = "password" id = "form3Example4" class = "form-control" / & gt;
                          & lt; label class = "form-label" for = "form3Example4" & gt; Mật khẩu & lt; / label & gt;
                        & lt; / div & gt;

                        & lt;! - Hộp kiểm - & gt;
                        & lt; div class = "form-check d-flex justify-content-center mb-4" & gt;
                          & lt; input class = "form-check-input me-2" type = "checkbox" value = "" id = "form2Example33" đã kiểm tra / & gt;
                          & lt; label class = "form-check-label" for = "form2Example33" & gt;
                            Theo dõi bản tin của chúng tôi
                          & lt; / label & gt;
                        & lt; / div & gt;

                        & lt;! - Nút gửi - & gt;
                        & lt; button type = "submit" class = "btn btn-primary btn-block mb-4" & gt;
                          Đăng ký
                        & lt; / nút & gt;

                        & lt;! - Các nút đăng ký - & gt;
                        & lt; div class = "text-center" & gt;
                          & lt; p & gt; hoặc đăng ký bằng: & lt; / p & gt;
                          & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                            & lt; i class = "fab fa-facebook-f" & gt; & lt; / i & gt;
                          & lt; / nút & gt;

                          & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                            & lt; i class = "fab fa-google" & gt; & lt; / i & gt;
                          & lt; / nút & gt;

                          & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                            & lt; i class = "fab fa-twitter" & gt; & lt; / i & gt;
                          & lt; / nút & gt;

                          & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                            & lt; i class = "fab fa-github" & gt; & lt; / i & gt;
                          & lt; / nút & gt;
                        & lt; / div & gt;
                      & lt; / form & gt;
                    & lt; / div & gt;
                  & lt; / div & gt;
                & lt; / div & gt;

                & lt; div class = "col-lg-6 mb-5 mb-lg-0" & gt;
                  & lt; img src = "https://mdbootstrap.com/img/new/ecommerce/vertical/004.jpg" class = "w-100 round-4 shadow-4"
                    alt = "" / & gt;
                & lt; / div & gt;
              & lt; / div & gt;
            & lt; / div & gt;
            & lt;! - Jumbotron - & gt;
          & lt; / phần & gt;
          & lt;! - Phần: Khối Thiết kế - & gt;
    

Ví dụ về đăng ký

Ví dụ đăng ký cuối cùng không sử dụng cột. Thay vào đó, nó được nhúng bên trong
thẻ jumbotron kéo dài toàn bộ chiều rộng
của trang đăng ký.

Đăng ký ngay bây giờ

Họ

Họ

Địa chỉ email

Mật khẩu

Theo dõi bản tin của chúng tôi

hoặc đăng ký với:

Hiển thị mã


Chỉnh sửa trong hộp cát


            

          & lt;! - Phần: Khối Thiết kế - & gt;
          & lt; section class = "text-center" & gt;
            & lt;! - Hình nền - & gt;
            & lt; div class = "p-5 bg-image" style = "
                  background-image: url ('https://mdbootstrap.com/img/new/textures/full/171.jpg');
                  chiều cao: 300px;
                  "& gt; & lt; / div & gt;
            & lt;! - Hình nền - & gt;

            & lt; div class = "thẻ mx-4 mx-md-5 shadow-5-strong" style = "
                  margin-top: -100px;
                  nền: hsla (0, 0%, 100%, 0,8);
                  phông nền-bộ lọc: mờ (30px);
                  "& gt;
              & lt; div class = "card-body py-5 px-md-5" & gt;

                & lt; div class = "row d-flex justify-content-center" & gt;
                  & lt; div class = "col-lg-8" & gt;
                    & lt; h2 class = "fw-bold mb-5" & gt; Đăng ký ngay bây giờ & lt; / h2 & gt;
                    & lt; biểu mẫu & gt;
                      & lt;! - Bố cục lưới 2 cột với đầu vào văn bản cho họ và tên - & gt;
                      & lt; div class = "row" & gt;
                        & lt; div class = "col-md-6 mb-4" & gt;
                          & lt; div class = "form-outline" & gt;
                            & lt; input type = "text" id = "form3Example1" class = "form-control" / & gt;
                            & lt; label class = "form-label" for = "form3Example1" & gt; Tên & lt; / label & gt;
                          & lt; / div & gt;
                        & lt; / div & gt;
                        & lt; div class = "col-md-6 mb-4" & gt;
                          & lt; div class = "form-outline" & gt;
                            & lt; input type = "text" id = "form3Example2" class = "form-control" / & gt;
                            & lt; label class = "form-label" for = "form3Example2" & gt; Họ & lt; / label & gt;
                          & lt; / div & gt;
                        & lt; / div & gt;
                      & lt; / div & gt;

                      & lt;! - Nhập email - & gt;
                      & lt; div class = "form-outline mb-4" & gt;
                        & lt; input type = "email" id = "form3Example3" class = "form-control" / & gt;
                        & lt; label class = "form-label" for = "form3Example3" & gt; Địa chỉ email & lt; / label & gt;
                      & lt; / div & gt;

                      & lt;! - Nhập mật khẩu - & gt;
                      & lt; div class = "form-outline mb-4" & gt;
                        & lt; input type = "password" id = "form3Example4" class = "form-control" / & gt;
                        & lt; label class = "form-label" for = "form3Example4" & gt; Mật khẩu & lt; / label & gt;
                      & lt; / div & gt;

                      & lt;! - Hộp kiểm - & gt;
                      & lt; div class = "form-check d-flex justify-content-center mb-4" & gt;
                        & lt; input class = "form-check-input me-2" type = "checkbox" value = "" id = "form2Example33" đã kiểm tra / & gt;
                        & lt; label class = "form-check-label" for = "form2Example33" & gt;
                          Theo dõi bản tin của chúng tôi
                        & lt; / label & gt;
                      & lt; / div & gt;

                      & lt;! - Nút gửi - & gt;
                      & lt; button type = "submit" class = "btn btn-primary btn-block mb-4" & gt;
                        Đăng ký
                      & lt; / nút & gt;

                      & lt;! - Các nút đăng ký - & gt;
                      & lt; div class = "text-center" & gt;
                        & lt; p & gt; hoặc đăng ký bằng: & lt; / p & gt;
                        & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                          & lt; i class = "fab fa-facebook-f" & gt; & lt; / i & gt;
                        & lt; / nút & gt;

                        & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                          & lt; i class = "fab fa-google" & gt; & lt; / i & gt;
                        & lt; / nút & gt;

                        & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                          & lt; i class = "fab fa-twitter" & gt; & lt; / i & gt;
                        & lt; / nút & gt;

                        & lt; button type = "button" class = "btn btn-link btn-float mx-1" & gt;
                          & lt; i class = "fab fa-github" & gt; & lt; / i & gt;
                        & lt; / nút & gt;
                      & lt; / div & gt;
                    & lt; / form & gt;
                  & lt; / div & gt;
                & lt; / div & gt;
              & lt; / div & gt;
            & lt; / div & gt;
          & lt; / phần & gt;
          & lt;! - Phần: Khối Thiết kế - & gt;

          
        
    


Xem thêm những thông tin liên quan đến chủ đề biểu mẫu đăng nhập bootstrap css

Responsive Login & Registration Form Using HTML & CSS & JS | Sliding Sign In & Sign Up Form

alt

  • Tác giả: True Coder
  • Ngày đăng: 2020-07-08
  • Đánh giá: 4 ⭐ ( 3257 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Responsive Login & Registration Form Using HTML & CSS & JS | Sliding Sign In & Sign Up Form

    In today’s video, we’re going to make an AWESOME login and registration form with awesome sliding animation just by using HTML and CSS and little bit of JavaScript. We’ll have a nice blue background, also our sign in & sign up form will be responsive !

    💖 Please feel free to donate any amount you think is equal to the value you received from my tutorials. Donation link : https://paypal.me/truecoder

    SOURCE CODE : https://github.com/sefyudem/Sliding-Sign-In-Sign-Up-Form

    Don’t forget to smash the like button and share the video with your friends if you found the video useful, also click on the bell icon to turn on notifications. This way you’ll be notified the moment new videos are uploaded.

    Make sure to SUBSCRIBE for more tutorials just like this one !

    ✉️ For Business inquiries : truecoder.business@gmail.com

Cách tạo biểu mẫu đăng nhập Bootstrap với xác thực PHP

  • Tác giả: vi.allworldrating.com
  • Đánh giá: 4 ⭐ ( 1425 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, tôi sẽ giải thích quá trình tạo biểu mẫu đăng nhập bootstrap bằng bootstrap Twitter. Tôi cũng sẽ giải thích cách triển khai xác thực phía máy chủ trong phần này

Làm form đăng nhập cực đẹp sử dụng Bootstrap và HTML + CSS

  • Tác giả: nguyenvanhieu.vn
  • Đánh giá: 4 ⭐ ( 2910 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách làm form đăng nhập cực đẹp chỉ với HTML và CSS, sử dụng Framework Bootstrap. Kết quả chúng ta có được giao diện form đăng nhập

5 Mẫu biểu mẫu Bootstrap sẵn sàng sử dụng cho các dự án của bạn

  • Tác giả: helpex.vn
  • Đánh giá: 3 ⭐ ( 8502 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bootstrap là khung web mặt trước phổ biến nhất và có lẽ là hoàn chỉnh nhất, cho phép các nhà phát triển nhanh chóng tạo ra một trang web hoặc ứng dụng web. Trong bài viết này, tôi đã biên…

Ví dụ về mẫu trang của biểu mẫu đăng nhập Bootstrap

  • Tác giả: trithucdoisong.net
  • Đánh giá: 3 ⭐ ( 6393 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này sẽ cung cấp cho bạn 3 mẫu biểu mẫu đăng nhập Bootstrap tuyệt vời. Nó cũng đã tạo mã phụ trợ trong PHP để xử lý đăng nhập. Trang đăng nhập đáp ứng

Bootstrap Form – Biểu mẫu Bootstrap

  • Tác giả: lamvt.vn
  • Đánh giá: 3 ⭐ ( 8882 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

20+ Best Free Bootstrap HTML5 & CSS Login Form Templates

  • Tác giả: www.themevault.net
  • Đánh giá: 3 ⭐ ( 8922 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Find Best 20+ Free Responsive Html & Css3 Login Form Templates with modern design. All of them built with html5 and css3.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách sử dụng một href trong HTML [+ Ví dụ] - html href là gì