Django Bootstrap开发笔记03 - Bootstrap环境配置

https://v3.bootcss.com/getting-started/#download下载bootstrap-3.3.7-dist.zip包
在mysite/personal/文件夹下创建static文件夹
将下载bootstrap-3.3.7-dist.zip包解压，将里面的/css/、/fonts/和/js/拷贝至上面创建的static文件夹中
修改\personal\templates\personal\header.html文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head><title>Harrison Kinsley</title><meta charset="utf-8" />{% load staticfiles %}<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/><meta name="viewport" content = "width=device-width, initial-scale=1.0"><style type="text/css">html,body {height:100%}</style>
</head>
<body class="body" style="background-color:#f6f6f6"><div class="container-fluid" style="min-height:95%; "><div class="row"><div class="col-sm-2"><br><center><img src="{% static 'personal/img/profile.ico' %}" class="responsive-img" style='max-height:100px;' alt="face"></center></div><div class="col-sm-10"><br><center><h3>Programming, Teaching, Entrepreneurship</h3></center></div></div><hr><div class="row"><div class="col-sm-2"><br><br><div class="well bs-sidebar" id="sidebar" style="background-color:#fff"><ul class="nav nav-pills nav-stacked"><li><a href='/'>Home</a></li><li><a href='/blog/'>Blog</a></li><li><a href='/contact/'>Contact</a></li></ul></div> <!--well bs-sidebar affix--></div> <!--col-sm-2--><div class="col-sm-10"><div class='container-fluid'><br><br>{% block content %}{% endblock %}</div></div></div></div><footer><div class="container-fluid" style='margin-left:15px'><p><a href="#" target="blank">Contact</a> | <a href="#" target="blank">LinkedIn</a> | <a href="#" target="blank">Twitter</a> | <a href="#" target="blank">Google+</a></p></div></footer>
</body>
</html>

运行结果如图所示：

Django Bootstrap开发笔记03 - Bootstrap环境配置相关推荐

ESP32_WIFI Mesh学习笔记1---Ardino IDE 环境配置
ESP_WIFI MESH学习笔记1-Ardino IDE 环境配置文章目录 ESP_WIFI MESH学习笔记1---Ardino IDE 环境配置前言一.Arduino IDE配置问题二. ...
Xamarin Anroid开发教程之验证环境配置是否正确
Xamarin Anroid开发教程之验证环境配置是否正确经过前面几节的内容已经把所有的编程环境设置完成了,但是如何才能确定所有的一切都处理争取并且没有任何错误呢?这就需要使用相应的实例来验证,本节 ...
安卓开发常用软件及环境配置
安卓开发常用软件及环境配置修改文件权限 chmod u=rwx,g=r,o=r file.txt 安卓studio代理配置 systemProp.http.proxyHost=127.0.0.1 s ...
【极创】arduino入门之ESP8266和ESP32开发板的arduino环境配置
一.前言在这个万物智联时代,廉价的ESP系列芯片与开发板成为众多开发者首选,其内包含强大的无线通讯功能,可以满足开发者们绝大部分的开发需求. 二.ESP8266与ESP32开发板的arduino环境 ...
Windows上最全wsl2使用配置，包含基础配置、高级配置、开发工具、机器学习环境配置、机器人与自动驾驶环境配置（如Ros及百度的无人驾驶系统apollo）、服务器及Web开发环境配置等等
Windows上最全wsl2使用配置,包含基础配置.高级配置.开发工具.机器学习环境配置.机器人与自动驾驶环境配置(如Ros及百度的无人驾驶系统apollo).服务器及Web开发环境配置等等. 文章比 ...
Qt开发CAN通信的环境配置
Qt开发CAN通信的环境配置目录 1 开发环境 1 1.1 编程环境 1 1.2 工程设置 1 1.3 调试窗口设置 2 1.4 依赖库 2 1.5 源代码的适配 3 2 运行及硬件环境 3 2.1 ...
MIT JOS学习笔记01：环境配置、Boot Loader（2016.10.22）
未经许可谢绝以任何形式对本文内容进行转载! 一.环境配置关于MIT课程中使用的JOS的配置教程网上已经有很多了,在这里就不做介绍,个人使用的是Ubuntu 16.04 + qemu.另注,本文章中贴 ...
Linux高并发服务器开发---笔记1（环境搭建、系统编程、多进程）
0613 第4章项目制作与技能提升 4.0 视频课链接 4.1 项目介绍与环境搭建 4.1.1 项目介绍 4.1.2 开发环境搭建 ①安装Linux系统.XSHELL.XFTP.Visual Stu ...
i.MX RT开发笔记-03 | i.MX RT1062地址空间映射及启动方式
系列文章目录 i.MX RT开发笔记-01 | 初识 i.MX RT1062 跨界MCU i.MX RT开发笔记-02 | i.MX RT1062开发环境搭建(MDK芯片包.NXP SDK详解) 文章 ...

Django Bootstrap开发笔记03 - Bootstrap环境配置

Django Bootstrap开发笔记03 - Bootstrap环境配置相关推荐

最新文章

热门文章