设置应用程序的样式并对其进行部署
一、应用程序django-bootstrap3
- 使用
pip install django-bootstrap3安装django-bootstrap3 - 在
settings.py中的INSTALLED_APPS添加bootstrap3 - 让
django-bootstrap3使用jQuery，这让你无需手工下载jQuery并将其放到正确的地方
BOOTSTRAP3={
'include_jquery':True,
}
二、使用Bootstrap设置项目样式
- 修改base.html
#加载django-bootstrap3中的模板标签集
{% load bootstrap3 %}
<!DOCTYPE html>
<html lang='en'>
#head头部不包含任何内容，将正确显示页面所需的信息告诉浏览器
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewreport" content="width=device-width,inital-scale=1">
<title>Learning Log</title>
</head>
#包含Bootstrap样式文件
{% bootstrap_css %}
#启用在页中使用的所有交互行为
{% bootstrap_javascript %}
#HTML文件的主体包含用户将在页面上看到的内容
<body>
#导航
<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 %}
Hello, {{ user.username }}.
<a href="{% url 'users:logout' %}">logout</a>
{% else %}
<a href="{% url 'users:register' %}">register</a>
<a href="{% url 'users:login' %}">log in</a>
{% endif %}
</ul>
</div>
</nav>
#页面主要部分
<div class="container">
<div class="page-header">
{% block header %}{% endblock header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</body>
</html>
- 修改index.html
{% extends "learning_logs/base.html" %}
{% block header %}
<div class="jumbotron">
<h1>Track your learing</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 topoic you're learning about.
<h2>
Whenever you learn something new about a topic,make an entry summarizing what you're learned.
</h2>
{% endblock content%}
运行结果
- 设置登录页面样式
{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
<h2>Log in to your account</h2>
{% endblock header%}
{% block content %}
{% if form.errors %}
<p>Your name and password didn't match.Please try again</p>
{% endif %}
<form class="form" method="post" action="{% url 'users:login' %}">
{% csrf_token %}
{% bootstrap_form form %}
{% buttons %}
<button class="bnt btn-primary" name="submit">login</button>
{% endbuttons %}
<input type="hidden" name="next" value="{% url 'learning_logs:index' %}" />
</form>
{% endblock content %}
运行结果
网友评论