如何使用Twitter Bootstrap 3避免所有输入中的表单控制？

Question

我正在构建一个网站，其中包含一个自动生成HTML的框架。 Twitter Bootstrap 3需要在每个输入中添加“form-control”类，以便将宽度适当地应用于这些输入。问题是要从代码中添加css类，我需要在很多地方更改框架。

有解决方法吗？也许一些javascript / jquery搜索我的表单中的所有标签，对于每个标签，它找到相关的输入，最后添加css类？但我真的不知道该怎么做。

提前感谢您的帮助。

Answer 1

这是个坏主意，因为它是bootstrap的“hacky”实现。您不仅需要适当的html结构所需的类。尝试制作一些神奇的javascript来实现这两个变化的时间最好花在修改框架上。

Answer 2

您可以编辑forms.less并重新编译css，但这可能很棘手，因为您不希望所有输入或文本区域都具有.form-control样式。

如果您有要将其应用于表单的ID，则应该有所帮助：

$('#yourFormId input, #yourFormId textarea, #yourFormId input, #yourFormId select').addClass('form-control');

您需要确保添加表单中的所有表单字段类型，但上面的行可能会涵盖其中的大多数。这非常hacky，根据你的框架，可能有某种mixin或函数在自动生成的表单中包含类名。

Answer 3

解决方案可能是使用Bootstrap的Less类而不是编译库，并以某种方式在代码中添加必要的标记。

看看这个article。

Answer 4

我没有遇到过这个具体问题，但一般来说使用Bootstrap 3时我会自己使用自己的特定更改来构建.less文件，例如：在我的.less文件中：

/* Import the Bootstrap 3 .less files */
@import url('../../Bootstrap/less/bootstrap.less');

/* Now implement my own styling below */

使用.less，你或许可以从框架的相关部分引入相关的样式，就像这样（其中.mydiv是你的容器元素）：

.mydiv {
    input,
    select,
    textarea {
        .form-control;
    }
}

这将引入.form-control样式并将它们应用于.mydiv中的input，select和textarea元素。我没试过，但值得一试！