web-dev-qa-db-ja.com

Bootstrap 3のフォーム制御クラスの必要性を回避するにはどうすればよいですか？

Bootstrap 3今夜初めて試してみることにしました。デフォルトのプリティフォームフィールドスタイルを取得するには、form-controlクラスを追加する必要があることに気付きました各入力、textarea、selectなど。これは、フォームを動的に生成する（たとえば、Djangoを使用する）場合の苦痛ですDjangoを使用すると、フォームフィールドの属性を設定できますが、全体的に、厄介なサルのパッチまたは非常に非DRYコードが必要になります。

  1. このクラスの要件を回避し、基本的なフォームフィールドスタイルを維持する方法はありますか？
  2. そうでない場合、これに対処する簡単な方法（できればJS以外）はありますか？
csshtmlformstwitter-bootstraptwitter-bootstrap-3
25
orokusaki

テンプレートでタグを使用するだけで、DjangoアプリをすべてDjangoフォームをNice Boostrapフォームとしてレンダリングするアプリを確認する必要があります。

その名前は Django-bootstrap です。使い方は次のとおりです。

  1. Django-bootstrap3をインストールする

  2. 追加 bootstrap3からINSTALLED_APPS：

    INSTALLED_APPS = (
    ...
    'bootstrap3',
    ...
)

  3. テンプレートを更新します。

    1. ロードbootstrap3
    2. {{form.as_p}}〜{% bootstrap3_form form %}

前：

<form method="post" class="form-horizontal" action="" >
    <div class="hidden-desktop">
      <button type="submit" class="btn btn-primary"> Save</button>
    </div>
    {% csrf_token %}
    {{ form.as_p }}
    <div class="actions form-actions">
      <button type="submit" class="btn btn-primary"> Save</button>
    </div>
 </form>

後：

{% extends "base.html" %} 
{% load bootstrap3 %}

<form method="post" class="form-horizontal" action="" >
  <div class="hidden-desktop">
    <button type="submit" class="btn btn-primary">{% bootstrap_icon "ok" %} Save</button>
  </div>
  {% csrf_token %}
  {% bootstrap_form form  %}
  <div class="actions form-actions">
    <button type="submit" class="btn btn-primary">{% bootstrap_icon "ok" %} Save</button>
  </div>

ほかにすることがない。フォームで更新するものはありません。 JavaScriptハッキングはありません。

5
ornoone

以下の答えがなぜ最初に反対票を投じたのかと思いました。 form-groupクラスの代わりに、form-controlに関する私の答えを見つけました。クラスform-controlは多くのCSSルールを追加します。

最初にフォームの出力を制御するようにしてください： https://stackoverflow.com/a/8474452/1596547

できない場合は、以下と同じように試すことができます。次のように、form-controlではなく、同じルールを入力に適用します。

input {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

もっと少なく

LESS> 1.4では、:extend()を使用できます。以下を参照してください： https://stackoverflow.com/a/15573240/1596547 これを上記に使用するには、lessファイルにルールを追加します。

input {
  &:extend(.form-control all);
}

また参照してください： コンパイル時にGrunt/RecessにエラーとLesscが表示されない理由Bootstrap 3 RC1？

form-groupは、margin-bottom: 15px;を追加するだけの入力/ラベル構成の周りのcontainer-divです。それなしでフォームを作成できます。このため、必須ではありません。

CSSを使用すると、いくつかの回避策を作成できます。私はあなたが常にJavaScriptを避けることができるとは思いません。 Django=フォームのHTML構造がわかりません。 http://getbootstrap.com/css/#のサンプルフォームを使用しましたform を削除し、form-controlコンテナを削除します。次に、違いを「修正」します。注[送信]ボタンの前に<br>タグも追加します。

参照： http://bootply.com/73370

1）form-groupはmargin-bottom: 15px;を追加してこれを修正し、入力タグにこのマージンを追加します。

input {
    margin-bottom: 15px; }

これは、チェックボックス（およびラジオ）を受け入れます。 Bootstrap CSSはinput[type="radio"], input[type="checkbox"] { line-height: normal; margin: 4px 0 0; }を定義します（これはCSSの特異性により発生します。 を参照してください：http://coding.smashingmagazine.com/2007/07/27/css -specificity-things-you-should-know / ）上記の入力のcss。

したがって、最終的なルールは次のようになります。

input, input[type="checkbox"]  {
    margin-bottom: 15px;
}

2）チェックボックスのラベルも異なります。注：チェックボックスにはform-controlがありませんが、代わりにcheckboxクラスがあります。ラベルテキストのcssルールは次のとおりです：.radio label, .checkbox label { cursor: pointer; display: inline; font-weight: normal; margin-bottom: 0; }この場合、CSSのみを使用することはできません（ラベルは入力チェックボックスの親であり、CSSには親セレクターがありません。 CSS親セレクターはありますか？ ） jQueryを使用すると、ラベルを選択してクラスを追加できます。

$('input[type="checkbox"]').parent("label").addClass('checkboxlabel');

次に、このクラスを.checkbox labelと同じルールでCSSに追加します。

.checkboxlabel
{
    cursor: pointer;
    display: inline;
    font-weight: normal;
    margin-bottom: 0;
}

今、両方のフォームは基本的に同じように見えます：

forms look the same また読む： DjangoフォームとBootstrap-CSSクラスと<divs>

12
Bass Jobsen

私がしたことの1つは、各ウィジェットにform-controlクラスを追加するミックスインを作成することでした。

class BootStrap3FormControlMixin(object):
    def __init__(self, *args, **kwargs):
        super(BootStrap3FormControlMixin, self).__init__(*args, **kwargs)

        for field in self.fields.values():
            _class = field.widget.attrs.get('class', '')
            field.widget.attrs.update({'class': u'%s %s' % (_class, 'form-control',)})
2
emperorcezar