一.安装
pip install django south django-bootstrap-toolkit
二.修改urls.py
from django.conf.urls import patterns, include, url# Uncomment the next two lines to enable the admin:# from django.contrib import admin# admin.autodiscover()urlpatterns = patterns('', (r'^articles/',include('article.urls')), # Examples: # url(r'^$', 'twitter_bootstrap.views.home', name='home'), # url(r'^twitter_bootstrap/', include('twitter_bootstrap.foo.urls')), # Uncomment the admin/doc line below to enable admin documentation: # url(r'^admin/doc/', include('django.contrib.admindocs.urls')), # Uncomment the next line to enable the admin: # url(r'^admin/', include(admin.site.urls)),)
三.修改twitter_bootstrap/templates/base.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0"><title>Bootstrap Tutorial</title><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><style type="text/css">body{ padding-top:60px;}</style></head><body><div class="navbar navbar-fixed-top navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navgar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Articles App</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="activate"> <a href="{% url 'article.views.articles' %}">Home</a> </li> <li><a href="{% url 'article.views.create' %}">New</a></li> </ul> </div> </div></div><div class="container"> {% block content %} {% endblock %}</div><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script></body></html>![]()
三.修改article/templates/add_comment.html
{% extends "base.html" %}{% load bootstrap_toolkit %}{% block sidebar %}<ul> <li><a href="/articles/get/{{article.id}}">Cancel</a></li></ul>{% endblock %}{% block content %}<form action="/articles/add_comment/{{article.id}}" method="post">{% csrf_token %} {{|form|as_bootstrap}} <div class="form-action"> <button class="btn btn-primary" type="submit">Post Comment</button> </div></form>{% endblock %}四.修改article/templates/article.html
{% extends "base.html" %}{% load static %}{% block content %}<div class="col-md-8"> <h1>{{article.title}}</h1> <p>{{ article.body}}</p> <p>{{article.likes}} people liked this article</p> <p><a href="/articles/like/{{article.id}}" class="btn btn-xs btn-success">Like</a></p> <h2>Comment</h2> {% for c in article.comment_set.all %} <p>{{c.first_name}} {{c.second_name}}:{{c.body}} <a href="/articles/delete_comment/{{c.id}}" class="btn btn-xs btn-danger">Delete</a> </p> {% endfor %} <p><a href="/article/add_comment/{{article.id}}" class="btn btn-primary">Add Comment</a></p></div>{% endblock %}五.修改article/templates/create_article.html
{% extends "base.html" %}{% load bootstrap_toolkit %}{% block sidebar %}<ul> <li><a href="/articles/all">Cancel</a></li></ul>{% endblock %}{% block content %}<form action="/articles/create/" method="post" enctype="multipart/form-data">{% csrf_token %} {{form|as_bootstrap}} <div class="form-actions"> <button class="btn btn-primary" type="submit"> Create Article </button> </div></form>{% endblock %}六.修改article/templates/articles.html
{% extends "base.html" %}{% block content %} <div class="jumbotron"> <h1>Articles for you!</h1> <p> This is where you can put a description of what this page does! </p> </div> <div class="row"> {% if article.count > 0 %} {% for article in articles %} <div class="col-6 col-sm-6 col-lg-4"> <h2>{{ article.title}}</h2> <p> {{article.body|lower}} </p> <p><small> {{article.likes}} people liked this article </small></p> <p><a href="{% url 'article.views.article' article.id %}" class="btn btn-default">View details »</a></p> </div> {% endfor %} {% else %} <div class="col-6 col-sm-6 col-lg-4"> <p>None to show!</p> </div> {% endif %} </div>{% endblock %}
