首页 > 行业资讯 > Django教程-带有 Bootstrap 的 Django

Django教程-带有 Bootstrap 的 Django

时间：2023-08-12 来源：浏览：

Django教程-带有 Bootstrap 的 Django

点击关注 Python架构师

Python架构师

微信号 gh_1d7504e4dee1

功能介绍回复：python，领取Python面试题。分享Python教程，Python架构师教程，Python爬虫，Python编程视频，Python脚本，Pycharm教程，Python微服务架构，Python分布式架构，Pycharm注册码。

收录于合集

#Django开源项目 27 个

#Django教程 26 个

#python web教程 35 个

#python编程 168 个

#python教程 124 个

整理： python架构师

Bootstrap 是一个用于在 Web 应用程序中创建用户界面的框架。它提供了css、js和其他工具来帮助创建所需的界面。

在Django中，我们可以使用bootstrap来创建更加用户友好的应用程序。

为了实现bootstrap，我们需要遵循以下步骤。

1.下载引导程序

访问官方网站 https://getbootstrap.com 将 bootstrap 下载到本地计算机。它是一个zip文件，解压它并看到它包含两个文件夹。

资源分享

点击领取：最全Python资料合集

2. 创建目录

在创建的应用程序中创建一个名为static 的目录，并将 css 和 jss 文件夹放入其中。这些文件夹包含大量文件，请参见屏幕截图。

3. 创建模板

首先在应用程序内创建一个 templates 文件夹，然后创建一个 index.htm 文件来实现（链接）引导 css 和 js 文件。

4. 加载Boostrap

将引导文件加载到静态文件夹中。使用以下代码。

{% load staticfiles %}

并通过提供文件位置（源）来链接文件。请参阅index.html 文件。

<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Title </ title > {% load staticfiles %} < link href = "{% static ’css/bootstrap.min.css’ %}" > < script src = "{% static ’bootstrap.min.js’ %}" > </ script > < script > alert(); </ script > </ head > < body > </ body > </ html >

在此模板中，我们链接了两个文件，第一个是 bootstrap.min.css，第二个是 bootstrap.min.js。让我们看看如何在应用程序中使用它们。

假设，如果我们不使用 bootstrap，我们的 html 登录看起来像这样：

<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title > login </ title > </ head > < body > < form action = "/save" method = "post" > < div class = "form-group" > < label for = "email" > Email address: </ label > < input type = "email" class = "form-control" id = "email" > </ div > < div class = "form-group" > < label for = "pwd" > Password: </ label > < input type = "password" class = "form-control" id = "pwd" > </ div > < div class = "checkbox" > < label > < input type = "checkbox" > Remember me </ label > </ div > < button type = "submit" class = "btn btn-primary" > Submit </ button > </ form > </ body > </ html >

输出：

加载引导文件后。我们的代码如下所示：

// 索引.html

<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title > login </ title > {% load staticfiles %} < link href = "{% static ’css/bootstrap.min.css’ %}" rel = "stylesheet" > < script src = "{% static ’js/bootstrap.min.js’ %}" > </ script > </ head > < body > < form action = "/save" method = "post" > < div class = "form-group" > < label for = "email" > Email address: </ label > < input type = "email" class = "form-control" id = "email" > </ div > < div class = "form-group" > < label for = "pwd" > Password: </ label > < input type = "password" class = "form-control" id = "pwd" > </ div > < div class = "checkbox" > < label > < input type = "checkbox" > Remember me </ label > </ div > < button type = "submit" class = "btn btn-primary" > Submit </ button > </ form > </ body > </ html >

输出：

现在，我们的登录表单看起来好多了。这就是引导程序的优点。

最后，项目结构如下所示。

Django教程-带有 Bootstrap 的 Django

Django教程-带有 Bootstrap 的 Django

微信公众号

小编微信