【D02】Bootstrap免费精选模板推荐,附上Django中使用模板教程

前端模板 - Anchor UI KIT

前言

今天介绍一款制作精良、开源、免费的 Bootstrap 模板 —— Anchor UI KIT

该模板使用的是Bootstrap v4版本

本文将介绍如何在Django中导入该模板的静态资源包并使用

介绍

官方文档

Anchor - a free Bootstrap UI Kit (bootcss.com)

网站导航组成

image

进入文档Docs后,可以看到 文件结构组件HTML代码 等等。

下载与配置

下载

点击导航栏右侧 Download 下载压缩包

image

下载完成后解压,可以看到目录如下。因为我没有在项目中用到Node JS,所以只拷贝了 ./assetshtml 文件到项目根目录中

image

拷贝完成后,就可以开始在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

image

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属性中

image

例如,下面的代码表示的属性分别是:按钮、底色、圆角、重阴影

<a href="#" class="btn btn-primary btn-round shadow-lg">Round</a>

image

本文作者:stu(dying)

本文链接:https://www.cnblogs.com/DingyLand/p/pomnote_02_.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   stu(dying)  阅读(671)  评论(0编辑  收藏  举报
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起
🔑
点击右上角即可分享
微信分享提示
  1. 1 Dancing with my phone (Explicit) HYBS
  2. 2 Catch (Feat. Hwa Sa) Epik High (에픽하이)
  3. 3 건물 사이에 피어난 장미 (Rose Blossom) H1-KEY
  4. 4 The Weekend 88rising,BIBI
  5. 5 天气未报 余佳运
  6. 6 和你 余佳运
  7. 7 九月底 余佳运
  8. 8 POP/STARS K/DA,Madison Beer,(G)I-DLE,Jaira Burns
  9. 9 Uh-Oh (G)I-DLE
  10. 10 For You (G)I-DLE
  11. 11 데이지(雏菊) PENTAGON
  12. 12 BAD PENTAGON
Catch (Feat. Hwa Sa) - Epik High (에픽하이)
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

Catch (Feat. Hwa Sa) - Epik High (에픽하이)

词:Tablo/Mithra Jin

曲:Tukutz/Tablo/Will Leong/Anthony Watts

Produced by:Tukutz/Tablo/Will Leong/Anthony Watts

Vocals by:Hwa Sa/Tablo

Recorded by:Tukutz @Knowhere, Seoul

Mixed by:mr.sync @JD Studio, Seoul

Mastered by:Chris Gehringer @Sterling Sound, NYC

Executive Produced by:Epik High

发行:RYCE MUSIC GROUP 白米范(北京)文化传播有限公司

I can never lose

Whatchu haters gon do

Whatchu haters gon do

Doobi doobi do

Doobi doobi do

Doobi doobi do

I don't make the rules

You'll never catch me putting on a noose

God is real

God is real

I'm the living proof

Wishin' that we fail

Wishin' that we fail

그건 망상증

그건 망상증

Epik High new **** to make your car sound good

It's all time high

Baby I've been on one

My whole life

활짝 피어있는 동공

쉽지 않아도 해냈네

난 그저 self-made 아닌 handmade

내 손이 만든 성공

다들 본 적 없는 나의 성격 지적하네

내 MBTI는 IDGAF

한때 날 지지했대

그래 thank u very much

And **** you

I cannot complain tho

Cuz they know

자꾸 날 찔러대도

자꾸 날 찔러대도

시간만 낭비라고

'K' thanks tho

Oo oh oh

Bye bye

Bye bye

그럼 잘 지내고

Bye bye 멀리 안 나와도 돼

좀 천천히 가도

숨이 차 멈춰 서도

숨이 차 멈춰 서도

잠시 넘어져도

잠시 넘어져도

You'll never catch me

You'll never catch me

내 걱정 말고

어둠 속에서도

어둠 속에서도

I'll shine like a diamond

I'll shine like a diamond

You'll never catch me

You'll never catch me

우리는 실패를 배팅해도

시비 거는 너보다

성공할 확률이 높아

굳이 눈 가려 봤자

네 앞길만 가려

우리 발자국 밟고 뒤쫓아

내리막길 걸을 때는

구름 위로 slide

적대 시기 질투

위로 근두운 타

발 헛디뎌 바닥으로 떨어질 때도

절망 안에 춤춰 boom boom pow

날 때부터 길이 정해진 듯

See me

무대와는 어느새 20년 지기

그 어느 때보다 가벼워

어깨 위 짐이

이제서야 음악이

내 직업 아닌 취미

잊어버렸지 삶의 고단함

행복 안에 현실감이 고장 나

무심한 세월이

기억을 덮어버린대도

우린 여전히 all time high

I cannot complain tho

Cuz they know

자꾸 날 찔러대도

자꾸 날 찔러대도

시간만 낭비라고

'K' thanks tho

Oo oh oh

Bye bye

Bye bye

그럼 잘 지내고

Bye bye 멀리 안 나와도 돼

좀 천천히 가도

숨이 차 멈춰 서도

숨이 차 멈춰 서도

잠시 넘어져도

잠시 넘어져도

You'll never catch me

You'll never catch me

내 걱정 말고

어둠 속에서도

어둠 속에서도

I'll shine like a diamond

I'll shine like a diamond

You'll never catch me

You'll never catch me

Call me

When you're feelin' down

When you're feelin' down

Before u hit the ground

Before u hit the ground

I'll be there to catch you

I'll be there to catch you

Call me

When you're feelin' down

When you're feelin' down

Before u hit the ground

Before u hit the ground

I'll be there to catch you

I'll be there to catch you

Call me

When you're feelin' down

When you're feelin' down

Before u hit the ground

Before u hit the ground

I'll be there to catch you

I'll be there to catch you

Baby

When you're feelin' down

When you're feelin' down

I'll always be around

I'll always be around

To catch u when u fall

To catch u when u fall

I cannot complain tho

Cuz they know

자꾸 날 찔러대도

자꾸 날 찔러대도

시간만 낭비라고

'K' thanks tho

Oo oh oh

Bye bye

Bye bye

그럼 잘 지내고

Bye bye 멀리 안 나와도 돼

Catch

Catch

Catch