web-dev-qa-db-ja.com

Bootstrapのコントロールラベルクラスは何をしますか?

<label>によって.control-label HTML要素に適用されるCSSの書式設定Bootstrap 3クラス。(私は、 Chromeのdevtools

さらに、公式ではBootstrap 3 documentation.control-label.form-horizontalの場合にのみ使用されるようです。それは本当ですか、なぜですか?

24
ira

Control-labelクラスは検証状態に役立ちます。そのため、ブートストラップのドキュメントに記載されていないすべてのラベルで必要です。

Has-success、has-warningなどのクラスを定義している場合、bootstrapソースコードで確認できます。 https://github.com/twbs/bootstrap/ blob/bfb99413eefbbe2e8fbb1e477cbfa63ea7d36140/dist/css/bootstrap-rtl.css#L3242

ご覧のとおり、label要素ではなくcontrol-labelクラスを使用しています。 control-labelを削除すると、ラベルを緑色にしないという望ましくない効果が生じます。

コントロールラベルクラスのない垂直フォームとフォームグループで成功:

<div class="form-group has-success">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>

enter image description here

コントロールラベルクラスの使用:

<label for="exampleInputEmail1" class='control-label'>Email address</label>

enter image description here

だからこそ、それを維持する方が良いと思います!色が望ましい効果でない限り。

33
Ariful Haque