-
【Python Web】Flask框架（五）Bootstrap登录和后台管理案例
案例
- 通过Bootstrap的组件和css进行实现，主要用使用有面板，表格，表单等。
登录
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户登录title> <link rel="stylesheet" href="/static/plugins/bootstrap3/css/bootstrap.css"> <style> .acount { width: 400px; border: 1px solid #ddd; box-shadow: 5px 5px 5px #aaa; margin-left: auto; margin-right: auto; margin-top: 100px; padding: 20px 30px; } .acount h1 { text-align: center; } style> head> <body> <div class="acount"> <h2>用户登录h2> <form> <div class="form-group"> <label for="exampleInputEmail1">用户名label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="用户名"> div> <div class="form-group"> <label for="exampleInputPassword1">密码label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码"> div> <button type="submit" class="btn btn-primary">登录button> form> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
后台管理
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台管理title> <link rel="stylesheet" href="/static/plugins/bootstrap3/css/bootstrap.css"> head> <body> <div class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigationspan> <span class="icon-bar">span> <span class="icon-bar">span> <span class="icon-bar">span> button> <a class="navbar-brand" href="#">xxx系统a> div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Linka>li> <li><a href="#">Linka>li> ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">登录a>li> <li><a href="#">注册a>li> ul> div> div> div> <div class="container"> <div class="panel panel-default"> <div class="panel-heading">表单区域div> <div class="panel-body"> <form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail3">Email addresslabel> <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"> div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword3">Passwordlabel> <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> div> <button type="submit" class="btn btn-success">保存button> form> div> div> <div class="panel panel-default"> <div class="panel-heading">数据列表div> <div class="panel-body"> 以下是数据 div> <table class="table table-bordered table-hover"> <thead> <tr> <th>#th> <th>First Nameth> <th>Last Nameth> <th>操作th> tr> thead> <tbody> <tr> <th scope="row">1th> <td>Marktd> <td>Ottotd> <td> <a class="btn-primary btn-xs">编辑a> <a class="btn-danger btn-xs">删除a> td> tr> <tr> <th scope="row">2th> <td>Jacobtd> <td>Thorntontd> <td> <a class="btn-primary btn-xs">编辑a> <a class="btn-danger btn-xs">删除a> td> tr> <tr> <th scope="row">3th> <td>Larrytd> <td>the Birdtd> <td> <a class="btn-primary btn-xs">编辑a> <a class="btn-danger btn-xs">删除a> td> tr> tbody> table> div> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«span> a> li> <li><a href="#">1a>li> <li><a href="#">2a>li> <li><a href="#">3a>li> <li><a href="#">4a>li> <li><a href="#">5a>li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»span> a> li> ul> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
图标
- 我们使用fontawesome
- 下载
- 引入
- 使用
jQuery类库
- html就像是骨架，而css进行点缀达到好看的效果，JavaScript就是动态，可以交互。
- bootstrap依赖JavaScript的一个叫jQuery的类库
jQuery 下载文件
- 如图目录存放
- 导入两个JavaScript文件,先导入jQuery，再导入bootstrap
<script src="static/js/jquery-3.6.1.min.js">script> <script src="static/plugins/bootstrap3/js/bootstrap.min.js">script>- 1
- 2
此时bootstrap中的动态效果即可使用
-
相关阅读:
opencv-简单图像处理
Python学习笔记 - 数据结构：元组、列表、集合和字典
Spring中的创建对象的三种方式、第三方资源配置管理详细描述及使用（XML版完结篇）
Ubuntu虚拟机安装教程
ffmpeg -sources分析
Vue---SCSS
leetcode 739. 每日温度、496. 下一个更大元素 I
【分类-SVM】基于哈里斯鹰算法优化支持向量机SVM实现分类附matlab的代码
《Eolink 征文活动- -RESTful接口全解测试-全方位了解Eolink-三神技超亮点》
MS1861 视频处理与显示控制器 HDMI转MIPI LVDS转MIPI带旋转功能 图像带缩放，旋转，锐化
- 原文地址：https://blog.csdn.net/qq_51670115/article/details/126906590
