Bulma CSS 로그인 양식 페이지 예
view
Bulma CSS 로그인 페이지 예제
1)Bulma CSS 간편 로그인 페이지.
<!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>Bulma CSS Login Page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<body>
<div class="hero is-fullheight">
<div class="hero-body is-justify-content-center is-align-items-center">
<div class="columns is-flex is-flex-direction-column box">
<div class="column">
<label for="email">Email</label>
<input class="input is-primary" type="text" placeholder="Email address">
</div>
<div class="column">
<label for="Name">Password</label>
<input class="input is-primary" type="password" placeholder="Password">
<a href="forget.html" class="is-size-7 has-text-primary">forget password?</a>
</div>
<div class="column">
<button class="button is-primary is-fullwidth" type="submit">Login</button>
</div>
<div class="has-text-centered">
<p class="is-size-7"> Don't have an account? <a href="#" class="has-text-primary">Sign up</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
2)이미지가 포함된 Bulma CSS 로그인 페이지.
<!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>Bulma CSS Login Page with image</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<body>
<div class="container">
<div class="columns">
<div class="column is-5">
<div class="columns is-flex is-flex-direction-column">
<div class="column">
<label for="email">Email</label>
<input class="input is-primary" type="text" placeholder="Email address">
</div>
<div class="column">
<label for="Name">Password</label>
<input class="input is-primary" type="password" placeholder="Password">
<a href="forget.html" class="is-size-7 has-text-primary">forget password?</a>
</div>
<div class="column">
<button class="button is-primary is-fullwidth" type="submit">Login</button>
</div>
<div class="has-text-centered">
<p class="is-size-7"> Don't have an account? <a href="#" class="has-text-primary">Sign
up</a>
</p>
</div>
</div>
</div>
<div class="column is-5">
<img src="https://cdn.pixabay.com/photo/2017/02/25/23/51/human-2099066__340.png" alt="bulma login page">
</div>
</div>
</div>
</body>
</html>
Reference
이 문제에 관하여(Bulma CSS 로그인 양식 페이지 예), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/frontendshape/bulma-css-login-form-page-example-58h5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
