Что такое соглашение 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-группы?

Answer 1

.form-group оборачивает метку группы форм и ввод, он действует как.row в.form-горизонтальном и в противном случае, когда форма складывается в меньшие области просмотра, есть некоторое вертикальное пространство, поэтому все вместе не сжимается.

Стиль меток по умолчанию, который применяется ко всем меткам:

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

Сделать

.form-group label {}

Повлияет на все ярлыки, если вы правильно отформатировали свои формы.

Если вы просто хотите выделить его для определенной метки, вы можете создать класс для этой метки и назначить класс только для этой метки. Если вы хотите повлиять на все метки, вы можете просто изменить элемент метки.

Вы также можете создать новый родительский класс для всего, что обернуто вокруг этой формы, и обращаться к стилю метки следующим образом.