Python项目 | Web应用程序之样式设置

最新推荐文章于 2022-09-12 15:44:30 发布

大青呐

最新推荐文章于 2022-09-12 15:44:30 发布

阅读量465

点赞数

分类专栏： Python web 文章标签： python web django-bootstrap3

本文链接：https://blog.csdn.net/qq_42646885/article/details/96691776

版权

Python web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

样式设置

使用Bootstrap库设置样式，这是一组工具，用于为Web应用程序设置样式，使其在任何现代设备上都看起来很专业，无论是大型的平板显示器还是智能手机。为此，将使用应用程序django-bootstrap3。

【1】应用程序django-bootstrap3

安装django-bootstrap3，在活动的虚拟环境中执行如下命令：pip install django-bootstrap3

在settings.py的INSTALLED_APPS 中添加如下代码，在项目中包含应用程序django-boostrap3,以及在settings.py的末尾添加代码，让django-bootstrap3包含jQuery，这是一个JavaScript库，能够使用Bootstrap模板提供的一些交互式元素。


INSTALLED_APPS = [
    # skip

    'django.contrib.staticfiles',

    # 第三方应用程序
    'bootstrap3',

    # 我的应用程序
    'learning_logs',
    'users'
]

# skip


# 我的设置
LOGIN_URL = '/users/login/'

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

【2】使用Bootstrap设置项目的样式

要查看Bootstrap提供的模板，可访问http://getbootstrap.com/ ，单击Getting Started，再向下滚动到Examples部分，并找到Navbars in action。将使用模板Static top navbar，它提供了简单的顶部导航条、页面标题和用于放置页面内容的容器。

【3】修改base.html

{##}
{#<p>#}
{#    <a href="{% url 'learning_logs:index' %}">Learning Log</a>-#}
{#    <a href="{% url 'learning_logs:topics' %}">Topics</a>#}
{#     {% if user.is_authenticated %}#}
{#        Hello, {{ user.username }}.#}
{#         <a href="{% url 'users:logout' %}">log out</a>#}
{#    {% else %}#}
{#         <a href="{% url 'users:register' %}">register</a> -#}
{#        <a href="{% url 'users:login' %}">log in</a>#}
{#    {% endif %}#}
{#</p>#}
{##}
{#{%  block content %}{%  endblock content %}#}

{% load bootstrap3 %}  <!--加载django-bootstrap3中的模板标签集-->
<!DOCTYPE html>
<html lang="en">  <!-将这个文件声明为使用英语编写的HTML文档-->
    <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 %}         <!--使用了django-bootstrap3的一个自定义模板标签，它让Django包含所有的Bootstrap样式文件。-->
    {% bootstrap_javascript %}
    </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>
        <div class="container">
            <div class="page-header">
                {% block header %}{% endblock header %}
            </div>
            <div>
                {% block content %}{% endblock content %}
            </div>
        </div> <!-- /container -->
    </body>
</html>

在浏览器中加载“学习笔记”的主页：

（调整窗口的大小，使其非常窄；此时导航栏将变成一个按钮，如果你单击这个按钮，将打开一个下拉列表，其中包含所有的导航链接。）

index.html



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

{% block header %}   <!--定义header 块包含的内容-->
    <div class='jumbotron'>   <!--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've learned.
    </h2>
{% 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' %}">
        {% 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 %}

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 %}
        {% buttons %}
        <button name="submit" class="btn btn-primary">add topic</button>
        {% endbuttons %}
    </form>
{% endblock content %}

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>
            </h3>
        </li>
        {% empty %}
        <li>No topics have been added yet.</li>
        {% endfor %}
    </ul>
    <h3><a href="{% url 'learning_logs:new_topic' %}">Add new topic</h3>
{% endblock content %}

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 %}

对其他页面一一做了更改。

上一章：Python项目 | Web应用程序之用户账户

下一章：Python项目 | Web应用程序之部署应用

大青呐

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Python项目 | Web应用程序之样式设置

样式设置使用Bootstrap库设置样式，这是一组工具，用于为Web应用程序设置样式，使其在任何现代设备上都看起来很专业，无论是大型的平板显示器还是智能手机。为此，将使用应用程序django-bootstrap3。【1】应用程序django-bootstrap3安装django-bootstrap3，在活动的虚拟环境中执行如下命令：pip install django-bootstra...
复制链接

扫一扫