如何在Django中应用这种样式？ （无线电类型）

Question

如何在Django中应用这种样式？ 我只能在Django申请一堂课，但我不能报名。

Django 2.1，python 3.7

我要使用此CSS样式https://bootsnipp.com/snippets/Zk2Pz

<div class="funkyradio">
        <div class="funkyradio-default">
            <input type="radio" name="radio" id="radio1" />
            <label for="radio1">First Option default</label>
        </div>
        <div class="funkyradio-primary">
            <input type="radio" name="radio" id="radio2" checked/>
            <label for="radio2">Second Option primary</label>
        </div>
        <div class="funkyradio-success">
            <input type="radio" name="radio" id="radio3" />
            <label for="radio3">Third Option success</label>
        </div>
        <div class="funkyradio-danger">
            <input type="radio" name="radio" id="radio4" />
            <label for="radio4">Fourth Option danger</label>
        </div>
        <div class="funkyradio-warning">
            <input type="radio" name="radio" id="radio5" />
            <label for="radio5">Fifth Option warning</label>
        </div>
        <div class="funkyradio-info">
            <input type="radio" name="radio" id="radio6" />
            <label for="radio6">Sixth Option info</label>
        </div>
    </div>

我要应用这部分， 而我的Django表单类是

class DataUploadForm(forms.ModelForm):
    class Meta:
        model = DataUpload
        fields =('Type', 'Kind', 'description', 'document',)
        widgets = {
            'Type': forms.RadioSelect(attrs = {'class' : 'funkyradio funkyradio-default'}),
            'Kind': forms.RadioSelect(),
        }

但这不起作用

我想要使用该CSS的单选表格

Answer 1

根据您要查找的内容，一种解决方案是在模板中呈现表单时获得更精细的显示。

Django docs提供说明。

以下是根据文档可以实现所需结果的一种方法：

在您的 forms.py 中，您可以执行以下操作：

class TestForm(forms.Form):

    choices=(('Value1', 'Choice1'), 
             ('Value2', 'Choice2'), 
             ('Value3', 'Choice3')
             ..
            )

    options = forms.ChoiceField(widget=forms.RadioSelect, choices=choices)

在 views.py 中访问表单：

def my_view(request):
    # your code here

    return render(request, 'your_app/template.html', form=TestForm())

然后在您的模板的 template.html 文件中：

<form action='/place_url_here', method='POST'>
    {% csrf_token %}
    <div class="funkyradio">
        {% for radio in form.options %}
            <div class="funky-{{ radio.choice_label }}">
                {{ radio.tag }}
                <label for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
            </div>
        {% endfor %}
    </div>
</form>

基于上述内容，您可以修改样式以获得所需的结果。

希望有帮助。祝你好运。