card 卡片 html

侬侬发發表於2024-04-24
HTML

{% extends 'base.html' %}

{% block content %}
    <div class="container">
        <h1>客戶資訊列表</h1>
        <form class="form-inline mb-3" method="GET" action="{% url 'customer_list' %}">
            <input class="form-control mr-sm-2" type="search" name="search_query" placeholder="Search..."
                   aria-label="Search" value="{{ request.GET.search_query }}">
            <button class="btn btn-outline-primary my-2 my-sm-0 mb-3" type="submit">查詢</button>
            <a class="btn btn-primary  my-2 my-sm-0  mb-3" href="{% url 'customer_create' %}">新增客戶資訊</a>
        </form>
        <div class="row">
            {% for customer in customers %}
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card h-100">
                        <div class="card-header bg-primary text-white">
                            <h5 class="card-title mb-0">{{ customer.cu_no }}</h5>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">{{ customer.cu_name }}</h5>
                            <p class="card-text"><strong>BILL TO:</strong> {{ customer.bill_to }}</p>
                            <p class="card-text"><strong>Address:</strong> {{ customer.bill_to_address }}</p>
                            <p class="card-text"><strong>Consignee:</strong> {{ customer.consignee }}</p>
                            <p class="card-text"><strong>SHIP TO:</strong> {{ customer.ship_to }}</p>
                            <p class="card-text"><strong>ADDRESS:</strong> {{ customer.ship_to_address }}</p>
                            <p class="card-text"><strong>CONTACT:</strong> {{ customer.contact }}</p>
                            <p class="card-text"><strong>SHIP BY:</strong> {{ customer.ship_by }}</p>
                        </div>
                        <div class="card-footer">
                            <a href="{% url 'customer_detail' customer.pk %}" class="btn btn-info">詳情</a>
                            <a href="{% url 'customer_update' customer.pk %}" class="btn btn-warning">編輯</a>
                            <a href="{% url 'customer_delete' customer.pk %}" class="btn btn-danger">刪除</a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    <div>
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center mt-3">
            {% if customers.has_previous %}
                <li class="page-item"><a class="page-link" href="?page=1">First</a></li>
                <li class="page-item"><a class="page-link"
                                         href="?page={{ customers.previous_page_number }}">Previous</a>
                </li>
            {% endif %}
            <li class="page-item disabled"><a class="page-link" href="#">Page {{ customers.number }}
                of {{ customers.paginator.num_pages }}</a></li>
            {% if customers.has_next %}
                <li class="page-item"><a class="page-link" href="?page={{ customers.next_page_number }}">Next</a>
                </li>
                <li class="page-item"><a class="page-link" href="?page={{ customers.paginator.num_pages }}">Last</a>
                </li>
            {% endif %}
        </ul>
    </nav>
    </div>
{% endblock %}

相關文章