A、应用程序django-bootstrap3
一、安装django-bootstrap3
pip install django-bootstrap3 |
二、项目中添加django-bootstrap3
settings.py
# django-bootstrap3的设置BOOTSTRAP3 = { 'include_jquery': True,}INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', # 第三方应用程序 'bootstrap3', # My apps 'learning_logs', 'users',] |
B、使用Bootstrap来设置项目“学习笔记”的样式
三、修改base.html-定义头部
base.html
{% load bootstrap3 %}<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width-device-width, initial-scale=1"> <title>Learning Log</title> {% bootstrap_css %} {% bootstrap_javascript %}</head></html> |
{% bootstrap_css %}和{% bootstrap_javascript %}为django-bootstrap3的一个自定义模板的标签，它让Django包含所有的Bootstrap样式文件
四、修改base.html-定义导航栏
base.html
<body><!-- Static navbar--><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 %} <li><a>Hello, {{ user.username }}</a></li> <li><a href="{% url "users:logout" %}"></a></li> {% else %} <li><a href="{% url "users:register" %}">register</a></li> <li><a href="{% url "users:login" %}">log in</a></li> {% endif %} </ul> </div> </div> </nav></body> |
五、修改base.html-定义页面的主要部分
base.html
...</nav><div class="container"> <div class="page-header"> {% block header %}{% endblock %} </div> <div> {% block content %}{% endblock %} </div></div> <!--/container--></body></html> |
B、使用jumbotron来设置主页的样式
六、使用jumbotron来设置主页的样式
index.html
{% extends "learning_logs/base.html" %}{% block header %} <div class="jumbotron"> <h1>Track your learning</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 topics you're learning about. </h2> <h2>Whenever you learn something new about a topic, make an entry summarizing what you've learned.</h2>{% endblock %} |
C、设置登陆页面的样式
七、设置登陆页面的样式
login.html
{% extends "learning_logs/base.html" %}{% load bootstrap3 %}{% block header %} <h2>Log in to your account.</h2>{% endblock header %}{% block content %} <form action="{% url "users:login" %}" method="post" class="form"> {% csrf_token %} {% bootstrap_form form %} {% buttons %} <button name="submit" class="btn btn-primary">log in</button> {% endbuttons %} <input type="hidden" name="text" value="{% url "learning_logs:index" %}"/> </form>{% endblock content %} |
删除了{% if form.errors %}， 因为django-bootstrap3会自动管理表单错误。这里用{% bootstrap_form %}来显示表单，这个替换了原来使用的标签{{ form.as_p }}，
{% bootstrap_form %}将Bootstrap样式规则应用于各个表单元素。{% buttons %}是bootstrap3起始模板标签，它将Bootstrap样式应用于按钮。
D、设置new_topic页面的样式
八、设置new_topic页面的样式
new_topic.html
{% extends "learning_logs/base.html" %}{% load bootstrap3 %}{% block header %} <h2>Add a new topic:</h2>{% endblock header %}{% block content %} <form action="{% url 'learning_logs:new_topic' %}" method="post" class="form"> {% csrf_token %} {% bootstrap_form form %} {% buttons %} <button name="submit">add topic</button> {% endbuttons %} </form>{% endblock content %} |
D、设置topics页面的样式
九、设置topics页面的样式
topics.html
{% extends "learning_logs/base.html" %}{% block header %} <h1>Topics</h1>{% endblock header %}{% block content %} <ul> {% for topic in topics %} <li> <h3><a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></h3> </li> {% empty %} <li>No topics have been added yet.</li> {% endfor %} </ul> <h3><a href="{% url 'learning_logs:new_topic' %}">Add a new topic:</a></h3>{% endblock content %} |
E、设置topic页面中条目的样式
十、设置topic页面中条目的样式
topic.html
{% extends "learning_logs/base.html" %}{% block header %} <h2>{{ topic }}</h2>{% endblock header %}{% block content %} <p><a href="{% url "learning_logs:new_entry" topic.id %}">Add new entry</a></p> {% for entry in entries %} <div class="panel panel-default"> <div class="panel-heading"> <h3> {{ entry.date_added|date:'M d,Y H:i' }} <small> <a href="{% url "learning_logs:edit_entry" entry.id %}">edit entry</a> </small> </h3> </div> <div class="panel-body"> {{ entry.text|linebreaks }} </div> </div> {% empty %} There are no entries for this topic yet. {% endfor %}{% endblock content %} |