twitter-bootstrap-3 - 为表单标签添加新样式的 Twitter Bootstrap 约定是什么？

Question

我想在我的 Twitter Bootstrap 站点中为表单创建一种新样式，并且我想保持 SMACKS / OOCSS 约定。

这是默认形式：

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
<!-- More coontent in form here  -->

如果我想覆盖输入样式，在我看来，要遵守添加一类 form-control-newstyle 的约定：

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
<!-- More coontent in form here  -->

但是我也想为标签设置样式。我应该向标签或 div.form-group 添加新样式吗？

Answer 1

.form-group 环绕表单组标签和输入，它就像 .form-horizo​​​​ntal 中的 .row 一样，否则，当表单堆叠在较小的视口上时，会有一些垂直空间，因此它们不会挤在一起。

所有标签上的默认标签样式为：

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}

去做

.form-group label {}

如果您已正确格式化表单，则会影响所有标签。

如果您只想将其隔离到特定标签，您可以为该标签创建一个类并将一个类分配给该标签。如果要影响所有标签，只需修改标签元素。

您还可以为围绕该表单的任何内容创建一个新的父类，并像这样处理标签样式。