設(shè)置應(yīng)用程序的樣式并對其進行部署
一、應(yīng)用程序django-bootstrap3
- 使用
pip install django-bootstrap3安裝django-bootstrap3 - 在
settings.py中的INSTALLED_APPS添加bootstrap3 - 讓
django-bootstrap3使用jQuery，這讓你無需手工下載jQuery并將其放到正確的地方
BOOTSTRAP3={
'include_jquery':True,
}
二霞怀、使用Bootstrap設(shè)置項目樣式
- 修改base.html
#加載django-bootstrap3中的模板標簽集
{% load bootstrap3 %}
<!DOCTYPE html>
<html lang='en'>
#head頭部不包含任何內(nèi)容霸褒，將正確顯示頁面所需的信息告訴瀏覽器
<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文件的主體包含用戶將在頁面上看到的內(nèi)容
<body>
#導(dǎo)航
<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%}
運行結(jié)果
- 設(shè)置登錄頁面樣式
{% 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 %}
運行結(jié)果
