我如何解决Bootstrap 3的表单控件类的需求？

Question

我决定今晚第一次尝试Bootstrap 3。我注意到，为了获得默认的，漂亮的表单字段样式，你需要为每个输入，textarea，select等添加一个form-control类。这对那些动态生成表单的人来说很痛苦（例如，使用Django）。 Django允许您设置表单字段的属性，但全局这样做需要一个令人讨厌的猴子补丁或非常非干的代码。

1. 有没有办法避免这个类的要求，仍然保留基本的表单字段样式？
2. 是否有快速解决方法（最好是非JS）？

Answer 1

我想知道为什么下面的答案首先得到了回报。我找到了关于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＆gt; 1.4您可以使用:extend()，请参阅：https://stackoverflow.com/a/15573240/1596547。您可以通过向较少的文件添加规则来使用此功能：

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

另见：Why gives Grunt / Recess an error and Lessc not when compiling Bootstrap 3 RC1?

<击> 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定义了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中没有父选择器，请参阅：{{3} }）。使用jQuery，您可以选择标签并添加一个类：

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

现在使用与.checkbox label：

相同的规则将此类添加到CSS中

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

现在两种形式看起来基本相同：

<击> 另请阅读：Is there a CSS parent selector?

Answer 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黑客攻击。

Answer 3

我做的一件事是创建一个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',)})