Bootstrap フォームの徹底的な研究-PHP开发-php.cn

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

高洛峰

リリース： 2016-12-03 16:38:27

オリジナル

1555 人が閲覧しました

前書き: フォームには多くの要素があるため、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 属性を使用せずに次のように記述することもできます: Email: このとき、入力の長さは画面の幅ではありません。 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 タグのhorizontal には主に次の機能があります:
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

ログイン後にコピー

。