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

下面是关于“Django使用 Bootstrap 样式修改书籍列表过程解析”的完整攻略，包含两条示例说明：

核心思路

使用 Bootstrap 样式修改书籍列表涉及到以下核心思路：

1. 引入 Bootstrap 样式文件

在 Django 中使用 Bootstrap 样式需要先引入相关 CSS 和 JavaScript 文件。可以从 Bootstrap 官网下载所需的文件，并将其放置在项目静态文件夹中。在 HTML 模板中使用 link 标签和 script 标签分别引入 CSS 和 JavaScript 文件。

1. 使用 Bootstrap 样式类

Bootstrap 提供了丰富的样式类，可以直接应用到 HTML 元素上。例如，要将表格设为 Bootstrap 样式，只需在 <table> 标签上添加 table 类即可。

1. 通过模板继承来修改官方视图

Django Admin 默认提供了多个视图用于展示书籍列表、添加书籍等操作，但这些视图往往是直接调用 Django Admin 官方提供的模板，因此难以满足自定义需求。在 Django 中，可以通过模板继承的方式来覆盖默认模板，以实现自定义效果。

具体步骤

下面分两条示例说明具体步骤：

示例 1：修改书籍列表视图

1. 在项目静态文件夹中引入 Bootstrap 样式文件

可以从 Bootstrap 官网下载所需的 CSS 和 JavaScript 文件，并将其放置在项目的静态文件夹（如 static 文件夹）中：

<link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
<script src="{% static 'jquery.min.js' %}"></script>
<script src="{% static 'bootstrap.min.js' %}"></script>

1. 创建自定义 HTML 模板

在项目中创建自定义的 HTML 模板来扩展原有的 Book 列表视图。可以将该模板命名为 book_list.html，并保存在网站的模板文件夹中（如 templates 文件夹）。该模板需要继承 Django Admin 默认使用的 change_list.html 模板，并在其中添加自己的内容。

{% extends 'admin/change_list.html' %}

{% block content %}
<div class="container">
  <h1>Book List</h1>
  <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Author</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      {% for book in object_list %}
      <tr>
        <td>{{ book.id }}</td>
        <td>{{ book.title }}</td>
        <td>{{ book.author }}</td>
        <td>{{ book.price }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}

1. 在自定义视图中使用自定义模板

在自定义视图中，使用 ModelAdmin 的 change_list_template 属性来指定使用自定义模板。需要将 change_list_template 设置为自定义模板的路径，例如：

@admin.register(Book)
class BookAdmin(admin.ModelAdmin):
    change_list_template = 'admin/book_list.html'

示例 2：使用 Bootstrap 样式修改搜索框样式

1. 在项目静态文件夹中引入 Bootstrap 样式文件

与示例 1 相同，需要先将所需的 Bootstrap 样式文件引入到项目中。可以在模板文件中使用以下代码来引入：

<link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
<script src="{% static 'jquery.min.js' %}"></script>
<script src="{% static 'bootstrap.min.js' %}"></script>

1. 覆盖 Django 默认的搜索框 CSS 样式

在自定义的 HTML 模板中，可以使用 Bootstrap 样式来覆盖 Django 默认的搜索框样式。在模板中添加以下样式代码即可：

input[type='text'] {
    width: 200px;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
    padding: 6px 12px;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

1. 在自定义视图中使用自定义模板

在自定义视图中，可以使用 ModelAdmin 的 search_fields 属性来指定用于搜索的字段。搜索框样式会自动应用到搜索框上。例如：

@admin.register(Book)
class BookAdmin(admin.ModelAdmin):
    search_fields = ['title', 'author']