前一篇文章我們把Django升級到3.2.4版，本篇文章我們來把Bootstrap3升級為Bootstrap5，步驟如下：
1,安裝dajngo-bootstrap-v5
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>
|
(2)shop/templates/shop/product/list.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 %}
|
