Django Forms と Bootstrap - CSS クラスと <divs> の関係
質問
私は 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 の素晴らしいサポートがあります。
私は古いコードとクイックフォームを素早く移植するためにテンプレートフィルタを使用し、レンダリングをより制御する必要があるときはテンプレートタグを使用することが多いです。
関連
-
[CSSチュートリアル】パララックススクロールの効果を完成させるCSS
-
[CSSチュートリアル】新しいCSS:whereと:is擬似クラス関数とは?
-
[CSSチュートリアル】CSSで実現するTikTokのテキストジッター効果例
-
[CSSチュートリアル】カラフルで知的なシャドウ効果を実現するCSS
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] javascript(またはjQuery)を使って::beforeや::afterなどのCSS疑似要素を選択し、操作する。
-
[解決済み] CSS画像を背景で伸縮させる - CSSのみで可能
-
[解決済み] CSSのクラスは、1つまたは複数の他のクラスを継承することができますか?
-
[解決済み】Djangoでnull=Trueとblank=Trueの違いは何ですか?
-
[解決済み】CSSでclassにワイルドカード*を使用する場合
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
cssで背景色の半透明化を実現する2つの方法
-
[css3]ピュアCSS3でdivのinとoutの効果を順番に実現する
-
[CSSチュートリアル】CSS3で3つの効果例の背景をぼかす。
-
[CSSチュートリアル】CSSで実現するTikTokのテキストジッター効果例
-
[css3]css3アニメーションマウスが絵の上に置かれると徐々に大きくなり、マウスが絵から離れると徐々に縮む効果
-
[CSSチュートリアル】子要素のmargin-topが親要素の移動を引き起こす問題解決
-
[CSSチュートリアル】背景画像画面の適応的な実装を実現するCSS
-
[CSSチュートリアル】シンプルなナビゲーションバー機能を実現するhtml+css
-
[css3]本のページをめくるような効果を実現するcss3サンプルコード
-
[解決済み] Django Forms: 有効でない場合、エラーメッセージとともにフォームを表示する