Python语言技术文档

微信小程序技术文档

php语言技术文档

jsp语言技术文档

asp语言技术文档

C#/.NET语言技术文档

html5/css技术文档

javascript

点击排行

您现在的位置:首页 > 技术文档 > Python网站web

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

来源:中文源码网    浏览:267 次    日期:2024-05-18 14:41:52
【下载文档:  Django使用 Bootstrap 样式修改书籍列表过程解析.txt 】


Django使用 Bootstrap 样式修改书籍列表过程解析
展示书籍列表:
首先修改原先的 book_list.html 的代码:











书籍列表管理












书籍管理页面




书籍列表


























{% for book in book_list %}







{% endfor %}

#id书名出版社名称操作
{{ forloop.counter }}{{ book.id }}{{ book.title }}{{ book.publisher.name }}
删除
编辑














修改过程:
运行效果:
添加书籍:
再来修改 add_book.html











添加书籍













添加书籍






placeholder="书名">





















修改过程:
先写一个 container
找一个面板,在 Bootstrap 的组件中可找到
复制代码,并进行修改
现在需要一个 form 表单,在 Bootstrap 的全局 CSS 样式中找
复制下面的代码,替换面板代码中的 Panel content,并进行修改
先修改 email 处






修改为:






再来修改 password 处,这里需要用到下拉列表,还是去 Bootstrap 上找
在 “菜单” -> "被支持的控件" 处
复制代码,并进行修改






修改为:







接着修改剩下的部分
最后在 form 表单处添加 action 和 method
运行效果:
编辑书籍:
最后修改 edit_book.html











编辑书籍











编辑书籍







placeholder="书名" value="{{ book_obj.title }}">





















修改过程:
首先把 add_book.html 复制过去,然后修改相关标题,把 “添加书籍” 改为 “编辑书籍”
然后在 form 表单下一行添加一个有书籍 id 的 input 标签
然后在书名的那个 input 处添加一个 value
然后将下拉列表的出版社选择改为原 edit_book.html 的
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持中文源码网。

相关内容