python之Django 脆皮表单选项卡

我现在正在研究Django form。现在我专注于脆皮。

现在很简单，在我掌握了表单之后，我将继续学习Django Admin form和Django admin model form.

Django 1.10
Python 3.6.0

我正在学习这些教程:
https://blog.bixly.com/awesome-forms-django-crispy-forms
http://django-crispy-forms.readthedocs.io/en/latest/layouts.html#
https://godjango.com/29-crispy-forms/

这是我的源代码:

views.py:

from django.views.generic import FormView 
from apps.colors.forms import PersonDetailForm 
 
class ColorStudyView(FormView): 
    template_name = 'colors/study.html' 
    form_class = PersonDetailForm 
    success_url = '/' 

表单.py:

from crispy_forms.bootstrap import Tab, TabHolder 
from crispy_forms.helper import FormHelper 
from crispy_forms.layout import Submit, Layout 
from django import forms 
 
 
class NoFormTagCrispyFormMixin(object): 
    @property 
    def helper(self): 
        if not hasattr(self, '_helper'): 
            self._helper = FormHelper() 
            self._helper.form_tag = False 
        return self._helper 
 
 
class PersonDetailForm(forms.Form): 
    name = forms.CharField(max_length=100) 
    age = forms.IntegerField(required=False) 
    address1 = forms.CharField(max_length=50, required=False) 
    address2 = forms.CharField(max_length=50, required=False) 
    city = forms.CharField(max_length=50, required=False) 
    state = forms.CharField(max_length=50, required=False) 
 
    mobile = forms.CharField(max_length=32, required=False) 
    home = forms.CharField(max_length=32, required=False) 
    office = forms.CharField(max_length=32, required=False) 
    twitter = forms.CharField(max_length=100, required=False) 
 
    def __init__(self, *args, **kwargs): 
        super().__init__(*args, **kwargs) 
        self.helper = FormHelper() 
        self.helper.form_tag = False 
        self.helper.layout = Layout( 
            TabHolder( 
                Tab('Information', 
                    'name', 
                    'age' 
                    ), 
                Tab('Address', 
                    'address1', 
                    'address2', 
                    'city', 
                    'state' 
                ), 
                Tab('Contact', 
                    'mobile', 
                    'home', 
                    'office', 
                    'twitter', 
                ) 
            ) 
        ) 
        self.helper.layout.append(Submit('submit', 'Submit')) 

study.html:

{% load crispy_forms_tags %} 
 
 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
    <meta charset="UTF-8"> 
    <title>Study</title> 
    <form action="" method="POST"> 
    {% crispy form %} 
    </form> 
</head> 
<body> 
 
</body> 
</html> 

问题:
Tab 没有变化。
我错过了什么吗？
很抱歉提出非常基本的问题，但这是我第一天使用 Django 前端

这是我的照片。选项卡 Address 和 Contact 不起作用。

更新: Zollie 解决了我的问题。这是我的 study.html

{% load staticfiles %} 
{% load crispy_forms_tags %} 
 
 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
    <meta charset="UTF-8"> 
    <title>Study</title> 
    <form action="" method="POST"> 
    {% crispy form %} 
    </form> 
</head> 
<body> 
<script src="http://code.jquery.com/jquery-1.9.1.js"> 
</script> 
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"> 
</script> 
<script type="text/javascript" src="{% static 'bootstrap-tab.js' %}">  </script> 
 
</body> 
</html> 

这是我的文件系统配置

/Users/el/Code/siam-sbrand/static 
(siam-sbrand) Sarits-MacBook-Air-2:static el$ ls 
admin           django_extensions   img 
bootstrap-tab.js    file.txt        js 
dist            font            rest_framework 

请您参考如下方法:

当我第一次想使用脆皮形式的标签时，我遇到了同样的问题。不幸的是，这个包的文档非常薄弱。

为什么 TabHolder 和 Tabs 不起作用的答案是，因为你必须在你的 html 模板头中包含 jquery 和 javascript。此外，您必须下载 bootstrap-tab.js 并将其放入 bootstrap 子文件夹中的“static”文件夹中，例如，您还必须在 html 中包含它的路径。

因此，仅在 html 头部包含 Bootstrap 或 bootstrap.css 是不够的。 这是一个示例:

  <head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"> 
</script> 
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"> 
</script> 
<script type="text/javascript" src="{% static 'bootstrap/js/bootstrap-tab.js' %}">  </script>