25

今夜、初めて Bootstrap 3 を試してみることにしました。デフォルトのきれいなフォーム フィールド スタイルを取得するには、各入力、テキストエリア、選択などにクラスを追加する必要があることに気付きましたform-control。これは、フォームを動的に生成する (たとえば、Django を使用する) 人にとっては苦痛です。Django ではフォーム フィールドの属性を設定できますが、グローバルに設定するには厄介なモンキー パッチが必要になるか、非常に非 DRY コードが必要になります。

  1. 基本的なフォーム フィールド スタイルを保持したまま、このクラスの要件を回避する方法はありますか?
  2. それ以外の場合にこれに対処する簡単な方法 (できれば非 JS) はありますか?
4

3 に答える 3

12

以下の回答が最初に反対票を獲得したのはなぜだろうと思いました。クラス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 で使用できます。 https://stackoverflow.com/a/15573240/1596547:extend()を参照してください。less ファイルにルールを追加することで、これを上記に使用できます。

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

また、参照してください: Bootstrap 3 RC1 をコンパイルするときに Grunt / Recess にエラーが発生し、Lessc にエラーが発生しないのはなぜですか?

これform-groupは、入力/ラベル構造の周りのコンテナ div であり、margin-bottom: 15px;. それがなくてもフォームを作成できます。このため、必須ではありません。

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

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

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

input {
    margin-bottom: 15px; }

これは、チェックボックス（およびラジオ）に対して受け入れられます。Bootstrap CSS は、上記の入力用の 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/を参照) で定義します。

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

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');

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

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

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

フォームが同じに見える また読む: Django Forms and Bootstrap - CSS クラスと <divs>

于 2013-08-10T20:09:52.367 に答える
5

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

その名前はdjango-bootstrap3です。使用方法は次のとおりです。

  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 ハッキングはありません。

于 2015-01-29T16:45:16.150 に答える
2

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

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',)})
于 2014-01-03T21:29:52.687 に答える