css - style - bootstrap form template



我如何解決Bootstrap 3的表單控件類的需求? (2)

你真的應該檢查一個Django應用程序,只需在你的模板中使用一個標籤,就可以將你所有的Django表格渲染為漂亮的Boostrap表單。

它的名字是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黑客攻擊。

我決定今晚第一次嘗試Bootstrap 3。 我注意到,為了獲得默認的,漂亮的表單字段樣式,你需要為每個輸入,textarea,select等添加一個form-control類。這對那些動態生成表單的人來說很痛苦(例如,使用Django的)。 Django允許您設置表單字段的屬性,但要全局這樣做需要一個令人討厭的猴子補丁或非常非干的代碼。

  1. 有沒有辦法避免這個類的要求,仍然保留基本的表單字段樣式?
  2. 有沒有快速的方法(最好是非JS)來解決這個問題呢?

我做的一件事是創建一個mixin,為每個小部件添加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',)})




twitter-bootstrap-3