add bootstrap example (#72)

Author: abe-101

examples/bootstrap/object_confirm_delete.html

@@ -0,0 +1,24 @@
+{# object_confirm_delete.html - Delete confirmation template #}
+{% extends "base.html" %}
+
+{% block content %}
+<div class="row justify-content-center">
+    <div class="col-12 col-md-8 col-lg-6">
+        <div class="card">
+            <div class="card-body">
+                <h1 class="h3 mb-4">Are you sure you want to delete following {{ object_verbose_name }}?</h1>
+
+                <p class="text-danger mb-4">{{ object }}</p>
+
+                <form method="post">
+                    {% csrf_token %}
+                    {{ form }}
+                    <div class="d-grid">
+                        <button type="submit" class="btn btn-danger">Delete</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

examples/bootstrap/object_detail.html

@@ -0,0 +1,10 @@
+{# object_detail.html - Detail view template #}
+{% extends "base.html" %}
+{% load neapolitan %}
+
+{% block content %}
+<h1 class="h3 mb-4">{{ object }}</h1>
+{% object_detail object view.fields %}
+{% endblock %}
+
+

examples/bootstrap/object_form.html

@@ -0,0 +1,26 @@
+{# object_form.html - Create/Edit form template #}
+{% extends "base.html" %}
+{% load crispy_forms_tags %}
+
+{% block content %}
+<div class="row justify-content-center">
+    <div class="col-12 col-md-8 col-lg-6">
+        <h1 class="h3 mb-4">
+            {% if object %}Edit {{ object_verbose_name }}{% else %}Create {{ object_verbose_name }}{% endif %}
+        </h1>
+
+        <div class="card">
+            <div class="card-body">
+                <form method="post">
+                    {% csrf_token %}
+                    {{ form|crispy }}
+                    <div class="d-grid">
+                        <button type="submit" class="btn btn-primary">Save</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+

examples/bootstrap/object_list.html

@@ -0,0 +1,28 @@
+{# object_list.html - Main list template #}
+{% extends "base.html" %}
+{% load neapolitan %}
+
+{% block content %}
+<div class="d-flex align-items-center mb-4">
+    <div class="flex-grow-1">
+        <h1 class="h3">{{ object_verbose_name_plural|capfirst }}</h1>
+    </div>
+    {% if create_view_url %}
+    <div class="ms-auto">
+        <a href="{{ create_view_url }}" class="btn btn-primary">
+            <i class="bi bi-plus-lg"></i>
+            Add a new {{ object_verbose_name }}
+        </a>
+    </div>
+    {% endif %}
+</div>
+
+{% if object_list %}
+    {% object_list object_list view %}
+{% else %}
+    <div class="alert alert-info">
+        <p class="mb-0">There are no {{ object_verbose_name_plural }}. Create one now?</p>
+    </div>
+{% endif %}
+{% endblock %}
+

examples/bootstrap/partial/detail.html

@@ -0,0 +1,12 @@
+{# partial/detail.html - Detail partial template #}
+<div class="card">
+    <div class="card-body">
+        <dl class="row mb-0">
+        {% for field, val in object %}
+            <dt class="col-sm-3">{{ field|capfirst }}:</dt>
+            <dd class="col-sm-9">{{ val }}</dd>
+        {% endfor %}
+        </dl>
+    </div>
+</div>
+

examples/bootstrap/partial/list.html

@@ -0,0 +1,26 @@
+{# partial/list.html - List partial template #}
+<div class="table-responsive">
+    <table class="table table-striped table-hover">
+        <thead>
+            <tr>
+                {% for header in headers %}
+                <th>{{ header|capfirst }}</th>
+                {% endfor %}
+                <th class="text-end">Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for object in object_list %}
+            <tr>
+                {% for field in object.fields %}
+                <td>{{ field }}</td>
+                {% endfor %}
+                <td class="text-end">
+                    {{ object.actions }}
+                </td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
+