形状
基本フォーム
入力、Textarea、および選択の場合、通常、クラス「フォームコントロール」を追加します。これは、要素のデフォルト幅を100％に設定します（以下に説明するインライン形式など）。また、各要素（入力するラベルと要素を含む）は、「フォームグループ」で追加されます。スタイルは1つだけです。マージンボトム：15px。
<form action = ""> <div> <label for = "" "> username：</label> <input type =" text "/> </div> <div> <label for =" "> password：</label> <入力タイプ="/> </div> </form>
インライン形式
最も外側の要素（フォームグループの親要素）に「フォームインライン」を追加します。すべてのフォーム要素が1つの行に表示されていることを示します（十分な幅があります）。および「.Form-Inline .Form-Group」は、インラインブロックとして表示されます。 ".form-inline .form-control"の幅はAUTOです。これにより、1行に表示されます。
<form action = ""> <div> <label for = "" "> username：</label> <input type =" text "/> </div> <div> <label for =" "> password：</label> <入力タイプ="/> </div> </form>
水平形式
通常の形式やインライン形式とは異なります。 1つの行にラベルフォーム要素と入力フォーム要素を表示する場合は、「フォームホリゾン」を使用する必要があります。この種のジョイント「フォームグループ」は、グリッドシステムの「行」に相当します。したがって、そのサブクラスには「col-md-*」があり、ラベルの「コントロールラベル」 - 「フォームホリゾント.control-label」には、右並列テキストの効果があります。これを追加しないと、ラベルと入力は互換性がないように見えます。
<form action = ""> <div> <label for = "" "> username：</label> <div> <入力タイプ=" Text "/> </div> </div> <div> <label for =" "> password：</label> <div> <input Type =" Password "/> </div> </div> </form>
フォームサイズ
入力サイズを制御するものは「入力-SM」と「入力LG」であり、入力ボックスを通常よりも小さくまたは大きく見せます。これに対応するのは、ラベル内のテキストのサイズです。親「フォームグループ」に「フォームグループ-SM」と「フォームグループ」を同時に追加する必要があります。上記のデモのパスワード入力ボックスのように。
入力ボックス
HTML5では、入力ボックスタグのタイプはより多くのタイプをサポートしています。テキスト、パスワード、データタイム、データタイムローカル、日付、月、時間、週、数字、電子メール、URL、検索、電話、色があります。正しいスタイルは、特定のタイプが割り当てられている場合にのみラベル<input>に表示できます。一部の要素は、携帯電話にのみ効果を示すことができます。
ドロップダウンボックス選択
入力ボックスに似ています。入力を変更して「フォームコントロール」クラスを選択して追加しました。
<form action = "" "> <div> <label for =" ">選択してください：</label> <div> <select name =" "id =" ""> <option値= ""> html </option value = "" "> css </option> <option値>" value = ""> nodejs </option> </select> </div> </form>
col-MD-pull-*はregrated offsetです。
テキストフィールド
上記に似ています。
<form action = ""> <div> <label for = ""> textarea：</label> <div> <textarea name = "" id = "" rows = "3"> hello </textarea> </div> </div> </form>
複数のラジオボックス
ラジオとチェックボックスの要素を1つの行に表示し、ラベルに合わせるため。 Bootstrapには2つのオプションがあります。 1つ：
<div> <label for = ""> <入力タイプ= "Radio" name = "sex"/> male <input type = "radio" name "sex"/> female <input type = "radio" = "sex"/> confidential <""> <input opine = "checkbox"/> html <input = ""チェックボックス "/>
ラベル自体はインラインブロックです。しかし、.radio、.checkbox自体がブロックされています。
したがって、複数のラジオまたはチェックボックスを1つのラベルで包みます。また、多くは非常に見苦しいです。したがって、執筆の2番目の方法はここにあります。
<div> <label for = ""> <入力タイプ= "Radio" name = "sex"/> label> <label for = ""> <input type = "radio" name = "sex"/> label </label> <label for = ""> <input ""> "sex"/> confidencial </confidencial> <br/> <label> <"> <input = </label </> html for = ""> <input type = "チェックボックス"/> css </label> <label for = ""> <入力型= "チェックボックス"/> javascript </label> </div>
フォーム検証
HAS-SUCSESS：成功、グリーン。
warning：警告、黄色。
has-error：エラー、赤。
対応するスタイルを「フォームグループ」に追加するだけです。より良い検証のために、「Has-Feedback」を追加し続けることができます。次に、入力後に「フォームコントロールフィードバック」を要素レベルに追加します（「フォームコントロール」）。セマンティクスは明確で明確です。コードは次のとおりです。
<form action=""><div><label for="">Username: </label><div><input type="text" /><span></span></div></div><div><label for="">Password: </label><div><input type="text" /><span></span></div></div><div><label for="">Email: </label><div><input type = "text"/> <span> </span> </span> </form>
ボタン
マルチボタンとボタンスタイル
ブートストラップにはさまざまなボタンスタイルがあります。ボタン、a、入力、スパン、divなどは、「btn btnスタイル」がある限り、すべてボタンになる可能性があります。ただし、互換性と読みやすさを向上させるには、この方法で使用しないことをお勧めします。ボタンタグを使用してください。
<ボタン>ボタン</button> <butth>ボタン</button> <butth>ボタン</button> <butth>ボタン</button> <butth>ボタン</button> <butth>ボタン</button> <！行 - > <butth>ボタン</button> <butth>ボタン</button> <butth> button </button> button>ボタン</button> <butth>ボタン</button> <butth>ボタン</button> <ボタン> <ボタン> <ボタン> <ボタン>ボタン> <ボタン> </ボタン> </button> <ボタン>ボタン</ボタン>
ボタンサイズ
上記のように、「BTN-XS」、「BTN-SM」、「BTN-LG」を使用して、ボタンサイズを設定します。
ボタンステータス
上記のように、効果的なものは「アクティブ」と「フォーカス」です。
写真
IMG応答性：レスポンシブな写真。主にレスポンシブデザインを目的としています。
IMGラウンド：丸い角。
img-circle：丸。
IMG-Thumbnail：サムネイル、外層に追加された境界線で表されます。
アイコン
BootStartには多くの小さなアイコンが組み込まれています。使用方法は次のとおりです。実際、上記の「フォームコントロールフィードバック」で使用されています。その中で、「グリフィコン」は必須です。
<span> </span>
入力ボックスグループ
入力ボックスグループは「入力グループ」です。 「入力グループアドン」または「入力グループ-BTN」を使用するには、いくつかのサフィックス（電子メールの接尾辞など）とプレフィックス（お金の記号￥、$など）を追加する必要があります。シンプルで明確なセマンティクス。次のように：
<！ - 電子メールボックス - > <div> <入力タイプ= "テキスト" /><span>@gmail.com</span> </div> <！ type = "text"/> </div> <！ - 複数選択 - > <div> <span> <入力タイプ= "チェックボックス"/> </span> <入力タイプ= "テキスト"/> </div> < href = "javascript：void（0）"> baby </a> </li> <li> <a href = "javascript：void（0）"> shop </a> </li> </ul> </div> <入力タイプ= "テキスト"/> <スパン> <ボタン>検索</ボタン
まとめ
「Form-Horizontal」と「Form-inline」は、どちらもフォームグループの最も外側のラベルです。
フォームグループは、親要素として「フォームグループ」を取ります。同様のものは、将来使用される可能性のある「入力グループ」と「ボタングループ」です。それらはすべてサイズになります。
「form-group-lg "、" input-lg "、" input-group-lg "、" btn-lg "など。
検証スタイルには、「has-error」、「has success」、「has warning」があります。 「Has-Feedback」は同じ要素に追加できます。検証をより完全にするため。
ボタンには多くのスタイルがあり、サイズを設定できます。
写真の4つの一般的なスタイル。
Bootstarpには、多くのアイコンが組み込まれています。
入力ボックスグループは「入力グループ」から始まり、子要素には「入力グループアドン」、「入力グループ-BTN」などが含まれます。
上記は、編集者が紹介したブートストラップのフォームの完全なコレクションです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！