Fatal编程技术网
  • css/
  • Django表单和引导-CSS类和<；divs>；

Django表单和引导-CSS类和<；divs>；

css django twitter-bootstrap

Django表单和引导-CSS类和<；divs>；,css,django,twitter-bootstrap,Css,Django,Twitter Bootstrap,我使用Django来渲染表单 Bootstrap可以很好地格式化您的表单，只要您拥有它期望包含的CSS类 然而，我的问题是，Django的{{form.as_p}}生成的表单不能很好地用Bootstrap呈现，因为它们没有这些类 例如，Django的输出： <form class="horizontal-form" action="/contact/" method="post"> <div style='display:none'>

我使用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>
但是，将自定义CSS标签添加到Django中的每个表单字段是相当痛苦的：

有没有一种更聪明的方法可以使用
{{form.as_p}}
，或者在不必手动指定内容的情况下遍历字段，或者进行一系列黑客操作

干杯，
Victor

最快、最简单的方法是定义自己的基类来扩展Django Form类，并将其
重新定义为\u p
方法，以引导所需的格式输出。然后将表单更改为从新表单类继承，而不是从Django的表单类继承。

您可以执行以下操作：

{% 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 %}

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

{%用于表单%]中的字段
{{field.label}
{{field}}

{{field.help_text}

{%endfor%}
我喜欢使用django uni表单的后续版本。这是一个很好的小API，对引导有很好的支持

我倾向于使用模板过滤器快速移植旧代码和快速表单，并在需要对呈现进行更多控制时使用模板标记。

我绝对建议使用模板过滤器。

例如，您可以创建一个类，以您想要的方式定义属性，并相应地调用它

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)
这就是我想到的：

<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>

{%csrf\u令牌%}
{{title}}
{%形式的字段为%}
{%if field.errors%}
{{field.label}
{{field}}
{%for字段中的错误。错误%}{{error}{%endfor%}
{%else%}
{{field.label}
{{field}}
{%if field.help_text%}

{{field.help\u text}

{%endif%}
{%endif%}
{%endfor%}
提交
为了向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">

最近
当无法使用django crispy表单时（例如，当模板单独处理表单的每个字段时），jcmrgo的答案是唯一的选择。根据他的回答，这里有一个针对引导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>

{%load i18n widget\u tweaks%}
{%csrf_令牌%}
{%形式的字段为%}
{%if field.errors%}
{{field.label}
{field | attr:“类：表单控件”}
{%for字段中的错误。错误%}{{error}{%endfor%}
{%else%}
{{field.label}
{field | attr:“类：表单控件”}
{%if field.help_text%}

{{field.help\u text}

{%endif%}
{%endif%}
{%endfor%}
{%trans“提交”%}
这需要安装并添加
小部件。
引导样式表单使用
s而不是
s。所以，如果你想让它看起来漂亮，你需要100%的自我引导。以下是我喜欢的方法：

使用应用程序。例如：


{% 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>



{%load bootstrap3%}
{%csrf_令牌%}
{%bootstrap_form layout=“horizontal”%}
{%buttons submit='Sign-Up»；'reset='reset Form'布局='horizontal'%}{%endbuttons%}



请注意1）表单类属性2）引导表单布局和3）按钮布局中的
水平
。
这是我使用django\u调整的版本，效果更好。我发现render_字段比添加过滤器更容易使用。我还添加了引导格式的警报消息，并关闭了导航器验证（使用novalidate）。我对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>




{%csrf_令牌%}
{{title}}
{%形式的字段为%}
{{field.label}
{%render_field type=“text”class=“form control”placeholder=”“aria descripebby=“field.label | safe”%%
{%字段中有错误。错误%}
{{error | escape}}
{%endfor%}
{%if field.help_text%}

{{field.help_text | safe}

{%endif%}
{%endfor%}
提交

除了其他朋友所说的，我建议使用“django小部件调整”

答案是这样的：


{% 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 %}



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



{%用于表单%]中的字段
{{field.label}
{field | add_类：“表单控件”}
{{字段。