Django 1.5.4 专题26 Bootstrap

作者: wcc526
发布时间:2015-07-02 17:16:18

一.安装

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 %}







版权声明:本文为博主原创文章,未经博主允许不得转载。

标签: Bootstrap Django Go
来源:http://blog.csdn.net/wcc526/article/details/12874239

推荐: