Python Web Bootstrap
メイン接続画面はbiHi~~!!出力のみが空っぽすぎるのでindexページを整理したいです.
久しぶりに会ったMainpyファイル.
昔のBiHi~~~!!出力の
@app.route('/')部分では、他ルートと同様index.html路render_templateindex.html銀Bootstrapを利用して飾ります.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>
これに加えて、多くの例が提供されています.その他の例はホームページでご覧ください.
上図の例を選択します.
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・
Reference
この問題について(Python Web Bootstrap), 我々は、より多くの情報をここで見つけました https://velog.io/@bi-sz/Python-Web-Bootstrapテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol