如何在 Django FileField/CharField/BooleanField/Upload 按钮上使用引导程序答案

【问题标题】：How to use bootstrap on Django's FileField/CharField/BooleanField/Upload button如何在 Django FileField/CharField/BooleanField/Upload 按钮上使用引导程序
【发布时间】：2015-12-27 16:14:44
【问题描述】：

我有以下 Django 设置。

models.py

class Method1(models.Model):
    inputfile_param = models.FileField()
    species_param   = models.CharField(max_length=20, choices=(('mouse', 'Mouse'), ('human','Human')))
    norm_mode_param = models.CharField(max_length=20, choices=(('genecount_norm', 'Gene Count'), ('totalscore_norm','Total Score')))
    logscale_param  = models.BooleanField(default=False)

views.py

from .forms import Method1Form
def method1_input(request):
    if request.method == 'POST':
        form = Method1Form(request.POST, request.FILES)
        # Handle file upload
        if form.is_valid():
            q = form.save()
            q.save()
            # This is where we run code
            # with the given parameters
            q.run_code1()

            # This will show the method1_result to be executed.
            return HttpResponseRedirect(reverse('method1-result', kwargs={'id': q.id }))

    else:
        form = Method1Form()

    return render(request, 'mycool_app/method1.html', {'form':form})

forms.py

from .models import Method1
class Method1Form(forms.ModelForm):
    class Meta:
        model = Method1
        # Exclude means what not to show
        # when form is displayed
        exclude = ['state','clustering_state','ip_address','creationtime']

HTML

设置mycool_app/method1.html文件：

<!DOCTYPE html>
<html>
<body>
      <form  action="{% url 'method1-input' %}" method="post" enctype="multipart/form-data">
          {% csrf_token %}
          <p> {{form.inputfile_param.errors}} </p>
          <p> {{form.inputfile_param}} </p>
          <p> {{form.species_param }} </p>
          <p> {{form.norm_mode_param }} </p>
          <p> Log-scaling {{form.logscale_param}}</p>

      <p><input type="submit" value="Upload" /></p>
</body>
</html>

最后看起来像这样：

我想用 Bootstrap 渲染它。我该怎么做？

【问题讨论】：

Method1Form 定义在哪里？
@KlausD。在forms.py。查看我的更新。
除了下面的答案之外，您还必须将引导 css 包含到您的 HTML 中。

标签： python html css django twitter-bootstrap

【解决方案1】：

你需要在你的表单中完成它

类似这样的：

form.py

state_list = State.objects.filter().order_by('name')

class MyForm(forms.ModelForm):

def __init__(self, *args, **kwargs):
    super(MyForm, self).__init__(*args, **kwargs)

    self.fields['state'] = forms.ModelChoiceField(
        required=True,
        error_messages={'required': 'State / Province is Required!'},
        label='State',
        widget=forms.Select(attrs={
            'class': 'form-control dropdown-toggle input-lg',
            'data-toggle': 'dropdown',
            'aria-expanded': 'false',
            'role': 'menu',
            'required': 'required',
            'oninvalid': "this.setCustomValidity('State / Province is Required!')",
            'onchange': "this.setCustomValidity('')",
        }),
        queryset=state_list,
        empty_label='Select State / Province',
    )

    .... more fields 

class Meta:
    model = MyModel
    fields = [
        'myfield',
    ]

template.html

<div class="form-group">
  <label for="state" class="col-sm-4 control-label">State</label>
  <div class="col-sm-8">
    {{ form.state }}
  </div>
</div>

您可以在 Bootstrap here 中看到相同的渲染 Django 表单

【讨论】：