我决定今晚第一次试用 Bootstrap 3。我注意到，为了获得默认的、漂亮的表单字段样式，您需要为form-control每个输入、textarea、select 等添加一个类。这对于那些动态生成表单（例如，使用 Django）的人来说是一种痛苦。Django 允许您设置表单字段的属性，但要在全局范围内这样做需要一个讨厌的猴子补丁或非常非 DRY 的代码。
- 有没有办法避免这个类的要求，仍然保留基本的表单字段样式？
- 有没有一种快速的方法（最好是非 JS）来解决这个问题？
问问题
24161 次
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，您可以使用:extend()，请参阅：https ://stackoverflow.com/a/15573240/1596547 。您可以通过向您的 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>提交按钮前面添加了一个标签。
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 中没有父级选择器，请参阅：Is there a CSS parent selector?）。使用 jQuery，您可以选择标签并添加一个类：
$('input[type="checkbox"]').parent("label").addClass('checkboxlabel');
现在使用与以下相同的规则将此类添加到您的 CSS 中.checkbox label：
.checkboxlabel
{
cursor: pointer;
display: inline;
font-weight: normal;
margin-bottom: 0;
}
现在两种形式看起来基本相同，我认为：
于 2013-08-10T20:09:52.367 回答
5
您确实应该检查一个 Django 应用程序，该应用程序将所有 Django 表单呈现为漂亮的 Boostrap 表单，只需在模板中使用标签即可。
它的名字是django-bootstrap3。以下是你如何使用它：
- 安装 django-bootstrap3
添加
bootstrap3到您的INSTALLED_APPS：INSTALLED_APPS = ( ... 'bootstrap3', ... )更新您的模板：
- 加载
bootstrap3 - 替换你
{{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
我做的一件事是创建一个 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',)})
于 2014-01-03T21:29:52.687 回答