파이썬 보틀의 기본 2 Bootstrap4
4390 단어 bootstrap4파이썬병webserver
웹 서버를 쉽게 만들 수 있다는 것은 "기본 1"에서 설명했다.
iPhone이나 Android등의 스마트폰용으로 Web 컨텐츠를 작성하는 것은, 조금 어렵다. 대부분의 경우, 프로그래머는 디자인적인 작업은 하지 않으므로 그다지 자세하지 않다.
Html과 Css를 구사해 디자인해 나가지만 Bootstrap4 을 사용하면 간단하게 실현할 수 있다.
Bootstrap4의 해설에는, 「CDN과 템플릿을 사용해 모바일 퍼스트인 사이트를 구축할 수 있습니다.」라고 있다.
CDN이란 콘텐츠 전달 네트워크(Content Delivery Network)
"반응형 웹 디자인으로 모바일 우선을 실현하고 있습니다."라고 쓰는 의미는
일반적으로는 CSS와 JavaScript를 구사하여 작성하지만, 대부분의 경우 반응이 되지 않습니다.
Bootstrap의 의미는 쿵쿵 같은 프로그램이라는 뜻입니다.
옛날, 미니콘 시대 종이 테이프를 읽는 프로그램을 Bootstrap이라고 부르고 있어, 미니콘의 패널 짧은 프로그램을 2진 스위치로부터 넣어 사용했다.
기본형은 다음과 같습니다.
ex2.py# bottleの基本2
from bottle import *
html='''
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container body-content">%s</div>
</body>
</html>'''
@route('/')
def home():
return html%"<h1>Hello World</h1>"
HOST,PORT='localhost',8080
if __name__ =='__main__':
run(host=HOST,port=PORT)
<div class="container body-content">%s</div>
.....
return html%"<h1>Hello World</h1>
テンプレートの%sにHello Worldを挿入している。
이제 고마움을 모르기 때문에 5개의 버튼을 만들어 보자.
def home():
btn="".join(["<button class='btn btn-primary' style='margin:1em;width:100px;'>%s</button>"%x for x in '東京,神田,お茶の水,四谷,新宿'.split(',')])
return html%btn
깔끔하게 배치되어 있음을 알 수 있습니다.
Reference
이 문제에 관하여(파이썬 보틀의 기본 2 Bootstrap4), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hiratarich/items/5a39f136ed898a9d3454
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
일반적으로는 CSS와 JavaScript를 구사하여 작성하지만, 대부분의 경우 반응이 되지 않습니다.
Bootstrap의 의미는 쿵쿵 같은 프로그램이라는 뜻입니다.
옛날, 미니콘 시대 종이 테이프를 읽는 프로그램을 Bootstrap이라고 부르고 있어, 미니콘의 패널 짧은 프로그램을 2진 스위치로부터 넣어 사용했다.
기본형은 다음과 같습니다.
ex2.py# bottleの基本2
from bottle import *
html='''
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container body-content">%s</div>
</body>
</html>'''
@route('/')
def home():
return html%"<h1>Hello World</h1>"
HOST,PORT='localhost',8080
if __name__ =='__main__':
run(host=HOST,port=PORT)
<div class="container body-content">%s</div>
.....
return html%"<h1>Hello World</h1>
テンプレートの%sにHello Worldを挿入している。
이제 고마움을 모르기 때문에 5개의 버튼을 만들어 보자.
def home():
btn="".join(["<button class='btn btn-primary' style='margin:1em;width:100px;'>%s</button>"%x for x in '東京,神田,お茶の水,四谷,新宿'.split(',')])
return html%btn
깔끔하게 배치되어 있음을 알 수 있습니다.
Reference
이 문제에 관하여(파이썬 보틀의 기본 2 Bootstrap4), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hiratarich/items/5a39f136ed898a9d3454
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
# bottleの基本2
from bottle import *
html='''
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container body-content">%s</div>
</body>
</html>'''
@route('/')
def home():
return html%"<h1>Hello World</h1>"
HOST,PORT='localhost',8080
if __name__ =='__main__':
run(host=HOST,port=PORT)
<div class="container body-content">%s</div>
.....
return html%"<h1>Hello World</h1>
テンプレートの%sにHello Worldを挿入している。
def home():
btn="".join(["<button class='btn btn-primary' style='margin:1em;width:100px;'>%s</button>"%x for x in '東京,神田,お茶の水,四谷,新宿'.split(',')])
return html%btn
깔끔하게 배치되어 있음을 알 수 있습니다.
Reference
이 문제에 관하여(파이썬 보틀의 기본 2 Bootstrap4), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hiratarich/items/5a39f136ed898a9d3454텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
