Bootstrapフォーム(フォームスタイル)の使い方を徹底分析_JavaScriptスキル

1. 基本形

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

これらの要素に加えて、フォームには input、select、textarea などの要素もあります。Bootstrap フレームワークでは、クラス名 `form-control` がカスタマイズされます。 「form-control」は、デザインのカスタマイズ効果を実現します。

1.幅が100%になります

2. ライトグレー (#ccc) の境界線を設定します

3. 4px で角を丸くします

4. 影の効果を設定します。要素がフォーカスされると、影と境界線の効果が変化します

5. プレースホルダーの色を #999 に設定します

2. 横型フォーム
Bootstrap フレームワークのデフォルトの形式は垂直表示スタイルですが、多くの場合、水平形式のスタイル (左側にラベル、右側にフォーム コントロール) が必要になります。

<form class="form-horizontal" role="form">
 <div class="form-group">
 <label for="inputEmail3" class="col-sm-2 control-label">邮箱:</label>
 <div class="col-sm-4">
 <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-4">
 <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
 </div>
 </div>
 </form>

Bootstrap フレームワークで水平フォーム効果を実現するには、次の 2 つの条件を満たす必要があります:
1.

要素で、クラス名 ".form-horizo​​ntal" を使用します。
2. Bootstrapフレームワークと連携するグリッドシステム。

要素 でクラス名

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

2. 「form-group」の表現をグリッドシステムの「行」に似たものに変更します。

3. インラインフォーム

場合によっては、すべてのフォーム コントロールを 1 行で表示する必要がある

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

Bootstrap フレームワークでこのようなフォーム効果を実装するのは簡単です。クラス名「.form-inline」を 要素に追加するだけです。

入力の前にラベルを追加すると、入力が別の行で折り返されます。このようなラベルを追加する必要があり、入力を折り返したくない場合は、ラベルをコンテナー「form-group」にも配置する必要があります。

上記は、Bootstrap フォームの使用方法に関する包括的な分析の最初の記事です。今後もコンテンツが更新されていく予定です。