bootstrap을 간단하게 말하자면 트위터에서 개발한 일종의 라이브러리/템플릿 정도로 보면 된다.
우리가 웹사이트를 개발할때 사람들에서 보여지는 front end를 개발해야 하는데 이부분이 미적감각도 있어야 하고 javascript css 등 신경써야할 부분이 많다.
이런 노동들을 줄이고자 많은 bootstrap template를 유료 또는 무료로 사용할 수 있다.
여기서는 간단히 로그인 페이지를 무료 template를 가져와서 flask와 연동해서 만들어 보겠다.
https://getbootstrap.com/docs/5.0/examples/
위 링크에서 example를 다운로드 한다.
그중에 bootstrap-5.0.0-beta1-examples\bootstrap-5.0.0-beta1-examples\sign-in\index.html 파일을 열어서 소스코드를 가져와서 예전에 작업했던 page.html 파일에 덮어 씌운다. page.html과 flask 동작 예제는 아래 링크에 있다.
scribblinganything.tistory.com/46
jquery 예제 설명, cdn이란
jquery란 javascript의 라이브러리이다. 라이브러리의 일반적인 기능처럼 구현하기 복잡한 javascript 코드나 기능들을 사용자들이 쉽게 사용할 수 있게 해준다. jquery를 사용하기 위해서 html head에 사용
scribblinganything.tistory.com
코드-page.html>>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.79.0">
<title>Signin Template · Bootstrap v5.0</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>
<!-- Bootstrap core CSS -->
<link href="/static/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="/static/signin.css" rel="stylesheet">
</head>
<body class="text-center">
<main class="form-signin">
<form>
<img class="mb-4" src="/static/bootstrap-logo.svg" alt="" width="72" height="57">
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
<label for="inputEmail" class="visually-hidden">Email address</label>
<input type="email" id="email_id" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="visually-hidden">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2020</p>
</form>
</main>
</body>
</html>
그리고 실행 결과는 아래와 같다.
그리고 jquery나 flask에서 손수 정의했던 로그인정보를 잘못입력했을때 나오는 정보는 bootstrap에서 알아서 아래처럼 적용되게 바꼈다.
'파이썬(Python) > Flask' 카테고리의 다른 글
| 파이썬 Flask 기능 정리 - render_template, jinja2 (0) | 2021.01.29 |
|---|---|
| 파이썬 Flask 기능 정리 - url_for, HTTP 요청(GET,POST,PUT,DELETE,OPTIONS)과 처리방법 (0) | 2021.01.28 |
| 파이썬 Flask 기능 정리 - route, 변수(variable)<괄호>로 보내기, url 표기 방법 (0) | 2021.01.27 |
| jquery 예제 설명, cdn이란 (0) | 2020.12.16 |
| Flask route란 (0) | 2020.12.15 |