前端模板 - 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>

【D02】Bootstrap免费精选模板推荐，附上Django中使用模板教程的更多相关文章

  1. Django中ORM模板常用属性讲解

    学习了ORM模板中常用的字段以及使用方法,具体如下: from django.db import models # Create your models here. # 如果要将一个普通的类映射到数据 ...

  2. Django中的模板和分页

    模板 在Templates中添加母版: - 母版...html 母版(master.html)中可变化的地方加入: {%block content%}{%endblock%} 在子版 (usermg. ...

  3. C++的模板特化 和 STL中iterator_traits模板的偏特化

    C++中有类模板和函数模板,它们的定义如下所示: 类模板: template<class T1,class T2> class C { //... }; 函数模板: template< ...

  4. Django中的模板渲染是什么

    首先建立一个页面 在views.py中增加一个方法 配置URL 如何实现的呢 这就是渲染,传递的数据不同显示的数据也不同.Django里的渲染引擎和Jinja的虽然不同但是语法基本通用.现在明白什么叫 ...

  5. Django中的模板变量

    示例文件: template_variable_demo.zip

  6. 模板引擎－vue中的模板如何被解析，指令如何处理

    模板是什么 <div id='app'> <div> <input v-model="title"/> <button v-on:clic ...

  7. Django补充之模板语言

    路由系统 Django页面详情以及分页 举个例子: 有一组后台数据,需要展示到页面上,但由于数据量较大,那就需要做分页了吧,那么怎么才能将页面详情和分页都融合进去呢,Django里的路由系统加上正则表 ...

  8. django 中模板语言的各种用法

    模板 1.视图中使用模板 模版的创建过程,对于模版,其实就是读取模版(其中嵌套着模版标签),然后将 Model 中获取的数据插入到模版中,最后将信息返回给用户 1.普通方法:HTML被直接硬编码在 P ...

  9. 如何合理利用iMindMap中的模板创建思维导图

    思维导图的制作并不是一项简单的工作,尤其是对许多工作或学习有特殊要求的朋友而言,当我们需要应对不同场景制作不同的思维导图时,总不能都靠自己从头制作,这样难度比较大也比较耗时.而iMindMap(win ...

  10. Django+bootstrap启动登录模板页面（Django三）

    上次用Django启动了我的第一个页面 具体步骤参考:初步启动DjangoDjango启动第一个页面但是页面非常简陋,所以我从网上找了个模板,下载网址:免费下载模板,解压后内部文件如下: 效果图:下面 ...

随机推荐

  1. 装了google浏览器不代表就能使用google搜索

    第一步:装google浏览器 第二步:连接外网(FQ的本质就是连接一个服务器) 第三步:输入网址google.com 跳转到此页面即成功 现在的想法是

  2. connect及bind、listen、accept背后的三次握手

    如图所示打上断点,分别找出connect() bind() listen() accpet()对应的函数 源码在上一次作业中已经分析过了 https://www.cnblogs.com/qwertyu ...

  3. Angular Material TreeTable Component 使用教程

    一. 安装 npm i ng-material-treetable --save npm i @angular/material @angular/cdk @angular/animations -- ...

  4. 阿里云CentOS7 下部属nginx+uwsgi+python3+django

    安装依赖包 yum -y groupinstall "Development tools" yum install openssl-devel bzip2-devel expat- ...

  5. 制作可以显示GIF动图的activeX 控件

    因为工作需要,我需要一个可以显示gif 动图的控件,用来在VBS中显示动图,结果找了半天发现根本没有这样的控件,所以只能搜集资料自己来制作一个. 下面记录一下步骤: 1. 下载 PictureEx.h ...

  6. ESP32开发环境搭建 IDF3.3.5+VScode

    1.  软件准备: ① ESP-IDF:包含ESP32 API和用于操作工具链的脚本. ②工具链msys32:用于编译ESP32应用程序. ③编辑工具Visual Studio Code 注意:工具链 ...

  7. 如何通过C++ 将数据写入 Excel 工作表

    直观的界面.出色的计算功能和图表工具,使Excel成为最流行的个人计算机数据处理软件.在独立的数据包含的信息量太少,而过多的数据又难以理清头绪时,制作成表格是数据管理的最有效手段之一.这样不仅可以方便 ...

  8. DVWA-XSS (Stored) 存储型XSS

    存储型XSS,顾名思义,就是会传入数据库,长久的使用,常见为留言板,用户信息资料. LOW 审计源码 <?php // 是否提交 btnSign if( isset( $_POST[ 'btnS ...

  9. Android笔记--文本显示

    文本显示 设置文本内容 方式一: 在.xml文件中利用android:text属性设置文本 新创建一个.xml文件示范一下: 方式二: 在java代码中调用文本视图对象的setText方法设置文本 还 ...

  10. webgl 系列 —— 渐变三角形

    其他章节请看: webgl 系列 渐变三角形 本文通过一个渐变三角形的示例逐步分析:varying变量.合并缓冲区.图形装配.光栅化.varying 内插 绘制三个点v1 需求:绘制三个相同颜色的点, ...