【day 17】python编程:从入门到实践学习笔记-基于Django框架的Web开发-设计样式和部署(一)
2018-03-29 15:01
1406 查看
学习笔记目录
【day 1】python编程:从入门到实践学习笔记-安装、变量和简单数据类型
【day 2】python编程:从入门到实践学习笔记-列表以及其操作
【day 3】python编程:从入门到实践学习笔记-if 语句(末附练习答案代码)
【day 4】python编程:从入门到实践学习笔记-字典(末附练习答案代码)
【day 5】python编程:从入门到实践学习笔记-用户输入和while循环(末附答案代码)
【day 6】python编程:从入门到实践学习笔记-函数(末附练习答案代码)
【day 7】python编程:从入门到实践学习笔记-类(末附练习答案代码)
【day 8】python编程:从入门到实践学习笔记-文件和异常(末附练习答案代码)
【day 9】python编程:从入门到实践学习笔记-测试代码(末附练习答案代码)
【day 10】python编程:从入门到实践学习笔记-Django入门(一)
【day 11】python编程:从入门到实践学习笔记-Django入门(二)
【day 12】python编程:从入门到实践学习笔记-Django入门(三)
【day 13】python编程:从入门到实践学习笔记-Django入门(四)
【day 14】python编程:从入门到实践学习笔记-用户账户(一)
【day 15】python编程:从入门到实践学习笔记-用户账户(二)
【day 16】python编程:从入门到实践学习笔记-用户账户(三)
【day 17】python编程:从入门到实践学习笔记-设计样式和部署(一)
【day 18】python编程:从入门到实践学习笔记-设计样式和部署(二)
首先在活动的虚拟环境中执行
接着让django-bootstrap3包含jQuery,这是一个JavaScript库,让你能够使用bootstrap模板提供的交互元素。在settings.py的末尾添加如下代码。
这些代码让你无需手工下载jQuery并将其放到正确的地方。
1.定义HTML头部
第一个修改时在这个文件中定义HTML头部,使得显示“学习笔记”的每个页面时,浏览器标题栏都显示这个网站的名称。删除 base.html 的全部代码,并输入下面的代码:
首先加载django-bootstrap3中的模板标签集。接着将这个文件声明为使用英语编写的HTML文档。head部分不包含任何内容,只是将正确显示页面所需的内容告诉浏览器。
在title标签下面,我们使用了django-bootstrap3的一个自定义模板标签,它让django包含所有的boostsrap样式文件。接下来的标签启用你可能在页面中使用的所有交互式行为,如何折叠的导航栏。
2.定义导航栏
定义页面顶部的导航栏
首先是
在A处,我们定义了导航的链接。导航栏其实是一个以
在B处,我们添加了第二个导航链接列表,这里使用了选择器为navbar-right来设置一组链接的样式,使其出现在导航栏的右边——登录、注册。在这里,已登录就显示问候语和注销;未登录就显示注册和登录。
3.定义页面的主要部分
注意我们从这个模板删除了
![](https://oscdn.geek-share.com/Uploads/Images/Content/202007/29/0a4572156d49046811e5617db58f8990)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202007/29/5fed417287ffbb118c119975867bd31a)
其他页面的话可以试着参考以上的学习笔记进行修改。或者等我后续补充哈,点关注会有更新通知哦~
【day 1】python编程:从入门到实践学习笔记-安装、变量和简单数据类型
【day 2】python编程:从入门到实践学习笔记-列表以及其操作
【day 3】python编程:从入门到实践学习笔记-if 语句(末附练习答案代码)
【day 4】python编程:从入门到实践学习笔记-字典(末附练习答案代码)
【day 5】python编程:从入门到实践学习笔记-用户输入和while循环(末附答案代码)
【day 6】python编程:从入门到实践学习笔记-函数(末附练习答案代码)
【day 7】python编程:从入门到实践学习笔记-类(末附练习答案代码)
【day 8】python编程:从入门到实践学习笔记-文件和异常(末附练习答案代码)
【day 9】python编程:从入门到实践学习笔记-测试代码(末附练习答案代码)
【day 10】python编程:从入门到实践学习笔记-Django入门(一)
【day 11】python编程:从入门到实践学习笔记-Django入门(二)
【day 12】python编程:从入门到实践学习笔记-Django入门(三)
【day 13】python编程:从入门到实践学习笔记-Django入门(四)
【day 14】python编程:从入门到实践学习笔记-用户账户(一)
【day 15】python编程:从入门到实践学习笔记-用户账户(二)
【day 16】python编程:从入门到实践学习笔记-用户账户(三)
【day 17】python编程:从入门到实践学习笔记-设计样式和部署(一)
【day 18】python编程:从入门到实践学习笔记-设计样式和部署(二)
第二十章 设计样式和部署(一)
设置项目“学习笔记”的样式
应用程序django-bootstrap3
bootstrap是一组用于为Web应用程序设置样式的工具。首先在活动的虚拟环境中执行
pip install django-bootstrap3。安装完成之后,我们需要在settings.py的
INSTALLED_APPS添加如下代码,在项目中包含应用程序django-bootstrap3
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'bootstrap3', 'learning_logs', 'users', ]
接着让django-bootstrap3包含jQuery,这是一个JavaScript库,让你能够使用bootstrap模板提供的交互元素。在settings.py的末尾添加如下代码。
BOOTSTRAP3 = { 'include_jquery': True, }
这些代码让你无需手工下载jQuery并将其放到正确的地方。
使用Bootstrap来设置项目“学习笔记的样式”
bootstrap基本上就是一个大型的样式设置工具集,它还提供了大量的模板。如果要查看bootstrap提供的模板,可以访问http://getbootstrap.com/,单击Getting Started,再向下滚动到Examples部分,并找到Navbars in action。我们将使用模板Static top navbar,他提供了简单的顶部导航条、页面标题和同于放置页面内容的容器。修改base.html
这部分我们来修改base.html,先把他分成几部分进行修改。1.定义HTML头部
第一个修改时在这个文件中定义HTML头部,使得显示“学习笔记”的每个页面时,浏览器标题栏都显示这个网站的名称。删除 base.html 的全部代码,并输入下面的代码:
{% load bootstrap3 %} <!DOCTYPE html> <html lang="en"> <head> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Learning Log</title> {% bootstrap_css %} {% bootstrap_javascript %} </head>
首先加载django-bootstrap3中的模板标签集。接着将这个文件声明为使用英语编写的HTML文档。head部分不包含任何内容,只是将正确显示页面所需的内容告诉浏览器。
在title标签下面,我们使用了django-bootstrap3的一个自定义模板标签,它让django包含所有的boostsrap样式文件。接下来的标签启用你可能在页面中使用的所有交互式行为,如何折叠的导航栏。
2.定义导航栏
定义页面顶部的导航栏
<!--snip--> </head> <body> <!-- Static navbar --> <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> </button> <a class="navbar-brand" href="{% url 'learning_logs:index' %}"> Learning Log</a> </div> <!--A处--> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="{% url 'learning_logs:topics' %}">Topics</a></li> </ul> <!--B处--> <ul class="nav navbar-nav navbar-right"> {% if user.is_authenticated %} <li><a>Hello, {{ user.username }}.</a></li> <li><a href="{% url 'users:logout' %}">log out</a></li> {% else %} <li><a href="{% url 'users:register' %}">register</a></li> <li><a href="{% url 'users:login' %}">log in</a></li> {% endif %} </ul> </div><!--/.nav-collapse --> </div> </nav>
首先是
<nar>元素,其表示页面的导航链接部分。对于这个元素内的所有内容,都将根据选择器(selector)navbar、navbar-default和navbar-static-top定义的boostsrap样式规则来设置样式。选择器决定了特定样式规则将应用于页面上的哪些元素。
<button>定义了一个按钮,在浏览器窗口变窄时、无法水平显示完整的导航栏时显示出来。如果单击他将会出现下拉列表,其中包含所有的导航元素。当用户缩小窗口时,
"collapse"会使导航栏折叠起来。接着我们在导航栏的最左边显示项目名,并设置了到主页的超链接。
在A处,我们定义了导航的链接。导航栏其实是一个以
<ul>开头的列表,其中每个链接都是一个列表项
<li>。
在B处,我们添加了第二个导航链接列表,这里使用了选择器为navbar-right来设置一组链接的样式,使其出现在导航栏的右边——登录、注册。在这里,已登录就显示问候语和注销;未登录就显示注册和登录。
3.定义页面的主要部分
<!--snip--> </nav> <div class="container"> <div class="page-header"> {% block header %}{% endblock header %} </div> <div> {% block content %}{% endblock content %} </div> </div> <!-- /container --> </body> </html>
使用jumbotron设置主页的样式
下面使用新定义的header块和一个名为jumbotron的Boostsrap元素修改主页。jumbotron元素是一个大框,他通常用于在主页中呈现项目的简要描述。修改index.html{% extends "learning_logs/base.html" %} {% block header %} <div class='jumbotron'> <h1>Track your learning.</h1> </div> {% endblock header %} {% block content %} <h2> <a href="{% url 'users:register' %}">Register an account</a> to make your own Learning Log, and list the topics you're learning about. </h2> <h2> Whenever you learn something new about a topic, make an entry summarizing what you're learned. </h2> {% endblock content %}
设置登录页面的样式
这里我们改进一下登录的表单,修改login.html{% extends "learning_logs/base.html" %} {% load bootstrap3 %} {% block header %} <h2>Log in to your accout.</h2> {% endblock header %} {% block content %} <form method="post" action="{% url 'users:login' %}" class="form"> {% csrf_token %} {% bootstrap_form form %} {% buttons %} <button name="submit" class="btn btn-primary">log in</button> {% endbuttons %} <input type="hidden" name="next" value="{% url 'learning_logs:index' %}" /> </form> {% endblock content %}
注意我们从这个模板删除了
{% if form.errors %}代码块,因为django-bootstrap3会自动管理表单错误。
{% bootstrap_form %}模板标签用来显示表单,其将bootstrap样式规则应用于各个表单元素。接下来的是将bootstrap应用于按钮。
设置new_topic页面的样式
修改new_topic.html{% extends "learning_logs/base.html" %} {% load bootstrap3 %} {% block header %} <h2>Add a new topic:</h2> {% endblock header %} {% block content %} <form action="{% url 'learning_logs:new_topic' %}" method='post' class="form"> {% csrf_token %} {% bootstrap_form form %} {% button %} <button name="submit" class="btn btn-primary">add topic</button> {% endbutton %} </form> {% endblock content %}
设置topics页面的样式
修改topics.html{% extends "learning_logs/base.html" %} {% block header %} <h1>Topics</h1> {% endblock header %} {% block content %} <ul> {% for topic in topics %} <li> <h3> <a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></li> </h3 </li> {% empty %} <li>No topics have been added yet.</li> {% endfor %} </ul> <h3><a href="{% url 'learning_logs:new_topic' %}">Add a new topic:</a></h3> {% endblock content %}
设置topics页面中条目的样式
我们将使用bootstrap面板(panel)来突出每个条目。面板是一个带预定义样式的div,适合用于显示主题的条目。修改topic.html{% extends 'learning_logs/base.html' %} {% block header %} <h2>{{ topic }}</h2> {% endblock header %} {% block content %} <p> <a href="{% url 'learning_logs:new_entry' topic.id %}">add new entry</a> </p> {% for entry in entries %} <div class="panel panel-default"> <div class="panel-heading"> <h3> {{ entry.date_added|date:'M d, Y H:i' }} <small> <a href="{% url 'learning_logs:edit_entry' entry.id %}"> edit entry</a> </small> </h3> </div> <div class="panel-body"> {{ entry.text|linebreaks }} </div> </div> <!-- panel --> {% empty %} There are no entries for this topic yet. {% endfor %} {% endblock content %}
其他页面的话可以试着参考以上的学习笔记进行修改。或者等我后续补充哈,点关注会有更新通知哦~
相关文章推荐
- 【day 15】python编程:从入门到实践学习笔记-基于Django框架的Web开发-用户账户(二)
- 【day 14】python编程:从入门到实践学习笔记-基于Django框架的Web开发-用户账户(一)
- 【day 16】python编程:从入门到实践学习笔记-基于Django框架的Web开发-用户账户(三)
- 【day 12】python编程:从入门到实践学习笔记-基于Django框架的Web开发-Django入门(三)
- 【day 10】python编程:从入门到实践学习笔记- 基于Django框架的Web开发-Django入门(一)
- 【day 13】python编程:从入门到实践学习笔记-基于Django框架的Web开发-Django入门(四)
- Python Web开发 之Django框架入门学习笔记(一)——安装和初步使用
- Python Web接口开发学习笔记(基于Django框架)(一)
- 【day 9】python编程:从入门到实践学习笔记-测试代码(末附练习答案代码)
- 【day 8】python编程:从入门到实践学习笔记-文件和异常(末附答案代码)
- [置顶] 【day 1】python编程:从入门到实践学习笔记-安装、变量和简单数据类型
- 【day 5】python编程:从入门到实践学习笔记-用户输入和while循环(末答案)
- 【day 2】python编程:从入门到实践学习笔记-列表以及其操作
- 【学习笔记javascript设计模式与开发实践(适配器模式)----17】
- 【day 4】python编程:从入门到实践学习笔记-字典(末附练习答案代码)
- python的web开发框架django学习笔记
- Python web框架Django学习(1)——在win7 64bit下配置开发环境Django:一个可以使Web开发工作愉快并且高效的Web开发框架。 使用Django,使你能够以最小的代价构建和
- 转:基于node的web开发框架Express入门--by ruanyifeng
- 基于MVC4+EasyUI的Web开发框架形成之旅--MVC控制器的设计
- Linux工程实践学习笔记——基于主机系统的多客户即时通讯/聊天室 Day(2)