Python Web Bootstrap



メイン接続画面はbiHi~~!!出力のみが空っぽすぎるのでindexページを整理したいです.

久しぶりに会ったMainpyファイル.
昔のBiHi~~~!!出力の@app.route('/')部分では、他ルートと同様index.htmlrender_templateindex.htmlBootstrapを利用して飾ります.

Bootstrap


ガイドバーはHTML、CSS、JSフレームワークで、簡単にWebサイトを作成できます.
1つのCSSは、携帯電話、タブレット、デスクトップなど多くのデバイスで実行できます.
ユーザーがWebサイトの作成、メンテナンス、メンテナンスを容易にするためのさまざまな機能を提供します.

Bootstrap CDN


CDNを使用してブートバーのCSSとJavaScriptをサポートします.
합쳐지고 최소화된 최신 CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
부가적인 테마
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
합쳐지고 최소화된 최신 자바스크립트
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
Bootstrap公式サイトで例を見ることができます.

これに加えて、多くの例が提供されています.その他の例はホームページでご覧ください.

上図の例を選択します.

F 12開発ツールを開き、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>Main</title>
    <script>
        function goto_page(target) {
            var target = window.location.href + target
            window.location.href = target
        }
    </script>
</head>
<body>
    <div class="container">
      <div class="card-deck mb-3 text-center">
        <div class="card mb-4 shadow-sm">
          <div class="card-header">
            <h4 class="my-0 font-weight-normal">Calculator</h4>
          </div>
          <div class="card-body">
            <button type="button" class="btn btn-info" onclick="goto_page('calc')">Go to Bi-Calculator</button>
          </div>
        </div>
        <div class="card mb-4 shadow-sm">
          <div class="card-header">
            <h4 class="my-0 font-weight-normal">Old-Lotto</h4>
          </div>
          <div class="card-body">
            <button type="button" class="btn btn-warning" onclick="goto_page('lotto')">Go to Bi-Lotto</button>
          </div>
        </div>
        <div class="card mb-4 shadow-sm">
          <div class="card-header">
            <h4 class="my-0 font-weight-normal">New-Lotto</h4>
          </div>
          <div class="card-body">
            <button type="button" class="btn btn-primary" onclick="goto_page('lotto2')">Go to Bi-Lotto</button>
          </div>
        </div>
      </div>
    </div>
    <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://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <style>
        .btn {
            width:100%;
            height: 50px;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 100px;
        }
    </style>
</html>
私は不要なコードを削除して、私が使う部分だけを残して、それを利用してページを飾ります.
<script>
        function goto_page(target) {
            var target = window.location.href + target
            window.location.href = target
        }
</script>
<script>にgoto page`関数を作成し、必要なtargetとしてURLを生成して呼び出す.
<button type="button" class="btn btn-info" onclick="goto_page('calc')">Go to Bi-Calculator</button>
<button type="button" class="btn btn-warning" onclick="goto_page('lotto')">Go to Bi-Lotto</button>
<button type="button" class="btn btn-primary" onclick="goto_page('lotto2')">Go to Bi-Lotto</button>
<body>で作成したボタンをクリックすると、goto_page(target)関数が呼び出されます.goto_page関数は重複コードを必要とせず、変更するだけtarget簡潔な呼び出しが可能.

Bootstrapの他にも多くの例が参考になるが、例えばW3materializecssD3.jsnaver open source