Django中引入bootstrap的详细图文详解

下面是Django中引入bootstrap的详细攻略和示例说明：

1. 安装Bootstrap

首先，我们需要安装Bootstrap。Bootstrap是一个开源的前端框架，提供了一系列易于使用的HTML、CSS和JavaScript库，可以快速构建美观的响应式网站和应用程序。

有很多种方法可以安装Bootstrap，例如从官方网站下载、使用CDN、使用NPM等。这里我们介绍使用CDN的方法，因为它最为简单。

在网页中添加如下代码，即可使用Bootstap的CSS和JavaScript：

<!-- 引入Bootstrap的CSS和JavaScript -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

这里使用的CDN是Staticfile，它是一个免费的CDN服务，提供了许多流行的开源库的文件。

2. 在Django中使用Bootstrap

在Django项目中使用Bootstrap，有以下几种方法：

2.1 使用Bootstrap模板

Bootstrap提供了一些预设样式的HTML模板，可以快速构建常见的页面元素。我们可以直接在Django项目中使用这些模板。

首先，需要在Django中安装Bootstrap。可以使用pip命令安装django-bootstrap4：

pip install django-bootstrap4

然后，在Django中的settings.py文件中添加以下配置：

INSTALLED_APPS = [
    # ...
    'bootstrap4',
    # ...
]

接下来，我们就可以使用Bootstrap提供的模板来构建页面。例如，在Django中定义一个基本的HTML模板，使用Bootstrap提供的导航栏模板：

{% load bootstrap4 %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>

    {% bootstrap_css %}
</head>
<body>

{% bootstrap_navbar brand="My Website" %}
{% block content %}{% endblock %}

{% bootstrap_javascript jquery='full' %}

</body>
</html>

在这个模板中，我们使用了{% load bootstrap4 %}来加载Bootstrap的模板标签，并使用{% bootstrap_navbar %}来添加一个导航栏。这里的navbar标签会根据指定的参数自动生成一个Bootstrap导航栏。我们还使用了{% bootstrap_css %}和{% bootstrap_javascript %}来导入Bootstrap的CSS和JavaScript文件。

2.2 在Django中使用Bootstrap样式

如果需要自定义页面的样式，我们可以直接在Django中使用Bootstrap提供的CSS类。

首先，在HTML页面中引入Bootstrap的CSS文件：

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

然后，在页面元素中使用Bootstrap提供的CSS类。例如，我们可以定义一个包含表格的页面，使用Bootstrap的样式来美化表格：

{% extends 'base.html' %}

{% block title %}My Website - Table{% endblock %}

{% block content %}
<div class="container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>28</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>23</td>
        <td>Female</td>
      </tr>
    </tbody>
  </table>
</div>
{% endblock %}

在这个页面中，我们使用了Bootstrap的table、table-bordered等样式来美化表格。这些样式可以通过查看Bootstrap的官方文档来了解。

3. 示例说明

下面给出两个示例，分别展示了上面两种方法的使用。

示例1：使用Bootstrap模板

在Django中创建一个新的项目：

django-admin startproject myproject

在项目中创建一个名为common的应用：

cd myproject
python manage.py startapp common

在common应用中创建一个名为base.html的模板。编辑这个模板，添加以下内容：

{% load bootstrap4 %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}My Website{% endblock %}</title>

    {% bootstrap_css %}
</head>
<body>

{% bootstrap_navbar brand="My Website" %}
{% block content %}{% endblock %}

{% bootstrap_javascript jquery='full' %}

</body>
</html>

在common应用中创建一个名为home.html的页面。编辑这个页面，添加以下内容：

{% extends 'base.html' %}

{% block title %}My Website - Home{% endblock %}

{% block content %}
<div class="container">
  <h1>Welcome to my website!</h1>
  <p>This is an example of a Django project that uses Bootstrap for styling.</p>
</div>
{% endblock %}

在项目的urls.py文件中添加以下内容：

from django.urls import path
from common import views

urlpatterns = [
    path('', views.home, name='home'),
]

在common应用的views.py文件中添加以下内容：

from django.shortcuts import render

def home(request):
    return render(request, 'home.html')

启动Django服务器：

python manage.py runserver

访问http://127.0.0.1:8000/，可以看到一个带有导航栏的页面，点击导航栏上的Home链接，可以看到一个包含欢迎信息的页面。这个页面使用了Bootstrap模板来构建导航栏。

示例2：在Django中使用Bootstrap样式

在common应用中创建一个名为table.html的页面。编辑这个页面，添加以下内容：

{% extends 'base.html' %}

{% block title %}My Website - Table{% endblock %}

{% block content %}
<div class="container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>28</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>23</td>
        <td>Female</td>
      </tr>
    </tbody>
  </table>
</div>
{% endblock %}