一.base.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Proyecto Demo</title>
<!-- Le styles -->
<link href="/media/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/media/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<script src="/media/js/jquery.js"></script>
<script src="/media/bootstrap/js/bootstrap.js"></script>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="{% url vista_principal %}">Proyecto Ventas </a>
{% if user.is_authenticated %}
<p class="navbar-text pull-right">
Logged in as {{ user.username }}
</p>
{% endif %}
<ul class="nav">
<li><a href="/productos/page/1/">Productos</a></li>
<li><a href="{% url vista_contacto %}">Contacto</a></li>
<li><a href="{% url vista_about %}">Acerca de ...</a></li>
{% if user.is_authenticated %}
<li><a href="{% url vista_logout %}"> Cerrar Sesion </a></li>
{% else %}
<li><a href="{% url vista_login %}"> Login </a></li>
{% endif %}
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div class="hero-unit">
{% block content %}
{% endblock%}
</div>
</div><!--/span-->
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Mi Carrito</li>
<br><p align="justify">
Carrito de Super
</p>
</ul>
</div><!--/.well -->
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Nuevos Productos</li>
<br><p align="justify">
Aquí habrán nuevos productos posterioremente
cargados con jquery.
</p>
</ul>
</div><!--/.well -->
<img src="/media/images/django.gif"/>
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
<p>© Open Project 2013 </p>
</footer>
</div><!--/.fluid-container-->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
二.productos.html
{% extends 'base.html' %}
{% block title %} Lista de Productos {% endblock %}
{%block content %}
<h3>Catalogo de Productos:</h3>
{% if user.is_authenticated %}
<a href="{% url vista_agregar_producto %}">Agregar nuevo</a><br>
{% endif %}
<br>
{% if productos %}
<table class="table table-hover">
<thead>
<tr>
<th>Producto</th>
<th>Precio</th>
<th>Stock</th>
</tr>
</thead>
{% for p in productos %}
<tbody>
<tr>
<td>{{ p.nombre }}</td>
<td>{{ p.precio }}</td>
<td>{{ p.stock }}</td>
<td><a class="btn" href="/producto/{{p.id}}/"><i class="icon-search"></i> Ver</a></td>
<td><a class="btn" href="#"><i class="icon-shopping-cart"></i> Comprar</a></td>
</tr>
</tbody>
{% endfor %}
</table>
{% else %}
<h2>No existen productos activos a la venta 
</h2>
{% endif %}
<br>
{% if productos %}
<div class="pagination">
<ul>
<li><a href="/productos/page/1"> << </a></li>
{% if productos.has_previous %}
<li><a href="/productos/page/{{productos.previous_page_number }}/"> Prev </a></li>
{% else %}
<li><a href="#"> Prev </a></li>
{% endif %}
{% if productos.has_next %}
<li><a href="/productos/page/{{productos.next_page_number }}/"> Next </a></li>
{% else %}
<li><a href="#"> Next </a></li>
{% endif %}
<li><a href="/productos/page/{{productos.paginator.num_pages }} "> >> </a><li>
</ul>
</div>
<h4> Página {{ productos.number }} de {{ productos.paginator.num_pages }}</h4>
{% endif %}
{% endblock %}
三.效果如图
四.Contacto.html
{% extends 'base.html'%}
{% block title %}Contactanos {% endblock %}
{% block content %}
<br>
{% if info_enviado %}
Gracias por enviar un comentario, nos pondremos en contacto contigo.
<br>
La informacion recibida fue la siguiente<br>
<p>Email utilizado: {{email}}</p>
<p> Titulo: {{titulo}}</p>
<p> Texto Citado: </p><br><br> <h3>{{texto}}<h3>
{% else %}
<form action="." method="POST">
{% csrf_token %}
{{form.as_p}}
<button class="btn btn-primary" type="submit">Enviar Comentario</a>
</form>
{% endif %}
{% endblock %}
五.SingleProducto.html
{% extends 'base.html' %}
{% block title %} Producto {{producto.nombre}} {% endblock %}
{%block content %}
<h1> {{ producto.nombre }}</h1><br>
<img src="/media/{{ producto.imagen }}" width="150px" heigth="150px"/>
<p> {{ producto.descripcion }}</p>
<p> ${{ producto.precio }}</p>
<p> Cantidad en Existencia: {{ producto.stock }} Unidades </p>
{% if producto.stock > 0 %}
<a class="btn btn-primary" href="#"> Comprar Producto </a>
{% endif %}
<a class="btn btn-primary" href="javascript:window.history.go(-1);"> Regresar a la Lista </a>
{% endblock %}
六.login.html
{% extends "base.html" %}
{% block title %} Login {% endblock %}
{% block content %}
<form action="." method="POST">
{% csrf_token %}
{{ mensaje }}
{{ form.as_p }}
<button class="btn btn-primary" type="submit"> Login </button>
</form>
{% endblock %}
