为表单标签添加新样式的 Twitter Bootstrap 约定是什么？答案

【问题标题】：What is the Twitter Bootstrap convention for adding a new style to form labels?为表单标签添加新样式的 Twitter Bootstrap 约定是什么？
【发布时间】：2014-10-31 16:02:43
【问题描述】：

我想在我的 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 添加新样式吗？

【问题讨论】：

标签： twitter-bootstrap-3 oocss

【解决方案1】：

.form-group 环绕表单组标签和输入，它的作用类似于 .form-horizontal 中的 .row ，否则，当表单堆叠在较小的视口上时，会有一些垂直空间，所以它们不会挤在一起.

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

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

待办事项

.form-group label {}

如果您的表单格式正确，将会影响所有标签。

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

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

【讨论】：