Python项目 | Web应用程序之样式设置_python web手机端显示不了样式-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42646885/article/details/96691776

样式设置

使用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