Web serverを簡単に作成できることは、「基本1」で説明した。
iPhoneやAndroidなどのスマートフォン向けにWeb コンテンツを作成するのは、少々難しい。たいていの場合、プログラマは、デザイン的な作業はしないのであまり詳しくない。
HtmlとCssを駆使してデザインしていくのだがBootstrap4を使えば簡単に実現できる。
Bootstrap4の解説には、「CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。」とある。
CDNとは、コンテンツデリバリネットワーク（Content Delivery Network）
「レスポンシブウェブデザインでモバイルファーストを実現しています。」と書いてある意味は、
一般的には、CSSとJavaScriptsを駆使して作成するのだが、多くの場合、レスポンシブになっていない。
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を挿入している。
これでは、ありがたみがわからないので５個のボタンを作ってみよう。
def home():
btn="".join(["<button class='btn btn-primary' style='margin:1em;width:100px;'>%s</button>"%x for x in '東京,神田,お茶の水,四谷,新宿'.split(',')])
return html%btn
きれいに配置されていることがわかる。