Django5.0项目-使用Bootstrap的三种方法

前言

bootstrap本质上是别人已帮我们写好的css样式文件，我们把css文件拿过来稍作微调即可使用。节约了我们手写css样式的时间。

官网 Bootstrap中文网 (bootcss.com)，当前bootstrap有三个版本，分别是3、4、5。此处以3为例

1、直接使用远程链接

优点，学习方便。缺点，断网即无法使用

1.1、取登录页面为例

 1.2、查看源码

 1.3、选用如下模式，供自己的网页中使用

 1.4、拿到 https://v3.bootcss.com/dist/css/bootstrap.min.css

 1.5、html使用样式之前

 

 1.6、html使用样式之后

 

 1.7、断网之后，样式就没了。

 

 2、插件方式 pip install django-bootstrap3

2.1、安装好插件

通过插件的形式，实测也会加载不出来。

 2.2、settings.py，INSTALLED_APPS, 添加上 bootstrap3

 2.3、html页面，配置 {% load bootstrap3 %} {% bootstrap_css %}

{% load bootstrap3 %}
{% bootstrap_css %}

 效果

 3、下载文件放置static目录下

3.1、下载并解压

 3.2、解压后目录放置static目录下

 3.3、配置静态文件设置

确保settings.py中的STATIC_URL设置指向你的静态文件目录，并且如果静态文件不在默认的static目录下，你还需要设置STATICFILES_DIRS。

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

 3.4、在模板中引用Bootstrap

在你的Django模板中，使用{% load static %}加载静态文件模板标签，然后使用{% static %}标签来引用Bootstrap的CSS和JavaScript文件。

{% load static %}
    <link href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}" rel="stylesheet">

 

 

 3.5、补充-收集静态文件（生产环境）

在开发过程中，Django的开发服务器会自动为你提供STATIC_URL路径下的静态文件。但是，在生产环境中，你需要收集所有的静态文件到一个单独的目录中，以便你的Web服务器可以提供它们。你可以使用collectstatic命令来完成这个任务：

python manage.py collectstatic

这会将所有静态文件收集到STATIC_ROOT指定的目录中。确保你的Web服务器配置指向这个目录来提供静态文件。

遵循这些步骤后，你就可以在Django项目中成功引用和使用下载的Bootstrap了。