在这个基础上在 扩展一个页面 <!DOCTYPE
html>
<
html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{
% block title
%}管理后台{
% endblock %}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@
5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
{
% block styles
%}{
% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
<div class="container">
<a class="navbar-brand" href="{{ url_for('dashboard') }}">管理后台</a>
{
% if session.get('logged_in')
%}
<div class="navbar-nav ms-auto">
<span class="navbar-text me-3">欢迎, {{ session.get('username') }}</span>
<a class="nav-link" href="{{ url_for('logout') }}"><i class="bi bi-box-arrow-right"></i> 退出</a>
</div>
{
% endif
%}
</div>
</nav>
<div class="container">
{
% with messages = get_flashed_messages(with_categories=true)
%}
{
% if messages
%}
{
% for category, message in messages
%}
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{
% endfor
%}
{
% endif
%}
{
% endwith
%}
{
% block content
%}{
% endblock %}
</div>
<footer class="mt-
5 py-3 bg-light text-center">
<div class="container">
<p class="mb-0">© 202
5 管理后台系统</p>
</div>
</footer>
<
script src="https://cdn.jsdelivr.net/npm/bootstrap@
5.3.0/dist/js/bootstrap.bundle.min.js"></
script>
{
% block scripts
%}{
% endblock %}
</body>
</
html>
博客提及HTML5起到继承作用，在信息技术领域，HTML5是前端开发重要技术，其继承特性对网页构建等有重要意义。
扫一扫
767
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
