Django Bootstrap开发笔记03 - Bootstrap环境配置
2018-01-07 13:52
429 查看
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学习笔记2:配置sublime的bootstrap开发环境(代码提示)
- Python+Django在windows下的开发环境配置图解
- coolite1.0 学习笔记(一) -- 配置coolite开发环境
- 学习笔记:java学习第一课 开发工具,环境配置
- Python+Django在windows下的开发环境配置图解
- django开发(1)环境配置
- eclipse+pydev+Django安装和配置Python开发环境(For Windows OS)
- coolite1.0 学习笔记(一) -- 配置coolite开发环境
- Windows下配置Django开发环境
- 【转】安装配置Django开发环境(Eclipse + Pydev)
- 【转】安装配置Django开发环境(Eclipse + Pydev) 2
- J2ME学习笔记_1_开发环境的安装和配置
- windows上python和django开发环境的安装和配置
- eclipse配置python(django)开发环境
- [Linux]在Linux上部署Java开发环境笔记(一)-- 补充:Linux下如何手动设置IP及配置DNS服务
- Jbuilder2006配置J2ME开发环境笔记
- Python+Django在windows下的开发环境配置
- Android开发环境配置笔记
- Python+Django在windows下的开发环境配置图解