前端模板 - Anchor UI KIT 前言 今天介紹一款製作精良、開源、免費的 Bootstrap 模板 —— Anchor UI KIT 該模板使用的是Bootstrap v4版本 本文將介紹如何在Django中導入該模板的靜態資源包並使用 介紹 官方文檔 Anchor - a free Bo ...
前端模板 - Anchor UI KIT
前言
今天介紹一款製作精良、開源、免費的 Bootstrap 模板 —— Anchor UI KIT
該模板使用的是Bootstrap v4版本
本文將介紹如何在Django中導入該模板的靜態資源包並使用
介紹
官方文檔
Anchor - a free Bootstrap UI Kit (bootcss.com)
網站導航組成
進入文檔Docs後，可以看到 文件結構 和 組件HTML代碼 等等。
下載與配置
下載
點擊導航欄右側 Download 下載壓縮包
下載完成後解壓，可以看到目錄如下。因為我沒有在項目中用到Node JS，所以只拷貝了 ./assets 和 html 文件到項目根目錄中
拷貝完成後，就可以開始在Django配置靜態文件了
配置
在 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
因為Anchor UI KIT提供了 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> 標簽里
另外，這些是組件可自定義的類，包括顏色、大小、寬度等樣式，可以根據自己的喜好把它們添加到class屬性中
例如，下麵的代碼表示的屬性分別是：按鈕、底色、圓角、重陰影
<a href="#" class="btn btn-primary btn-round shadow-lg">Round</a>
