我正在使用Twitter Bootstrap和Django来渲染表单。

Bootstrap可以很好地格式化你的表单 - 只要你有它所期望的CSS类。

但是,我的问题是Django的{{ form.as_p }}生成的表单不能很好地使用Bootstrap,因为它们没有这些类。

例如,Django的输出:

    <form class="horizontal-form" action="/contact/" method="post">
        <div style='display:none'>
            <input type='hidden' name='csrfmiddlewaretoken' 
                   value='26c39ab41e38cf6061367750ea8c2ea8'/>
        </div>
        <p><label for="id_name">Name:</label> <input id="id_name" type="text" name="name" value="FOOBAR" maxlength="20" /></p>
        <p><label for="id_directory">Directory:</label> <input id="id_directory" type="text" name="directory" value="FOOBAR" maxlength="60" /></p>
       <p><label for="id_comment">Comment:</label> <textarea id="id_comment" rows="10" cols="40" name="comment">Lorem ipsum dolor sic amet.</textarea></p>
       <p>
           <label for="id_server">Server:</label>
           <select name="server" id="id_server">
               <option value="">---------</option>
               <option value="1" 
                   selected="selected">sydeqexcd01.au.db.com</option>
               <option value="2">server1</option>
               <option value="3">server2</option>
               <option value="4">server3</option>
           </select>
       </p>
       <input type="submit" value="Submit" />
    </form>

据我所知,Bootstrap要求你的表单有一个<fieldset class="control-group"> ,每个<label>都有class="control-label" ,每个<input>都包含在一个<div>

<fieldset class="control-group">
    <label class="control-label" for="input01">Text input</label>
    <div class="controls">
        <input type="text" class="xlarge" name="input01">
        <p class="help-text">Help text here. Be sure to fill this out like so, or else!</p>
    </div>
</fieldset>

但是,在Django中为每个表单字段添加自定义CSS标签是相当痛苦的:

将类添加到Django label_tag()输出

是否有更聪明的方法可以使用{{ form.as_p }} ,或者遍历字段,而不必手动指定内容,或者做一大堆hackery?

干杯,维克多

===============>>#1 票数:52

这就是我想出的:

<form class="form-horizontal" method="post">{% csrf_token %}
    <fieldset>
        <legend>{{ title }}</legend>
        {% for field in form %}
            {% if field.errors %}
                <div class="control-group error">
                    <label class="control-label">{{ field.label }}</label> 
                    <div class="controls">{{ field }}
                        <span class="help-inline">
                            {% for error in  field.errors %}{{ error }}{% endfor %}
                        </span>
                    </div>
                </div>
            {% else %}
                <div class="control-group">
                    <label class="control-label">{{ field.label }}</label> 
                    <div class="controls">{{ field }}
                        {% if field.help_text %}
                            <p class="help-inline"><small>{{ field.help_text }}</small></p>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </fieldset>
    <div class="form-actions">
        <button type="submit" class="btn btn-primary" >Submit</button>
    </div>
</form>

===============>>#2 票数:47 已采纳

我喜欢使用“django-crispy-forms” ,它是django-uni-form的继承者。 这是一个很棒的小API,并且对Bootstrap有很好的支持。

当我需要更多地控制渲染时,我倾向于使用模板过滤器来快速移植旧代码和快速表单,以及模板标记。

===============>>#3 票数:38

当不能使用django-crispy-forms时(例如,当模板单独处理表单的每个字段时),jcmrgo的答案是唯一的方法。 根据他的回答,这里是Bootstrap 3的解决方案(将他的版本留给Boostrap 2),并调整模板内的字段类 虽然使用Django的标准库(在其他解决方案中导致额外的表单或模板标记)无法从模板中访问字段类,但这里有一个解决方案,可以将正确的类设置为字段标记,而无需在模板外部进行编码:

{% load i18n widget_tweaks %}

<form class="form-horizontal" role="form" action="." method="post">
    {% csrf_token %}
    {% for field in form %}
        {% if field.errors %}
            <div class="form-group has-error">
                <label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label>
                <div class="col-sm-10">
                    {{ field|attr:"class:form-control" }}
                    <span class="help-block">
                        {% for error in  field.errors %}{{ error }}{% endfor %}
                    </span>
                </div>
            </div>
        {% else %}
            <div class="form-group">
                <label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label>
                <div class="col-sm-10">
                    {{ field|attr:"class:form-control" }}
                    {% if field.help_text %}
                        <p class="help-block"><small>{{ field.help_text }}</small></p>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    {% endfor %}
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">{% trans "Submit" %}</button>
        </div>
    </div>
</form>

这需要安装django-widget-tweaks并将widget_tweaks添加到INSTALLED_APPS

===============>>#4 票数:10

你可以这样做:

{% for field in form %}
<fieldset class="control-group">
    <label class="control-label" for="id_{{ field.name }}">{{ field.label }}</label>
    <div class="controls">
        {{ field }}
        <p class="help-text">{{ field.help_text }} </p>
    </div>
</fieldset>
{% endfor %}

===============>>#5 票数:8

为了向Django生成的表单添加CSS属性,只需在forms.py中使用以下代码即可:

Recepient = forms.ChoiceField(label=u'Recepient', widget=forms.Select(attrs={'id':'combobox'}))

它将生成以下HTML代码:

<label for="id_Recepient">Recepient</label>
<select id="combobox" name="Recepient">

===============>>#6 票数:4

我绝对推荐https://github.com/dyve/django-bootstrap-toolkit

===============>>#7 票数:3

例如,您可以创建一个类,以您希望的方式定义属性,并相应地调用它。

class ContactForm(ModelForm):
    class Meta:
      model = Contact
      created = MyDatePicker()

class Uniform(forms):
  def __init__(self, *args, **kwargs):
      attrs = kwargs.pop("attrs",{})
      attrs["class"] = "span3"
      kwargs["attrs"] = attrs
      super(Uniform, self).__init__(*args, **kwargs)

class MyDatePicker(Uniform,forms.DateInput)
  def __init__(self, *args, **kwargs):
      attrs = kwargs.pop("attrs",{})
      attrs["class"] = "datepick" 
      attrs["id"] =kwargs.get('datetag', '')
      kwargs["attrs"] = attrs
      super(MyDatePicker, self).__init__(*args, **kwargs)

===============>>#8 票数:3

Bootstrap样式与<div>而不是<p> 所以,如果你希望它看起来不错,你需要以100%恕我直言的方式去引导。 这是我的首选方式:

使用django-bootstrap3应用程序。 例:

{% load bootstrap3 %}

<form class="signup form-horizontal" id="signup_form" method="post" action="{% url 'account_signup' %}">
    {% csrf_token %}
    {% bootstrap_form form layout="horizontal" %}
    {% buttons submit='Sign Up &raquo;' reset='Reset Form' layout='horizontal' %}{% endbuttons %}
</form>

注意1)表格类属性中的horizontal 2)bootstrap_form布局和3)按钮布局。

===============>>#9 票数:3

这是我使用django_tweaks的版本,结果更好看。 我发现使用render_field比添加过滤器更轻。 我还添加了bootstrap格式的警报消息并关闭了导航器验证(带有无效)。 我对Django比较新,所以如果你发现任何无意义的话,请不要犹豫

<form class="large" method="post" action="/suscript/" novalidate>
    {% csrf_token %}
    <fieldset>
        <legend>{{ title }}</legend>
        {% for field in form %}
            <div class="control-group {%if field.errors %}error{%endif%}">
                <div class="input-group controls">
                    <label class="input-group-addon control-label" id="{{field.label|safe}}">{{ field.label }}</label>
                    {% render_field field type="text" class="form-control" placeholder="" aria-describedby="field.label|safe" %}
                </div>
                    {% for error in field.errors %}
                         <div class="alert alert-danger">
                            <strong>{{ error|escape }}</strong>
                         </div>
                    {% endfor %}

                    {% if field.help_text %}
                        <p class="help-inline">{{ field.help_text|safe }}</p>
                    {% endif %}
            </div>

        {% endfor %}
    </fieldset>
    <div class="form-actions">
        <button type="submit" class="btn btn-primary" >Submit</button>
    </div>
</form>

===============>>#10 票数:2

最快速和最简单的方法是定义扩展Django Form类的自己的基类,并重新定义其as_p方法,以Bootstrap要求的格式输出。 然后将表单更改为继承自新的Form类而不是Django的。

===============>>#11 票数:0

除了其他朋友说的话,我建议使用'django-widget-tweaks'。

答案是这样的:

{% for field in form %}
      <label for="{{ field.label }}">{{ field.label }}</label>
      {{ field|add_class:"form-control" }}
      <span class="error-block">{{ field.errors }}</span>
{% endfor %}

  ask by victorhooi translate from so

未解决问题?本站智能推荐:

2回复

使用Django和Bootstrap创建表单

好的,所以我创建了一个简单的购买表单,它使用了一些自定义表单字段。 我已经渲染了一个简单的表单来测试它是否正常工作,它确实如下所示。 现在,我希望将它设置为Bootstrap 3.我已经设法使用django widget tweaks包没有任何问题。 但是,当我提交表单时,我收到此错
1回复

django-bootstrap3 - bootstrap_css的目的是什么?

我读通过文档使用bootstrap3-django的模板。 我不明白{% bootstrap_css %}的目的。 我查看了这个标签的source code ,但我无法理解它的用途是什么? 在我的base.html模板中,我有: 这里我有{% bootstrap_css %}和
4回复

将Bootstrap或Sylilng添加到内置表单的Django中

我刚刚用django启动了我的第一个应用程序。 我以前使用引导程序和自定义样式构建了表单。 现在,我开始了解带有模型的Django内置表单。 我已经为此编写了代码,但是发现没有样式,而且看起来很丑。 我想将自定义样式添加到此表单中,我该怎么做。 这是我的代码。 model.py
1回复

如何使用django-bootstrap3自定义CSS

我正在安装Django-bootstrap3的Django项目中工作。 它似乎已成功安装,并且通常可以正常工作...但是我不确定如何使用此设置来自定义CSS。 有人可以帮忙吗?
2回复

django中的bootstrap 3的css没有按预期工作

我想在我的django应用程序中使用tabbable div。 切换似乎按预期工作,内容确实显示单击下一个选项卡时。 但CSS似乎没有起作用。 当我单击tab2时,焦点仍然位于选项卡1.在选项卡2上,它只显示按钮,当我单击页面的其他部分时,灰色消失,即使显示tab2详细信息,焦点也是标
1回复

Django中的Bootstrap和Admin CSS冲突

我正在将Bootstrap与Django以及管理员使用的CSS(用于日期小部件)一起使用。 我的问题是,在我拥有日期小部件的页面上,admin css覆盖了bootstrap css,因此整个页面看起来都不同。 我该如何解决? base.html文件 带有日期小部件的模板
1回复

Bootstrap Jumbotron CSS模板不适用于Django项目

我是Django项目的新手,正在尝试将Bootstrap应用于我的Django网站。 首先,让我向您展示获得的屏幕,因为这样可以更好地理解屏幕。 该页面是网站的“关于”(在我的项目结构中为“ hakkimizda”文件夹)页面,并且是Django的扁平页面。 页面结果图像 我
1回复

我的CSS文件未在Django中加载,但Bootstrap文件加载正常

我有一个在Django上运行的简单网站。 当我加载Bootstrap css文件时,页面加载格式就好了。 但是我尝试加载已创建并保存在与Bootstrap css文件相同的文件夹中的css文件,该文件未加载。 在此处查看文件http://jsfiddle.net/zptkvx5c/两种情况
6回复

crispy-forms:为其中一个输入添加css类

在我的forms.py我有 它呈现给 现在我想只是名字输入要小一些,就像这样: (如何)以脆皮形式实现?
1回复

Django:如何在引导程序中将表单放在html模板上?

我试图简单地将已在Django html模板上呈现的表单居中。 它是一个引导程序组件(窗体),我尝试将“ center” html标记放置在各个位置,但没有成功。 我尝试将center标签放在表单之外,Django模板语言块之外,以及基本模板中div之外。 在这种情况下,可以有人建议a