Bootstrap 5 로그인 양식 페이지 예

18000 단어 tutorialcssbootstrapwebdev
안녕 모두들. 오늘 우리는 계획 부트스트랩 5를 사용하여 로그인 양식 페이지를 만들 것입니다. 따라서 우리는 웹사이트에서 쉽게 사용할 수 있는 반응형 보기 좋은 로그인 양식을 만들 것입니다. 프로젝트에서 부트스트랩 5를 설정하고 아래에 로그인 양식 페이지 코드 스니펫 예제를 입력하면 됩니다. 이제 시작하기 전에 부트스트랩 5 프로젝트를 설정하거나 cdn을 사용하거나 아래 기사를 읽을 수 있습니다.

view

How to install & setup bootstrap 5

Bootstrap 5 로그인 양식 페이지



1) 부트스트랩 5에서 간단한 반응형 로그인.
로그인.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap 5 Login form Page</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
    <div class="vh-100 d-flex justify-content-center align-items-center">
      <div class="container">
        <div class="row d-flex justify-content-center">
          <div class="col-12 col-md-8 col-lg-6">
            <div class="card bg-white">
              <div class="card-body p-5">
                <form class="mb-3 mt-md-4">
                  <h2 class="fw-bold mb-2 text-uppercase ">Brand</h2>
                  <p class=" mb-5">Please enter your login and password!</p>
                  <div class="mb-3">
                    <label for="email" class="form-label ">Email address</label>
                    <input type="email" class="form-control" id="email" placeholder="[email protected]">
                  </div>
                  <div class="mb-3">
                    <label for="password" class="form-label ">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="*******">
                  </div>
                  <p class="small"><a class="text-primary" href="forget-password.html">Forgot password?</a></p>
                  <div class="d-grid">
                    <button class="btn btn-outline-dark" type="submit">Login</button>
                  </div>
                </form>
                <div>
                  <p class="mb-0  text-center">Don't have an account? <a href="signup.html" class="text-primary fw-bold">Sign
                      Up</a></p>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </body>

</html>




2) 테두리 클래스를 사용하여 Bootstrap 5 괜찮은 모양의 로그인.
로그인.html

<div class="vh-100 d-flex justify-content-center align-items-center">
  <div class="container">
    <div class="row d-flex justify-content-center">
      <div class="col-12 col-md-8 col-lg-6">
        <div class="border border-3 border-primary"></div>
        <div class="card bg-white">
          <div class="card-body p-5">
            <form class="mb-3 mt-md-4">
              <h2 class="fw-bold mb-2 text-uppercase ">Brand</h2>
              <p class=" mb-5">Please enter your login and password!</p>
              <div class="mb-3">
                <label for="email" class="form-label ">Email address</label>
                <input type="email" class="form-control" id="email" placeholder="[email protected]">
              </div>
              <div class="mb-3">
                <label for="password" class="form-label ">Password</label>
                <input type="password" class="form-control" id="password" placeholder="*******">
              </div>
              <p class="small"><a class="text-primary" href="forget-password.html">Forgot password?</a></p>
              <div class="d-grid">
                <button class="btn btn-outline-dark" type="submit">Login</button>
              </div>
            </form>
            <div>
              <p class="mb-0  text-center">Don't have an account? <a href="signup.html"
                  class="text-primary fw-bold">Sign
                  Up</a></p>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>




3) 테두리 및 그림자 클래스를 사용하여 Bootstrap 5 로그인.
로그인.html

<div class="vh-100 d-flex justify-content-center align-items-center">
  <div class="container">
    <div class="row d-flex justify-content-center">
      <div class="col-12 col-md-8 col-lg-6">
        <div class="border border-3 border-primary"></div>
        <div class="card bg-white shadow-lg">
          <div class="card-body p-5">
            <form class="mb-3 mt-md-4">
              <h2 class="fw-bold mb-2 text-uppercase ">Brand</h2>
              <p class=" mb-5">Please enter your login and password!</p>
              <div class="mb-3">
                <label for="email" class="form-label ">Email address</label>
                <input type="email" class="form-control" id="email" placeholder="[email protected]">
              </div>
              <div class="mb-3">
                <label for="password" class="form-label ">Password</label>
                <input type="password" class="form-control" id="password" placeholder="*******">
              </div>
              <p class="small"><a class="text-primary" href="forget-password.html">Forgot password?</a></p>
              <div class="d-grid">
                <button class="btn btn-outline-dark" type="submit">Login</button>
              </div>
            </form>
            <div>
              <p class="mb-0  text-center">Don't have an account? <a href="signup.html"
                  class="text-primary fw-bold">Sign
                  Up</a></p>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>


Career Pivot into Development Journal, 6일 차: JS 실습 5 – sumAll.js
Drupal 8에서 모듈에 대한 도움말 페이지 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage