Skip to content

Commit 5cb70e3

Browse files
alisxalisx
committed
Python flask Bootstrap
1 parent 0562c09 commit 5cb70e3

File tree

10 files changed

+138
-0
lines changed

10 files changed

+138
-0
lines changed

‎day-038/flaskbootstrap.py

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
from flask import Flask, render_template
2+
from flask_bootstrap import Bootstrap
3+
4+
5+
app = Flask(__name__)
6+
7+
bootstrap = Bootstrap(app)
8+
app.config['BOOTSTRAP_SERVE_LOCAL'] = True
9+
10+
11+
@app.route('/')
12+
def index():
13+
return render_template('index.html')
14+
15+
@app.route('/user')
16+
def user():
17+
return render_template('user.html')
18+
19+
@app.route('/post')
20+
def post():
21+
return render_template('post.html')
22+
23+
if __name__ == '__main__':
24+
app.run(debug=True)

‎day-038/static/css/bootstrap.min.css

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎day-038/static/css/style.css

Whitespace-only changes.

‎day-038/static/js/bootstrap.min.js

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎day-038/static/js/jquery.min.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎day-038/static/js/popper.min.js

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎day-038/templates/base.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!-- 引入导航模块的宏 render_nav_item -->
2+
{% from 'bootstrap/nav.html' import render_nav_item %}
3+
<!-- 下面是正常的 Bootstrap 页面代码，看起来很复杂，不过可以从官网上拷贝 -->
4+
<!DOCTYPE html>
5+
<html lang="cn">
6+
<head>
7+
<meta charset="utf-8">
8+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9+
<title>{% block title %} Flask Bootstrap {% endblock %}</title> <!-- 定义标题块 -->
10+
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
11+
{{ bootstrap.load_css() }} <!-- 动态加载 Bootstrap 样式 -->
12+
</head>
13+
<body>
14+
<main class="container">
15+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
16+
<div class="navbar-header">
17+
<a class="navbar-brand" href="#">Python100</a>
18+
</div>
19+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
20+
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
21+
<span class="navbar-toggler-icon"></span>
22+
</button>
23+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
24+
<ul class="navbar-nav mr-auto">
25+
<!-- 利用宏 render_nav_item 创建菜单 -->
26+
{{ render_nav_item('index', '首页', use_li=True) }}
27+
{{ render_nav_item('user', '用户', use_li=True) }}
28+
{{ render_nav_item('post', '文章', use_li=True) }}
29+
</ul>
30+
</div>
31+
</nav>
32+
{% block content %} <!-- 定义内容块 -->
33+
<h1> Hello Flask Bootstrap! </h1>
34+
{% endblock %}
35+
<footer class="text-center">
36+
{% block footer %} <!-- 定义页脚块 -->
37+
<small> &copy; 2019 <a href="http://justdopython.com" title="python 100天">Python 技术</a>
38+
</small>
39+
{% endblock %}
40+
</footer>
41+
</main>
42+
43+
<!-- 动态加载 Bootstrap js 脚本 -->
44+
{{ bootstrap.load_js() }}
45+
</body>
46+
</html>

‎day-038/templates/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{% extends "base.html" %}
2+
3+
{% from 'bootstrap/nav.html' import render_breadcrumb_item %}
4+
{% from 'bootstrap/utils.html' import render_static %}
5+
6+
{{ render_static('css', 'style.css') }}
7+
8+
{% block content %}
9+
<span>面包屑</span>
10+
<nav aria-label="breadcrumb">
11+
<ol class="breadcrumb">
12+
{{ render_breadcrumb_item('index', '首页') }}
13+
{{ render_breadcrumb_item('user', '用户') }}
14+
{{ render_breadcrumb_item('post', '文章') }}
15+
</ol>
16+
</nav>
17+
<h1> Hello Flask Bootstrap </h1>
18+
{% endblock %}

‎day-038/templates/post.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{% extends "base.html" %}
2+
{% from 'bootstrap/nav.html' import render_breadcrumb_item %}
3+
{% block content %}
4+
<span>面包屑</span>
5+
<nav aria-label="breadcrumb">
6+
<ol class="breadcrumb">
7+
{{ render_breadcrumb_item('index', '首页') }}
8+
{{ render_breadcrumb_item('user', '用户') }}
9+
{{ render_breadcrumb_item('post', '文章') }}
10+
</ol>
11+
</nav>
12+
13+
<h1> Welcome to Post page! </h1>
14+
{% endblock %}

‎day-038/templates/user.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{% extends "base.html" %}
2+
{% from 'bootstrap/nav.html' import render_breadcrumb_item %}
3+
{% block content %}
4+
<span>面包屑</span>
5+
<nav aria-label="breadcrumb">
6+
<ol class="breadcrumb">
7+
{{ render_breadcrumb_item('index', '首页') }}
8+
{{ render_breadcrumb_item('user', '用户') }}
9+
{{ render_breadcrumb_item('post', '文章') }}
10+
</ol>
11+
</nav>
12+
13+
<h1> Welcome to User page! </h1>
14+
15+
{% endblock %}

0 commit comments

Comments
 (0)