Django项目(七)——设置样式

最新推荐文章于 2024-02-08 15:10:02 发布

半瓶神仙茶

最新推荐文章于 2024-02-08 15:10:02 发布

阅读量1.2k

点赞数 2

分类专栏： Django 文章标签： python django html css web

本文链接：https://blog.csdn.net/yuanzhiqj/article/details/105420291

版权

Django 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

参考书籍：《Python编程从入门到实践》—Eric Matthes

如今我们的项目功能以及齐全，但是还未给它设置样式。在之后的内容中我们将设置样式，并将其部署到服务器上。

为了设置样式，我们将使用Bootstrap库，用来为Web应用程序设置样式。所以我i们需要使用应用程序django-bootstrap3

我们还将把项目部署到Heroku上

应用程序django-bootstrap3

在虚拟环境中命令行执行pip install django-bootstrap3

安装成功后在setting.py的INSTALLED_APP下添加

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末尾添加

#django-bootstrap3的设置
BOOTSTRAP3 = {
    'include_jquery':True,
}

使用Bootstrap来设置项目“学习笔记的样式”

Bootstrap基本上就是一个大型的样式设置工具集，它还提供了大量的模板，你可将它们应用于项目以创建独特的总体风格。对Bootstrap初学者来说，这些模板比各个样式设置工具使用起来要容易得多。要查看Bootstrap提供的模板，可访问http://getbootstrap.com/，单击Getting Started，再向下滚动到Examples部分，并找到Navbars in action。我们将使用模板Static top navbar，它提供了简单的顶部导航条、页面标题和用于放置页面内容的容器。

定义HTML头部

我们需要删除原本base.html的所有代码，定义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中的模板标签集。讲其声明为使用英语en编写的HTML文档
HTML文件的头部不包含任何内容，它只是讲正确显示页面所需要的信息告诉浏览器。
{% bootstrap_css %} {% bootstrap_javascript %}是一个自定义模板标签。它让Django包含所有的Bootstrap样式文件。接下来的标签启用你可能在页面中使用的所有交互式行为。

定义导航栏

base中添加

...
</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>

                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="{% url 'learning_logs:topics' %}">Topics</a>></li>
                    </ul>
                    <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

HTML<body>文件主体包含用户将在页面上看到的内容。<nav>表示页面的导航链接部分
对于<nav>的所有内容，都将根据选择器navbar、navbar-default和navbar-static-top定义的Bootstrap样式规则来设置样式。
此外我们定义一个按钮，让这个按钮在浏览器窗口太窄、无法水平显示整个导航栏时显示出来，用来下拉列表
<a class="navbar-brand" href="{% url 'learning_logs:index' %}">Learning Log</a>在导航栏的最左边显示项目名，并将其设置为到主页的链接
导航栏其实便是一个以<ul>打头的列表，其中每个链接都是一个列表项<li>。
我们在导航栏的右边也显示了导航链接列表(选择器为navbar-right)。显示的是注册、登录、注销的内容。

定义页面的主要部分

在</nav>结束之前添加

<div class="container">
      <div class="page-header">
            {% block header %}{% endblock header %}
       </div>>
       <div>
            {% block content %}{% endblock content %}
       </div>
</div><!-- /container -->

<header>块的内容告诉用户页面包含哪些信息以及可执行的哪些操作

使用jumbotron设置主页的样式

下面使用新定义的header块和一个名为jumbotron的Boostrap元素修改主页。

修改Index.html

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

{% block header %}
    <div class='jumbotron'>
        <h1>Tracj 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>
    <p>Learning Log helps you keep track of your learning, for any topic you're
        learning about.
    </p>
{% endblock content %}

设置登录页面的样式

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

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

{% block content %}


<form method="post" action="{% url 'users:login' %}" class="form">
    {% csrf_token %}
    {% bootstrap_form form %}
    
    {% button %}
        <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会自动管理错误

设置new_topic页面的样式

修改new_topic.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>
                </h3>
            </li>
        {% empty %}
            <li>No topics have been added yet.</li>
        {% endfor %}
    </ul>

    <h3></h4><a href="{% url 'learning_logs:new_topic' %}">Add a new topic:</a></h3>
{% endblock content %}

设置topic页面中条目的样式

修改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 %}">
                            编辑条目</a>
                    </small>
                </h3>
            </div>
            <div class="panel-body">
                {{ entry.text|linebreaks }}
            </div>
        </div><!-- panel -->
    {% empty %}
        当前还没有条目。
    {% endfor %}
    </ul>

{% endblock content%}

半瓶神仙茶

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
Django项目(七)——设置样式

参考书籍：《Python编程从入门到实践》—Eric Matthes 如今我们的项目功能以及齐全，但是还未给它设置样式。在之后的内容中我们将设置样式，并将其部署到服务器上。为了设置样式，我们将使用Bootstrap库，用来为Web应用程序设置样式。所以我i们需要使用应用程序django-bootstrap3 我们还将把项目部署到Heroku上应用程序django-bootstrap...
复制链接

扫一扫