首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

Django使用 Bootstrap 样式修改书籍列表过程解析

Posted in Python onAugust 09, 2019

展示书籍列表：

首先修改原先的 book_list.html 的代码：

<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="https://v3.bootcss.com/favicon.ico" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 
  <title>书籍列表管理</title>
  <!-- Bootstrap core CSS -->
  <link href="/static/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="/static/dashboard.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
  <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
 
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
          aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="https://v3.bootcss.com/examples/dashboard/#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >图书管理系统</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="https://v3.bootcss.com/examples/dashboard/#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Dashboard</a></li>
        <li><a href="https://v3.bootcss.com/examples/dashboard/#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Settings</a></li>
        <li><a href="https://v3.bootcss.com/examples/dashboard/#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Profile</a></li>
        <li><a href="https://v3.bootcss.com/examples/dashboard/#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Help</a></li>
      </ul>
      <form class="navbar-form navbar-right">
        <input type="text" class="form-control" placeholder="Search...">
      </form>
    </div>
  </div>
</nav>
 
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
      <!-- active 表示当前页面，会加亮 -->
      <ul class="nav nav-sidebar">
        <li><a href="/publisher_list/" rel="external nofollow" >出版社列表页</a></li>
        <li class="active"><a href="/book_list/" rel="external nofollow" >书籍列表</a></li>
        <li><a href="/author_list/" rel="external nofollow" >作者列表</a></li>
      </ul>
 
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
      <h1 class="page-header">书籍管理页面</h1>
 
      <div class="panel panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading">书籍列表 <i class="fa fa-thumb-tack pull-right"></i></div>
        <div class="panel-body">
          <div class="row" style="margin-bottom: 15px">
            <div class="col-md-4">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button">搜索</button>
                </span>
              </div><!-- /input-group -->
            </div><!-- /.col-md-4 -->
            <!-- 跳转到另一页面，添加新的书籍 -->
            <div class="col-md-1 pull-right">
              <a href="/add_book/" rel="external nofollow" class="btn btn-success">新增</a>
            </div>
 
          </div><!-- /.row -->
 
          <table class="table table-bordered">
            <thead>
            <tr>
              <th>#</th>
              <th>id</th>
              <th>书名</th>
              <th>出版社名称</th>
              <th>操作</th>
            </tr>
            </thead>
            <!-- 从原先的 book_list.html 拷贝过来的代码-->
            <tbody>
            {% for book in book_list %}
              <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ book.id }}</td>
                <td>{{ book.title }}</td>
                <td>{{ book.publisher.name }}</td>
                <td>
                  <a class="btn btn-danger" href="/del_book/?id={{ book.id }}" rel="external nofollow" >删除</a>
                  <a class="btn btn-info" href="/edit_book/?id={{ book.id }}" rel="external nofollow" >编辑</a>
                </td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
 
          <nav aria-label="Page navigation" class="text-right">
            <ul class="pagination">
              <li>
                <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" aria-label="Previous">
                  <span aria-hidden="true">«</span>
                </a>
              </li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a></li>
              <li>
                <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" aria-label="Next">
                  <span aria-hidden="true">»</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
 
      </div>
    </div>
  </div>
</div>
 
 
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title">用户信息</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
              <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
 
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
 
</body>
</html>

修改过程：

Django使用 Bootstrap 样式修改书籍列表过程解析

Django使用 Bootstrap 样式修改书籍列表过程解析

Django使用 Bootstrap 样式修改书籍列表过程解析

运行效果：

Django使用 Bootstrap 样式修改书籍列表过程解析

添加书籍：

再来修改 add_book.html

<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="https://v3.bootcss.com/favicon.ico" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 
  <title>添加书籍</title>
  <!-- Bootstrap core CSS -->
  <link href="/static/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="/static/dashboard.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
  <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<!-- 以上 head 部分从 book_list.html 赋值过来并加以修改 -->
 
<!-- 以下 body 部分可从 Bootstrap 网站上找相关代码 -->
<body>
 
<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
 
      <div class="panel panel-primary">
        <div class="panel-heading">添加书籍</div>
        <div class="panel-body">
          <form class="form-horizontal" action="/add_book/" method="post">
            <div class="form-group">
              <label for="book_title" class="col-sm-2 control-label">书名</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="book_title" name="book_title"
                    placeholder="书名">
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label">出版社</label>
              <div class="col-sm-10">
                <select class="form-control" name="publisher">
                  {% for publisher in publisher_list %}
                    <option value="{{ publisher.id }}">{{ publisher.name }}</option>
                  {% endfor %}
                </select>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-success">提交</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

修改过程：

先写一个 container

Django使用 Bootstrap 样式修改书籍列表过程解析

找一个面板，在 Bootstrap 的组件中可找到

Django使用 Bootstrap 样式修改书籍列表过程解析

复制代码，并进行修改

Django使用 Bootstrap 样式修改书籍列表过程解析

现在需要一个 form 表单，在 Bootstrap 的全局 CSS 样式中找

Django使用 Bootstrap 样式修改书籍列表过程解析

复制下面的代码，替换面板代码中的 Panel content，并进行修改

先修改 email 处

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

修改为：

<div class="form-group">
  <label for="book_title" class="col-sm-2 control-label">书名</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" id="book_title" name="book_title" placeholder="书名">
  </div>
</div>

再来修改 password 处，这里需要用到下拉列表，还是去 Bootstrap 上找

在 “菜单” -> "被支持的控件" 处

Django使用 Bootstrap 样式修改书籍列表过程解析

复制代码，并进行修改

<div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
  </div>
</div>

修改为：

<div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">出版社</label>
  <!-- 下拉列表 -->
  <div class="col-sm-10">
    <select class="form-control" name="publisher">
      {% for publisher in publisher_list %}
        <option value="{{ publisher.id }}">{{ publisher.name }}</option>
      {% endfor %}
    </select>
  </div>
</div>

接着修改剩下的部分

Django使用 Bootstrap 样式修改书籍列表过程解析

最后在 form 表单处添加 action 和 method

Django使用 Bootstrap 样式修改书籍列表过程解析

运行效果：

Django使用 Bootstrap 样式修改书籍列表过程解析

编辑书籍：

最后修改 edit_book.html

<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="https://v3.bootcss.com/favicon.ico" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 
  <title>编辑书籍</title>
  <!-- Bootstrap core CSS -->
  <link href="/static/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="/static/dashboard.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
  <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
 
<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
 
      <div class="panel panel-primary">
        <div class="panel-heading">编辑书籍</div>
        <div class="panel-body">
          <form class="form-horizontal" action="/edit_book/" method="post">
            <input type="text" style="display: none" name="id" value="{{ book_obj.id }}">
            <div class="form-group">
              <label for="book_title" class="col-sm-2 control-label">书名</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="book_title" name="book_title"
                    placeholder="书名" value="{{ book_obj.title }}">
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label">出版社</label>
              <div class="col-sm-10">
                <select class="form-control" name="publisher">
                  {% for publisher in publisher_list %}
                    {# 通过 if 条件判断来选择默认出版社 #}
                    {% if book_obj.publisher_id == publisher.id %}
                      {# 默认选择当前书籍关联的出版社 #}
                      <option selected value="{{ publisher.id }}">{{ publisher.name }}</option>
                    {% else %}
                      {# 其他的出版社不选中 #}
                      <option value="{{ publisher.id }}">{{ publisher.name }}</option>
                    {% endif %}
                  {% endfor %}
                </select>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-success">提交</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div> 
</body>
</html>

修改过程：

首先把 add_book.html 复制过去，然后修改相关标题，把 “添加书籍” 改为 “编辑书籍”

然后在 form 表单下一行添加一个有书籍 id 的 input 标签

Django使用 Bootstrap 样式修改书籍列表过程解析

然后在书名的那个 input 处添加一个 value

Django使用 Bootstrap 样式修改书籍列表过程解析

然后将下拉列表的出版社选择改为原 edit_book.html 的

Django使用 Bootstrap 样式修改书籍列表过程解析

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Django使用 Bootstrap 样式修改书籍列表过程解析

- Author -

Sch01aR#

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
May 09 Python
Python装饰器入门学习教程(九步学习)
Jan 28 Python
Python中set与frozenset方法和区别详解
May 23 Python
Python利用BeautifulSoup解析Html的方法示例
Jul 30 Python
Python输出各行命令详解
Feb 01 Python
python实现Decorator模式实例代码
Feb 09 Python
用python 批量更改图像尺寸到统一大小的方法
Mar 31 Python
如何用python整理附件
May 13 Python
python 检查是否为中文字符串的方法
Dec 28 Python
python之线程通过信号pyqtSignal刷新ui的方法
Jan 11 Python
浅谈PySpark SQL 相关知识介绍
Jun 14 Python
在linux系统下安装python librtmp包的实现方法
Jul 22 Python
python实现网站用户名密码自动登录功能
Aug 09 #Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
Aug 09 #Python
ORM Django 终端打印 SQL 语句实现解析
Aug 09 #Python
python实现读取excel文件中所有sheet操作示例
Aug 09 #Python
django ManyToManyField多对多关系的实例详解
Aug 09 #Python
python虚拟环境的安装和配置(virtualenv，virtualenvwrapper）
Aug 09 #Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
Aug 09 #Python
单管机(1) 电路(15) 发烧友(1) ICF-2010(1) AM(1) 春雷3P7(1) 耳机(1) 原理(1) 探测器(1) 实习报告(1)
You might like
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php常用数组函数实例小结
2016/12/29 PHP
JavaScript 学习技巧
2010/02/17 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
js实现聊天对话框
2020/02/08 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
python os模块简单应用示例
2019/05/23 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
Python常用数据分析模块原理解析
2020/07/20 Python
一文读懂Python 枚举
2020/08/25 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
python 实现控制鼠标键盘
2020/11/27 Python
Hawes & Curtis澳大利亚官网：英国经典服饰品牌
2018/10/29 全球购物
Ticketmaster意大利：音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
中学生学习保证书
2015/02/26 职场文书
2016新年晚会开场白
2015/12/03 职场文书
调研报告的主要写法
2019/04/18 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis
python多次执行绘制条形图
2022/04/20 Python