Django Forms and Bootstrap-CSSクラスと<divs>
Twitter Bootstrap with 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>
ただし、カスタムCSSラベルをDjangoのすべてのフォームフィールドに追加するのはかなり苦痛です。
Django label_tag（）output にクラスを追加）
手動で指定することなく、{{ form.as_p }}を使用したり、フィールドを反復処理したり、大量のハッカーを実行したりするスマートな方法はありますか？
乾杯、ビクター
"Django-crispy-forms" を使用したいのですが、これはDjango-uni-formの後継です。これはすばらしい小さなAPIであり、Bootstrapを強力にサポートしています。
古いコードとクイックフォームをすばやく移植するためにテンプレートフィルターを使用し、レンダリングをさらに制御する必要がある場合はテンプレートタグを使用する傾向があります。
これは私が思いついたものです：
<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>
いつ 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 。
次のようなことができます：
{% 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 %}
CSS属性をDjango生成されたフォームに追加するには、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_tweaksを使用した私のバージョンでは、より見栄えの良い結果が得られます。 render_fieldは、フィルターを追加するよりも使用する方が軽いと思います。 bootstrap=フォーマットされたアラートメッセージを追加し、ナビゲータ検証（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>
たとえば、必要な方法で属性を定義するクラスを作成し、それに応じて呼び出すことができます。
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)
ブートストラップスタイルは、<div>sではなく<p>sで形成されます。したがって、見栄えを良くしたい場合は、bootstrap way 100％IMHO。
Django-bootstrap appを使用します。例：
{% 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 »' reset='Reset Form' layout='horizontal' %}{% endbuttons %}
</form>
1）フォームクラス属性2）bootstrap_formレイアウト、3）ボタンレイアウトのhorizontalに注目してください。
最速かつ最も簡単な方法は、Django Formクラスを拡張する独自の基本クラスを定義し、そのas_pメソッドBootstrapが必要です。次にDjangoの代わりに新しいフォームクラスから継承するようにフォームを変更します。
他の友人が言ったことに加えて、「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 %}