Bootstrap フォームの徹底的な研究

前書き: フォームには多くの要素があるため、Bootstrap フォームについては個別にまとめます。Bootstrap の中心的なコンテンツとして、フォームの主な機能はユーザーとのコミュニケーションに使用されます。ウェブページでユーザーとのコミュニケーションを改善します。フォームの共通要素には主に、テキスト入力ボックス、ドロップダウン選択ボックス、ラジオ ボタン、チェック ボタン、テキスト フィールドとボタンなどが含まれます。

1. 基本フォーム

<form role="form">
 <div class="form-group">
  <label for="exampleInputEmail1">邮箱：</label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword1">密码</label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

詳細な説明:

(1) form タグの role 属性はセマンティクスを強化するだけであり、他の効果はありません。

(2) div クラス名は各入力ボックスの間に一定の距離を保つためのものです。そうでない場合、2 つは隣り合ったものになります

(3) 以下を行うには、label の for 属性と input の id は同じ名前でなければなりません。これらが同じグループであることを識別し、マウスでラベル label をクリックすると、カーソルが自動的に入力ボックスにロックされます。 for 属性を使用せずに次のように記述することもできます: 2e1cf0710519d5598b1f0f14c36ba674Email:b0eb6585040a6bdd1f2bd0b25684a07f このとき、入力の長さは画面の幅ではありません。 form-control クラスをフォームに追加します。
1. 幅は 100% で表示されます。

2. 4 ピクセルの丸い角を設定します。要素がフォーカスされると、影と境界線の効果が変化します。

2. 水平フォーム (ラベルが左側にあり、入力ボックスが右側にあります)

<form class="form-horizontal" role="form">
 <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
  <div class="col-sm-10">
   <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
  </div>
 </div>
 <div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
  <div class="col-sm-10">
   <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <button type="submit" class="btn btn-default">进入邮箱</button>
  </div>
 </div>
</form>

クラス .form- の使用form タグのhorizo​​ntal には主に次の機能があります:
1. フォーム コントロールのパディングとマージンの値を設定します。

式 form-group を使用すると、グリッド システムの「行」に似ています。水平方向の効果を実現するには、グリッド システムと組み合わせて使用​​する必要があります。ブラウザのサイズが一定より小さい場合、異なる幅のデバイスに対して異なるレイアウトを表示できます。値を指定すると、縦方向に表示されます。

3. インライン フォーム (フォーム コントロールは 1 行で表示されます)

<form class="form-inline" role="form">
 <div class="form-group">
  <label for="exampleInputEmail2">邮箱</label>
  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword2">密码</label>
  <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

詳細な説明:

Web ページの上部にあるナビゲーション バーを使用してユーザー名とパスワードを入力することがあります。このとき、ラベルに .form-inline クラスを追加することで簡単に実装でき、表示デバイスのサイズが変更されたときに自動的に改行されます。 、通常のフォームのスタイルを示します。

4. フォームの基本要素

1. 入力要素: クラス .form-control を追加することで、最も基本的な入力ボックス スタイル

(1) 基本的な入力ボックス

<input type="text" class="form-control">

(2) 基本より大きい入力ボックス

<input type="text" class="form-control input-lg">

(3) は、基本的な入力ボックス

<input type="text" class="form-control input-sm">

2 よりも小さいです。 Textarea 要素: クラス .form-control を追加すると、cols 属性値を設定する必要がなくなります。 100%

<textarea rows="5" class="form-control">

3. 要素の選択: オリジナルと一致し、ドロップダウン選択ボックスとして、同じスタイルに .form-control クラスを追加して、複数行の選択と単一行の選択を実現できます

<select class="form-control"><option>222</option></select>

4.、チェックボックスチェックボックスとラジオボタンラジオ:

(1) 位置合わせの問題を解決するために、.checkbox と .radio の 2 つのクラスが特別に記述されています。 以下のコードは縦に表示されます

`<form role="form">
 <div class="checkbox">
  <label>
   <input type="checkbox" value="">
   踢足球
  </label>
 </div>
 <div class="checkbox">
  <label>
   <input type="checkbox" value="">
   打篮球
  </label>
 </div>
 <div class="radio">
  <label>
   <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
   喜欢
  </label>
 </div>
  <div class="radio">
  <label>
   <input type="radio" name="optionsRadios" id="optionsRadios2" value="h

。