2021年6月12日 星期六

Django 3和Bootstrap 5聯手展現布農族拉芙嵐文化特色




程式碼參考網址：https://getbootstrap.com/docs/5.0/components/carousel/

1.準備三張拉芙嵐的特色照片，利用小畫家修成1920X750，儲存在shop/static/slider目錄下，並分別命名為bg1.jpg, bg2.jpg, 以及bg3.jpg。

2.把參考的程式貼在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
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
{% 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-7">拉芙嵐雙龍七彩服務平台</h1></a>
    </div>
<div id="carouselExampleIndicators" class="carousel slide  wet-asphalt" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="{% static "slider/bg1.jpg" %}" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="{% static "slider/bg2.jpg" %}" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="{% static "slider/bg3.jpg" %}" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="false"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="false"></span>
    <span class="visually-hidden">Next</span>
  </button>
</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>
張貼者： 於
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)