1. ホーム
  2. css

Django Forms と Bootstrap - CSS クラスと <divs> の関係

2023-09-30 14:41:38

質問

私は 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 }} を使用する、またはフィールドを繰り返し使用する、手動で指定したり、大量のハッキングを行う必要がない、よりスマートな方法はありますか?

乾杯。 Victor

どのように解決するのですか?

私は "django-crispy-forms" を使うのが好きです。これは django-uni-form の後継です。 これは素晴らしい小さな API で、Bootstrap の素晴らしいサポートがあります。

私は古いコードとクイックフォームを素早く移植するためにテンプレートフィルタを使用し、レンダリングをより制御する必要があるときはテンプレートタグを使用することが多いです。