您的位置: 首页  >  文章  >  django 使用 bootstrap

django 使用 bootstrap

分类: 文章 • 2024-06-29 09:49:22

本人 不会使用 bootstrap 正在努力学习 。

先下载 bootstrap 的js/css/font文件 https://v3.bootcss.com/getting-started/#download
下载第一个就好 第二个是包含一些 网页实例的 合集包

首先创建 django项目 。创建 完成后 进行一些setting 设置 。

django-admin startproject Bootstarp
cd bootstrap
python manage.py startapp app

首先 在 项目 目录下 新建文件夹 static 用来 放置 bootstrap 的 css/js/font文件。
在setting中设置 如果 你的static 放在app 目录下 则无需该设置 因为 默认有
STATIC_URL = ‘/static/’

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

然后 将我们下载好的 bootstrap 解压 得到的文件夹bootstrap 复制到 static目录下.这时 我们的目录结构应该是这样的django 使用 bootstrap
新建templates 文件
在其中创建两个 HTML 文件 一个 base.html 一个 index.html
base.html作为基础模板 index 作为展示 模板继承 base.html
创建后 将templates路径加入到 setting设置中
TEMPLATES 的 设置为

'DIRS': [os.path.join(BASE_DIR, 'templates'), ],

然后 修改 base.html 文件 。
首先 指定加载本地文件 路径

<!DOCTYPE html>
{% load staticfiles %}

然后 加入一个 我们想要 使用的 bootstrap 组件语法 。。直接 bootstrap 赋值就好。比如 导航条https://v3.bootcss.com/components/#navbar-default
复制后 放到 base.html 中

<body>

<nav class="navbar navbar-default">
	......
</nav>

</body>

然后 在 index.html 模板中 只用写一句话 继承 base.html

{% extends 'base/base.html' %}

然后 设置 路由 指定视图函数 使用 render 返回 即可 这 使用过django的应该都知道。
当然 这时候 是 既没有 样式 也 不能操作的
django 使用 bootstrap
我们只用在 base.html 中 加入 bootstrap 的 css/js 即可

 <head>
    <meta charset="UTF-8">
    <title>Base</title>

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

</head>

我们下载的 bootstrap资源中 是没有 jQuery的 但是 bootstrap js的使用需要 用到 jQuery y因此需要自己下载一个 一般 版本高于 1.9的 都可以
加入后 再次访问
django 使用 bootstrap
已经有了样式 比我们自己写 前端代码 快了很多 主要是我不会写 前端。
然后 我们 可以在 base 中 设置一些 block 在 index中实现 比如
base中预留 page_content

  {% block page_content %}
      <p>基础 页面</p>
  {% endblock %}

index.html 中 可以

 {% block page_content %}
    <h1>欢迎来到首页<small>首页</small></h1>
{% endblock %}

django 使用 bootstrap

大概就是这样 。

相关推荐