![[D02]Bootstrap免费精选模板推荐,附上Django中使用模板教程](/static/background/33.jpg "[D02]Bootstrap免费精选模板推荐,附上Django中使用模板教程")
前端模板 - Anchor UI KIT
前言
本文将介绍如何在Django中导入该模板的静态资源包并使用
介绍
官方文档
预览
官方文档主页包括了各组件的预览效果，下面选取部分进行展示
- 巨幕
- 按钮
- 导航栏
- 表单
- 模态框（遮罩窗体）
网站导航组成
文件结构 和 组件HTML代码 等等。
下载与配置
下载
./assets 和 html 文件到项目根目录中
配置
在 settings.py 文件的最下方修改以下配置项：
# Static files (CSS, JavaScript, Images——用于放置CSS, JavaScript, Images等静态资源
# https://docs.djangoproject.com/en/3.2/howto/static-files/
# 别名
STATIC_URL = '/static/'
# 静态文件所在目录
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "assets", # 根目录下的assets文件夹
]
我发现Django 3.2版本不再使用os库获取文件路径，如果还想使用之前的语法，需要先
import os
BASIC TEMPLATE 基本模板，所以稍作修改就可以复制到 HTML 中
html：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="apple-touch-icon" sizes="76x76" href="/static/img/favicon.ico">
<link rel="icon" type="image/png" href="/static/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Site Title</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- CSS -->
<link href="/static/css/main.css" rel="stylesheet"/>
<link href="/static/css/vendor/aos.css" rel="stylesheet"/>
</head>
<body>
<!-- 这里添加你的布局容器、组件代码 -->
<main> My content goes here </main>
<!-- Javascript -->
<script src="/static/js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="/static/js/vendor/popper.min.js" type="text/javascript"></script>
<script src="/static/js/vendor/bootstrap.min.js" type="text/javascript"></script>
<script src="/static/js/functions.js" type="text/javascript"></script>
</body>
</html>
使用
接下来就可以在Docs中把你喜欢的组件代码Copy一下，放在 <body> 标签里
<a href="#" class="btn btn-primary btn-round shadow-lg">Round</a>