css - 如何避免使用 Twitter Bootstrap 3 在所有输入中进行表单控制？

Question

我正在构建一个带有自动生成 HTML 框架的网站。Twitter Bootstrap 3 需要为每个输入添加“表单控制”类，以正确地将宽度应用于此类输入。问题是要从代码中添加那个 css 类，我需要在很多地方更改框架。

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

提前感谢您的帮助。

score 0 · Accepted Answer

这是一个坏主意，因为它是引导程序的“hacky”实现。您不仅需要类，还需要正确的 html 结构。尝试制作一些神奇的 javascript 来实现这两个更改的时间最好花在修改框架上。

score 0 · Accepted Answer

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

如果您有要应用的表单 ID，这应该会有所帮助：

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

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

score 0 · Accepted Answer

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

看看这篇文章。

score 0 · Accepted Answer

我没有遇到过这个特定的问题，但一般来说，在使用 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 元素。这个我没试过，但值得一试！

4 回答 4