Bootstrapフォーム(フォームコントロール)の使い方を徹底分析_JavaScriptスキル

1. 入力ボックスの入力

単一行の入力ボックス。一般的なテキスト入力ボックス。つまり、input の type 属性値は text です。

ブートストラップで入力を使用する場合は、タイプ type も追加する必要があります。タイプ タイプが指定されていない場合、ブートストラップ フレームワークは input[type="?"]

(ここで、? は、input[type="text"] に対応するテキストタイプなどのタイプタイプを表します) でスタイルを定義します。

さまざまなフォームスタイルでコントロールスタイルを正しくするために、クラス名「.form-control」を追加する必要があります。

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>

2. ドロップダウン選択ボックスでを選択します。

ブートストラップ フレームワークでのドロップダウン選択ボックスの使用は、元のものと一貫しています。複数行の選択の場合は、multiple 属性の値を multiple に設定します。

<form role="form">
<div class="form-group">
 <select class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
 </div>
 <div class="form-group">
 <select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
</div>
</form>

3. テキストエリア textarea

テキストフィールドは元のフィールドと同じように使用されます。行を設定するとその高さを定義でき、列を設定すると幅を設定できます。

ただし、textarea要素にクラス名「.form-control」を追加した場合は、cols属性を設定する必要はありません。

Bootstrap フレームワークの "form-control" スタイルのフォーム コントロールの幅が 100% または auto であるためです。

 <form role="form">
 <div class="form-group">
 <textarea class="form-control" rows="3"></textarea>
 </div>
 </form>

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

1. チェックボックスとラジオの両方がラベルでラップされます

2. チェックボックスとラベルは「.checkbox」
という名前のコンテナに配置されます。 3. ラジオとラベルタグは「.radio」
という名前のコンテナに配置されます。

<form role="form">
<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="hate">
不喜欢
</label>
</div>
</form>

5. 横に並んだチェックボックスとラジオボタン
1. チェックボックスを水平に配置する必要がある場合は、ラベル にクラス名「.checkbox-inline」を追加します。 2. ラジオを水平に配置する必要がある場合は、ラベル
にクラス名「.radio-inline」を追加するだけです。

<form role="form">
 <div class="form-group">
 <label class="checkbox-inline">
 <input type="checkbox" value="option1">游戏
 </label>
 <label class="checkbox-inline">
 <input type="checkbox" value="option2">摄影
 </label>
 <label class="checkbox-inline">
 <input type="checkbox" value="option3">旅游
 </label>
 </div>
 <div class="form-group">
 <label class="radio-inline">
 <input type="radio" value="option1" name="sex">男性
 </label>
 <label class="radio-inline">
 <input type="radio" value="option2" name="sex">女性
 </label>
 <label class="radio-inline">
 <input type="radio" value="option3" name="sex">中性
 </label>
 </div>
</form>

6. フォームコントロールのサイズ
ブートストラップ フレームワークは、フォーム コントロールの高さを制御するための 2 つの異なるクラス名も提供します。これら 2 つのクラス名は次のとおりです: 1. input-sm: コントロールを通常のサイズより小さくします
2. input-lg: コントロールを通常のサイズより大きくします
これら 2 つのクラスは、フォーム内の入力、テキストエリア、および選択コントロールに適しています。

<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">

上記は Bootstrap フォーム コントロールの使用方法です。今後もコンテンツは更新されますので、ご注目ください。