2013-04-08 8 views
5

私は(ジャンゴ・ツールキットの統合VS主にクリスピー・フォーム)Django:Twitterのブートストラップ統合にパッケージを使用する理由は何ですか?

パッケージの使用をブートストラップについて、いくつかの記事を読んしかし、私はジャンゴにかなり新たなんだと、私はまだこれらのパッケージについての本当のニーズが何であるかを理解していません。 Twitterのブートストラップは、CSS/jsファイル以外のものではありません。 私はDjangoフォームとフィールドをHTMLクラスにリンクすることでブートストラップを使うことを考えました(.pyフォームのウィジェットと他のフィールドの.htmlテンプレートを直接使用)。

これらのパッケージの利点は何ですか?それを使用しないことを選択した場合、それは単なる利便性ですか、私は本当に何かを逃していますか?

ありがとうございました!

+0

投稿リンクを共有できますか? –

+0

John、これらは2つのリンクです: http://stackoverflow.com/questions/11821116/django-and-bootstrap-what-app-is-recommended http://stackoverflow.com/questions/11749860/how- to-render-django-forms-choicefield-as-twitter-bootstrap-dropdown –

答えて

3

これはフォームに便利です。テンプレートタグを提供します。 Djangoはas_p、as_ul、as_tableの2つのメソッドを提供していますが、どれもブートストラップとスムーズに動作しません。だから代わりに何かを使う。

{% extends 'base.html' %} 
{% load crispy_forms_tags %} 

{% block content %} 
    {% form|crispy %} 
{% endblock %} 

また、Djangoフォームで設定するのに便利なクラスも用意されています。

だから、フォームを構成するための面倒を省くことができます。あなたはそれらなしで始めることができ、問題が発生したときに、それらが有用であることがわかります。

+0

ありがとうございます。私はそれをこのようにします:) –

1

あなた自身が言っているように、Twitter Bootstrapは、あなたのHTML構造に適用され、要素の新しい顔を得るCSSとJSファイルだけです。ブートストラップには、多くの既製の要素とスタイルが用意されています。

多くのウェブサイトには、ブートストラップを使用して準備ができた構造とサイトテンプレートが用意されています。BootsnippBootswatchWrapbootstrapなどがあります。私が目にする大きな利点は、スタイルに時間を浪費することではなく(私はデザイナーを蔑視するつもりはない)、プログラミングにもっと集中することです。

私の最終的な注意点は、Twitter Bootstrapにチャンスを与えることです。モデルやスタイルをより速く作成し、最終製品に焦点を合わせるのに非常に役立ちます。

1

これらのパッケージの中には、CSSをLess(言語)で記述して自動的にコンパイルできるものがあります。また、資産の圧縮と連結を追加するものもあります。

これまでのところ、私は必要なのは簡単にこれによって達成されるフォームの統合、あるブートストラップは、CSSの束以上のものやJavaScriptファイルではありません(と私はあまりを使用していない)のよう:

注:これは、私自身のコードの非常に具体的な例ですが、あなたはその考えを得ています。

<div class="row"> 
    <div class="span6 offset3"> 

    <form id="form-history" class="form-horizontal text-center" 
      action="/somepath/" method="post"> 
     <fieldset> 
      <legend><h3>History</h3></legend> 

    {% for field in form %} 
     <div class="row"> 
      <div class="span3">{{ field.label }}</div> 
      <div class="span3">{{ field }}</div> 
     </div> 
    {% endfor %} 

     <div class="row pull-right"> 
      <button class="btn btn-primary btn-large" type="submit"> 
       <i class="icon-ok icon-white"></i> Find 
      </button> 
     </div> 

     </fieldset> 
    </form> 
関連する問題