Bootstrapフォームの使い方を徹底分析（フォーム管理状況）_JavaScriptスキル

この記事では、Bootstrap フォームの 3 つの状態の使用方法を包括的に分析します。興味のある方は、

1. フォーカス状態を参照してください。フォーカス状態は、擬似クラス「:focus」を通じて実現されます。ブートストラップ フレームワークのフォーム コントロールのフォーカス状態により、アウトラインのデフォルト スタイルが削除され、シャドウ効果が再度追加されます。

<form role="form" class="form-horizontal">
 <p class="form-group">
 <p class="col-xs-6">
 <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
 </p>
 <p class="col-xs-6">
 <input class="form-control input-lg" type="text" placeholder="焦点点状态下效果">
 </p>
 </p>
</form>

2. 無効状態

Bootstrap フレームワークのフォーム コントロールの無効状態は、通常のフォーム コントロールの無効状態と同じ方法で実装されます。対応するフォーム コントロールに属性「disabled」を追加します。

<form role="form">
 <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>
 <fieldset disabled>
 <p class="form-group">
 <label for="disabledTextInput">禁用的输入框</label>
 <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
 </p>
 <p class="form-group">
 <label for="disabledSelect">禁用的下拉框</label>
 <select id="disabledSelect" class="form-control">
 <option>不可选择</option>
 </select>
 </p>
 <p class="checkbox">
 <label>
 <input type="checkbox"> 无法选择
 </label>
 </p>
 <button type="submit" class="btn btn-primary">提交</button>
 </fieldset>
</form>

3. フォーム作成時、フォーム検証を行うことは避けられません。検証ステータスのスタイルを提供することも必要であり、これらの効果もブートストラップ フレームワークで提供されます。

1. .has-warning: 警告ステータス (黄色) 2. .has-error: エラー ステータス (赤色) 3. .has-success: 成功ステータス (緑色)
使用済みステータス クラス名

<form role="form">
 <p class="form-group has-success">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 </p>
 <p class="form-group has-warning">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 </p>
 <p class="form-group has-error">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
 </p>
</form>

をフォーム グループ コンテナーに追加するだけです。さらに深く学びたい場合は、ここをクリックして学ぶことができます。ここでは 2 つのエキサイティングなトピックを紹介します: Bootstrap 学習チュートリアル Bootstrap 実践チュートリアル

上記は、Bootstrap フォーム コントロールのステータスの詳細な紹介です。 、今後さらに多くのコンテンツが追加される予定です。継続的に更新されますので、皆様に今後も注目していただければ幸いです。