九 Django 1.5.4 Bootstrap

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


三.效果如图

九 Django 1.5.4 Bootstrap_第1张图片

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


九 Django 1.5.4 Bootstrap_第2张图片


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


九 Django 1.5.4 Bootstrap_第3张图片

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


九 Django 1.5.4 Bootstrap_第4张图片



你可能感兴趣的:(django,bootstrap)