美文网首页Python学习日志Java-Python-Django社区《Django By Example》
【day 17】python编程：从入门到实践学习笔记-基于Dj

【day 17】python编程：从入门到实践学习笔记-基于Dj

作者: 苍云横渡 | 来源:发表于2018-03-29 14:56 被阅读141次

学习笔记目录
【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 %}

设置topic页面中条目的样式

我们将使用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 %}" class="btn btn-primary">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 %}" class="btn btn-primary">
              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 %}

设置register页面的样式

修改register.html

{% extends "learning_logs/base.html" %}

{% load bootstrap3 %}

{% block header %}
  <h2>Register to your account.</h2>
{% endblock header %}

{% block content %}

  <form method="post" action="{% url 'users:register' %}" class="form">
    {% csrf_token %}
    {% bootstrap_form form %}
    
    {% buttons %}
      <button name="submit" class="btn btn-primary">register</button>
    {%endbuttons %}
    
    <input type="hidden" name="next" value="{% url 'learning_logs:index' %}" />
  </form>
  
{% endblock content %}

设置new_entry页面的样式

修改new_entry.html

{% extends "learning_logs/base.html" %}

{% load bootstrap3 %}

{% block header %}
  <h2>Add a new entry</h2>
{% endblock header %}

{% block content %}

  <h2><p><a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></p></h2>
  
  <form action="{% url 'learning_logs:new_entry' topic.id %}" method='post' class="form">
    {% csrf_token %}
    {% bootstrap_form form %}
    
    {% buttons %}
      <button name='submit' class="btn btn-primary">add entry</button>
    {% endbuttons %}
  </form>

{% endblock content %}

设置edit_topic页面的样式

修改edit_topic.html

{% extends "learning_logs/base.html" %}

{% load bootstrap3 %}

{% block header %}
  <h2>Edit entry</h2>
{% endblock header %}

{% block content %}

  <h3><p><a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></p></h3>
  
  <form action="{% url 'learning_logs:edit_entry' entry.id %}" method='post' class="form">
    {% csrf_token %}
    {% bootstrap_form form %}
    
    {% buttons %}
      <button name="submit" class="btn btn-primary">save changes</button>
    {% endbuttons %}
  </form>

{% endblock content %}

相关文章

网友评论

    本文标题：【day 17】python编程：从入门到实践学习笔记-基于Dj

    本文链接：https://www.haomeiwen.com/subject/vlgpcftx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    Python学习日志

    Java-Python-Django社区

    《Django By Example》

    程序猿阵线联盟-汇总各类技术干货

    程序员

    Pythoner集中营

    我爱编程

    关于我们|服务条款|联系我们|【day 17】python编程：从入门到实践学习笔记-基于Dj|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！