zoukankan      html  css  js  c++  java
  • 第 20 章 设置应用程序的样式并对其进行部署

        当前,项目"学习笔记"功能已齐备,但未设置样式,也只是在本地计算机上运行。在本章中,我们将以简单而专业的方式设置这个项目的样式,再将其部署到一台服务器上,让世界上任何人都能够建立账户。

        为设置样式,我们将使用Bootstrap库,这是一组工具,用于Web应用程序设置样式,使其在任何现代设备上都看起来很专业,无论是大型的平板显示器还是智能手机。为此,我们将使用应用程序django-bootstrap3,这也让我们能够练习使用其他Django开发人员开发的应用程序。

        我们将把项目"学习笔记"部署到Herku,这个网站让我们能够将项目推送到其服务器,让任何有网络链接的认都可使用它。我们还将使用版本控制系统Git来跟踪对这个项目所做的修改。

        完成项目"学习笔记"后,我们将能够开发简单的Web应用程序,让它们看起来很漂亮,再将它们部署到服务器。我们还能够利用更高级的学习资源来提高技能。

    20.1  设置项目“学习笔记”的样式

        我们一直专注于项目“学习笔记”的功能,而没有考虑样式设置的问题,这是有意为之的。这是一种不错的开发方法,因为能正确运行的应用程序才是有用的。当然,应用程序能够正确运行后,外观就显得很重要了,因为漂亮的应用程序才能吸引用户使用它。

        在本节中,我们将简要地介绍应用程序django-bootstrap3,并演示如何将其继承到项目中,为部署项目做好准备。

    20.1.1  应用程序django-bootstrap3

        我们将使用django-bootstrap3来将Bootstrap继承到项目中。这个应用程序下载必要的Bootstrap文件,将它们放到项目的合适位置,让我们能够在项目的模板中使用样式设置指令。

        为安装django-bootstrap3,在活动的虚拟环境中执行如下命令:

        (11_env)learning_log$ pip3 install django-bootstrap3
        Successfully installed django-bootstrap3-8.2.2.

        接下来,需要在settings.py的INSTALLED_APPS中添加如下代码,在项目中包含应用程序django-bootstrap3:

    settings.py

    INSTALLED_APPS = (
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        
        #第三方应用程序
        'learning_logs',
        # My apps
        'bootstrap3',
        'users',
    )

        新建一个用于指定其他开发人员的应用程序的片段,将其命名为“第三方应用程序”,并在其中添加'bootstrap3'。大多数应用程序都需要包含在INSTALLED_APPS中,为确定这一点,请阅读要使用的应用程序的设置说明。

        我们需要让django-bootstrap3包含jQuery,这是一个JavaScript库,让我们能够使用Bootstrap模板提供的一些交互式元素。请在settings.py的末尾添加如下代码:

        settings.py

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

        这些代码让我们无需手工下载jQuery并将其放到正确的地方。

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

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

    20.1.3  修改base.html

        我们需要修改模板base.html,以使用前述Bootstrap模板。我们把新的base.html分成几个部分进行介绍。

        1.定义HTML头部

        对base.html所做的第一项修改是,在这个文件中定义HTML头部,使得显示“学习笔记”的每个页面时,浏览器标题栏都显示这个网站的名称。我们还将添加一些在模板中使用Bootstrap所需的信息。删除base.html的全部代码,并输入下面的代码:

       

       

       

  • 相关阅读:
    Amoeba+Mysql实现数据库读写分离
    分布式mysql中间件(mycat)
    mysql打不开表问题解决方案
    redis下载安装以及添加服务
    linux mysql重启命令
    Centos打开、关闭、结束tomcat,及查看tomcat运行日志
    mybaties中,模糊查询的几种写法
    如何给mysql用户分配权限+增、删、改、查mysql用户
    反人类的MyEclipse之-Javascript双引号自动补全
    反人类的MyEclipse之-调整JavaScript代码-花括号换行显示
  • 原文地址:https://www.cnblogs.com/gengcx/p/6697391.html
Copyright © 2011-2022 走看看