前一篇文章我們把Django升級到3.2.4版,本篇文章我們來把Bootstrap3升級為Bootstrap5,步驟如下:
2.使用pip list檢查安裝的套件,發現bootstrap3以及bootstrap-v5都在shopenv環境中。
3.使用pip uninstall 命令來移除bootstrap3
5.修改設定檔django_shop_tutorial/settings.py,將bootstrap3改為bootstrap5。
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'bootstrap5', 'shop', 'cart', 'orders', 'paypal.standard.ipn', 'payment', ]
5.修改樣版
(1)shop/templates/shop/base.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | {% load static %} {% load bootstrap5 %} <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>{% block title %}{% endblock %}</title> <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> {% bootstrap_css %} {% bootstrap_javascript %} </head> <body> <div class="container"> <div class="page-header"> <a href="/"><h1 class="display-1">My shop</h1></a> </div> <div class="panel panel-default"> <div class="panel-heading"> {# call __len__ #} {% with total_items=cart|length %} {% if cart|length > 0 %} Your cart: <a href="{% url "cart:cart_detail" %}"> {# If total_items is 1, the output will be 1 item. #} {# If total_items is 2, the output will be 2 items. #} {{ total_items }} item{{ total_items|pluralize }}, ${{ cart.get_total_price }} </a> {% else %} Your shopping cart is empty. {% endif %} {% endwith %} </div> </div> {% block content %} {% endblock %} </div> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | {% extends "shop/base.html" %} {% load static %} {% block title %} {% if category %}{{ category.name }}{% else %}Products{% endif %} {% endblock %} {% block content %} <div class="row"> <div class="col-md-3"> <h3>Categories</h3> <ul class="nav flex-column"> <li {% if not category %}class="nav-item"{% endif %}> <a href="{% url "shop:product_list" %}">All</a></li> {% for c in categories %} <li {% if category.slug == c.slug %}class="nav-item"{% endif %}> <a href="{{ c.get_absolute_url }}">{{ c.name }}</a> </li> {% endfor %} </ul> </div> <div class="col-md-9"> <h2>{% if category %}{{ category.name }}{% else %}Products{% endif %}</h2> <div class="row"> {% for product in products %} <div class="col-md-4"> <div class="thumbnail"> <a href="{{ product.get_absolute_url }}"> <img class="img-thumbnail" src="{% if product.image %}{{ product.image.url }} {% else %}{% static "img/no_image.png" %} {% endif %}"> </a> <a href="{{ product.get_absolute_url }}">{{ product.name }}</a><br> ${{ product.price }} </div> </div> {% endfor %} </div> </div> </div> {% endblock %} |
(3)shop/templates/shop/product/detail/html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | {% extends "shop/base.html" %} {% load static %} {% load bootstrap5 %} {% block title %} {% if category %}{{ category.title }}{% else %}Products{% endif %} {% endblock %} {% block content %} <div class="row"> <div class="col-md-12"> <div class="col-md-6 col-md-4"> </div> <div class="col-md-6 col-md-4"> <div class="thumbnail"> <img class="img-fluid" src="{% if product.image %}{{ product.image.url }} {% else %}{% static "img/no_image.png" %}{% endif %}" class="img-responsive"> <div class="caption"> <div class="row"> <div class="col-md-6 col-xs-6"> <h3>{{ product.name }}</h3> </div> <div class="col-md-6 col-xs-6 price"> <h3> <label>${{ product.price }}</label></h3> </div> </div> <p>{{ product.description }}</p> <h2><a href="{{ product.category.get_absolute_url }}">{{ product.category }}</a></h2> <form action="{% url "cart:cart_add" product.id %}" method="post"> {% csrf_token %} {% bootstrap_form cart_product_form %} {% buttons %} <button type="submit" class="btn btn-success btn-product"> <span class="glyphicon glyphicon-shopping-cart"></span> Add to cart </button> {% endbuttons %} </form> <p></p> </div> </div> </div> <div class="col-md-6 col-md-4"> </div> </div> </div> {% endblock %} |
(4)cart/templates/cart/detail/html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | {% extends "shop/base.html" %} {% load static %} {% load bootstrap5 %} {% block title %} Your shopping cart {% endblock %} {% block content %} <h1>Your shopping cart</h1> <div class="row"> <div class="col-sm-12 col-md-10 col-md-offset-1"> <table class="table table-hover"> <thead> <tr> <th>Product</th> <th>Quantity</th> <th class="text-center">Price</th> <th class="text-center">Total</th> <th> </th> </tr> </thead> <tbody> {% for item in cart %} {% with product=item.product %} <tr> <td class="col-sm-8 col-md-6"> <div class="media"> <a class="thumbnail pull-left" href="{{ product.get_absolute_url }}"> <img class="media-object" src="{% if product.image %}{{ product.image.url }} {% else %}{% static "img/no_image.png" %}{% endif %}" style="width: 72px; height: 72px;"> </a> <div class="media-body"> <h4 class="media-heading"><a href="{{ product.get_absolute_url }}">{{ product.name }}</a></h4> <span>Status: </span><span class="text-success"><strong>In Stock</strong></span> </div> </div> </td> <td class="col-sm-1 col-md-1" style="text-align: center"> <form action="{% url "cart:cart_add" product.id %}" method="post"> {% csrf_token %} {% bootstrap_field item.update_quantity_form.quantity show_label=False %} {% bootstrap_field item.update_quantity_form.update %} {% buttons %} <button type="submit" class="btn btn-success btn-product"> Update </button> {% endbuttons %} </form> </td> <td class="col-sm-1 col-md-1 text-center"><strong>${{ item.price }}</strong></td> <td class="col-sm-1 col-md-1 text-center"><strong>${{ item.total_price }}</strong></td> <td class="col-sm-1 col-md-1"> <a href="{% url "cart:cart_remove" product.id %}" class="btn btn-danger"> <i class="glyphicon glyphicon-remove" aria-hidden="true"></i> Remove </a> </td> </tr> {% endwith %} {% endfor %} <tr> <td> </td> <td> </td> <td> </td> <td><h3>Total</h3></td> <td class="text-right"><h3><strong>${{ cart.get_total_price }}</strong></h3></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> <a href="{% url "shop:product_list" %}" class="btn btn-default"> Continue Shopping <i class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></i> </a> </td> <td> <a href="{% url "orders:order_create" %}" class="btn btn-default">Checkout <i class="glyphicon glyphicon-play" aria-hidden="true"></i> </a> </td> </tr> </tbody> </table> </div> </div> {% endblock %} |
沒有留言:
張貼留言