文章目录[隐藏]
为了设置样式,使用Bootstrap库,这是一组工具,用于为Web应用程序设置样式,使其再任何现代设备上都看起来很专业。使用应用程序django-bootstrap4,这也能够练习使用其他Django开发人远开发的应用程序。
设置项目“学习笔记”的样式
django-bootstrap4.
应用程序django-bootstrap4
使用django-bootstrap4将bootstrap继承到项目中。
这个应用程序下载必要的Bootstrap文件,将其放到项目的合适位置,让你能够在项目的模板中使用样式设置指令。
安装djangp-bootstrap4执行:
pip install django-bootstrap4
接下来需要在settings.py的INSTAKKED_APP中添加如下代码,在项目中包含应用程序django-bootstrap4
使用Bootstrap设置项目“学习笔记”的样式
Bootstrap是一个大型样式设置工具集合,还提供了大量模板,可应用于项目以创建独特的总体风格。
对Bootstrap初学者来说,使用模板比样式设置工具用起来容易的多。要查看Bootstrap提供的模板,访问官网Exmple中的Navbars.
修改baseHTML
需要修改模板base.html,以使用前述Bootstrap模板。下面分几部分介绍新的base.html.
1. 定义HTML头部
base.html
{% load bootstrap4 %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,
shrink-to-fit=no">
<title> Learning Log</title>
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
</head>
在最开始,加载django-bootstrap4中的模板标签集,接下来,将这个文件声明为使用英语,编写的HTML文档。HTML文档文件分为两个主要部分:头部(head)和主体(body)。{% bootstrap_css %}使用了django-bootstrap4的一个自定义模板标签,让Django包含所有的Bootstrap样式文件。接下来的标签启用可能在页面中使用的所有交互式行为,如可折叠的导航栏。
定义导航栏
定义页面顶部导航栏的代码很长,因为需要同时支持较窄的手机屏幕和较宽的台式计算机显示器。分三部分定义导航栏。
下面是第一部分:
{% load bootstrap4 %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,
shrink-to-fit=no">
<title> Learning Log</title>
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">
<a class="navbar-brand" href="{% url 'learning_logs:index' %}">Learning Log</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle nabigation">
<span class="navbar-toggle-icon"></span>
</button>
</body>
第一个元素为其实标签<body>.HTML文件的主题包含用户将在页面上看到的呢容。
<nan>元素表示页面的导航链接部分,对于这个元素内的所有内容,都将根据此处的navbar和navbar-expand-md等选择器定义的Bootstrap样式规则来设置样式。
选择器(selector)决定了样式规则将应用于页面上的哪些元素。选择器navbar-light和bg-light使用一些浅色主题来设置导航栏上的颜色。
mb-4中的mb表示下边距,这个选择器能确保导航栏和页面其他部分之间有一些空白区域,选择器border在浅色背景周围田间很细的边框,将导航栏与页面其他部分分开。
..
使用jumbortron设置主页样式。
。。。
设置登录页面样式
设置显示所有主题的页面样式
部署
安装必要的包
为了在服务器上支持Django项目提供的服务。
pip install psycopg2==2.7.*
pip install django-heroku
pip install gunicorn
为了管理Heroku使用的数据库。psycopg2包必不可少。
创建文件requirements.txt
指定python版本
为部署而修改setting。。
创建启动进程的Procfile。。
。。。
。。。
。。
。。
。。
叨叨几句... NOTHING