Hình thức Django với bootstrap

Django CRUD với Biểu mẫu và Mẫu Bootstrap

Chế độ xem dựa trên chức năng đơn giản Django CRUD với mẫu Django Forms và Bootstrap

Sử dụng Bootstrap và django-crispy-forms, các mẫu được hiển thị có thể dễ dàng được cải thiện để trông đẹp hơn nhiều mà không cần phải điều chỉnh kiểu dáng theo cách thủ công. Ví dụ

Ví dụ: tôi mở rộng Ứng dụng Django “Xin chào thế giới” của mình (được mô tả trong bài đăng trước) bằng cách thêm một biểu mẫu đơn giản và hiển thị nó bằng Bootstrap và django-crispy-forms. Tất cả những gì nó làm là hỏi tên người dùng và ngày tháng, sau đó hiển thị

INSTALLED_APPS = (
    ...
    'crispy_forms',
)

Cài đặt phần phụ thuộc và thêm nó vào

INSTALLED_APPS = (
    ...
    'crispy_forms',
)

pip install django-crispy-forms

Thêm

INSTALLED_APPS = (
    ...
    'crispy_forms',
)

INSTALLED_APPS = (
    ...
    'crispy_forms',
)

INSTALLED_APPS = (
    ...
    'crispy_forms',
)

Kích hoạt gói mẫu Bootstrap 4, thêm dòng sau vào

INSTALLED_APPS = (
    ...
    'crispy_forms',
)

CRISPY_TEMPLATE_PACK = 'bootstrap4'

Cho đến nay, không có gói mẫu

INSTALLED_APPS = (
    ...
    'crispy_forms',
)

INSTALLED_APPS = (
    ...
    'crispy_forms',
)

CRISPY_TEMPLATE_PACK = 'bootstrap4'

Tạo biểu mẫu Django

Ví dụ: tôi tạo một biểu mẫu mới cho phép người dùng chỉ định tên của họ và ngày tùy ý sẽ được hiển thị trong ứng dụng “Xin chào thế giới”. Để làm được điều đó, tôi tạo

CRISPY_TEMPLATE_PACK = 'bootstrap4'

import datetime

from django import forms


class HelloWorldForm(forms.Form):
    """Form asking for the user's name and an arbitrary date, both used inside the displayed 'Hello World' text."""
    username = forms.CharField(label='Your Name', max_length=100)
    date = forms.DateField(label='An arbitrary date', initial=datetime.date.today,
                           widget=forms.widgets.DateInput(attrs={'type': 'date'}),
                           help_text='The entered name and date will be displayed temporarily but publicly in the '
                                     'generated "Hello World" message. It will not be stored.')

Hầu hết các đối số trường là tùy chọn nhưng cung cấp thông tin bổ sung cho django-crispy-forms để hiển thị trong biểu mẫu Bootstrap

Sau đó, tôi sử dụng biểu mẫu này bên trong

CRISPY_TEMPLATE_PACK = 'bootstrap4'

def index(request):
    # retriever counter model instance from DB or create it if it doesn't exist yet
    counter, created = Counter.objects.get_or_create(name='hello-world-button')

    # increment counter when a POST request arrives (from the button click)
    # see previous blog post: https://stefanbschneider.github.io/blog/django-db
    if request.method == 'POST':
        counter.value += 1
        counter.save()

        # and get the values filled in form
        form = HelloWorldForm(request.POST)
        if form.is_valid():
            username = form.cleaned_data['username']
            date = form.cleaned_data['date']

    else:
        form = HelloWorldForm()
        username = 'Nobody'
        date = datetime.date.today()

    context = {
        'clicks': counter.value,
        'form': form,
        'username': username,
        'date': date,
    }
    return render(request, 'helloworld/index.html', context)

Cuối cùng, hiển thị biểu mẫu trong mẫu

CRISPY_TEMPLATE_PACK = 'bootstrap4'

 class="alert alert-success" role="alert">
    {{ username }} says: "Hello World!" on {{ date }}. (Button clicked {{ clicks }}x in total.)