django5博客项目实战-用bootstrap5实现导航条

最新推荐文章于 2024-10-08 12:37:10 发布

繁华c

最新推荐文章于 2024-10-08 12:37:10 发布

阅读量453

点赞数 4

文章标签： python django 后端

本文链接：https://blog.csdn.net/u013342594/article/details/142712636

版权

1.新建一个django项目

打开项目

新建一个app blog

python manage.py startapp blog

settings.py注册app

INSTALLED_APPS = [
    'blog'
]

根目录中创建templates文件夹

并在setting.py中设置下templates参数

'DIRS': [BASE_DIR / 'templates']

2.初始化项目代码

在templates文件夹中创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
</head>
<body>
我的博客
</body>
</html>

blog app中views.py中创建一个index视图函数

from django.shortcuts import render

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

在blog中新建一个urls.py，并加入如下代码

from django.urls import path
from . import views

app_name = 'blog'

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

在主urls.py中引入app的路由

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('blog.urls'))
]

运行项目，测试访问

3.导入bootstrap5静态文件

在项目根目录创建一个static文件，并且导入bootstrap5静态文件

bootstrap5静态文件下载

在settings.py中的TEMPLATES/OPTIONS添加'builtins':['django.templatetags.static']，这样以后在模版中就可以直接使用static标签

在setttings.py中添加静态文件夹路径

STATICFILES_DIRS = [
	BASE_DIR / "static"
]

4.制作bootstrap5导航条

html页面引入bootstrap5静态文件

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

到bootstrap网站上可以去查找样式事例

https://getbootstrap.com/https://getbootstrap.com/docs/5.3/examples/

复制导航条样式

粘贴到index.html的body中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
    <link rel="stylesheet" href="{% static 'bootstrap5/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap5/popper.min.js' %}"></script>
    <script src="{% static 'bootstrap5/bootstrap.min.js' %}"></script>
</head>
<body>
<header class="p-3 text-bg-dark">
    <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
          <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
        </a>

        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
          <li><a href="#" class="nav-link px-2 text-secondary">Home</a></li>
          <li><a href="#" class="nav-link px-2 text-white">Features</a></li>
          <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
          <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
          <li><a href="#" class="nav-link px-2 text-white">About</a></li>
        </ul>

        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
          <input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..." aria-label="Search">
        </form>

        <div class="text-end">
          <button type="button" class="btn btn-outline-light me-2">Login</button>
          <button type="button" class="btn btn-warning">Sign-up</button>
        </div>
      </div>
    </div>
  </header>
</body>
</html>

然后访问下查看效果

修改展示下logo

logo下载地址：https://img-home.csdnimg.cn/images/20201124032511.png

修改下背景颜色text-bg-dark改为text-bg-light

添加边框border-bottom

修改导航文字样式，以及修改搜索框，修改注册登录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
    <link rel="stylesheet" href="{% static 'bootstrap5/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap5/popper.min.js' %}"></script>
    <script src="{% static 'bootstrap5/bootstrap.min.js' %}"></script>
</head>
<body>
<header class="p-3 text-bg-light border-bottom">
    <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
            <img src="{% static 'image/logo.png' %}" alt="" height="40">
        </a>

        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
          <li><a href="#" class="nav-link px-2 text-secondary">首页</a></li>
          <li><a href="#" class="nav-link px-2 text-secondary">发布博客</a></li>
        </ul>

        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
          <input type="search" class="form-control" placeholder="搜索..." aria-label="Search">
        </form>

        <div class="text-end">
          <button type="button" class="btn btn-outline-primary me-2">登录</button>
          <button type="button" class="btn btn-primary">注册</button>
        </div>
      </div>
    </div>
  </header>
</body>
</html>

重新访问下效果如下