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

Question

我决定今晚第一次尝试Bootstrap 3.我注意到,为了获得默认的,漂亮的表单字段样式,你需要为form-control每个输入,textarea,select等添加一个类.这对那些动态生成表单的人来说很痛苦(例如,使用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> 1.4 :extend(),请参阅:https://stackoverflow.com/a/15573240/1596547.您可以通过向较少的文件添加规则来使用此功能:

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定义了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');

现在使用与以下规则相同的规则将此类添加到CSS中.checkbox label:

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

现在两种形式看起来基本相同我认为:

另请阅读:Django Forms和Bootstrap - CSS类和<divs>

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