Bootstrapは、垂直形式、インライン形式、および水平形式の3つのフォームレイアウトを提供します。一つずつ紹介させてください。興味のある友達は一緒に学びます。
垂直または基本フォームを作成します。
•parent <form>要素にrole = "form"を追加します。
•class.form-groupを使用して、タグとコントロールを<div>に配置します。これは、最高の間隔を取得するために必要です。
•Class.Form-Controlをすべてのテキスト要素に追加<入力>、<textarea>、<elect>
<form role = "form"> <div> <label for = "name"> name </label> <input type = "text" name "placeholder ="を入力してください "> </div> <div> <div> <label =" inputfile "> file input </label> <入力タイプ="ファイル "ID =" inputfile "> <p> </p> </div> <div> <label> <入力タイプ= "チェックボックス"> </label> </div> <button type = "submit"> submit </button> </form>を確認してください
インライン形式：
インライン形式のすべての要素は左に位置付けられ、ラベルは並んでいます。インライン形式を作成するには、フォームタグにクラスを追加する必要があります。
.form-inline
<form role="form"><div><label for="name">Name</label><input type="text" id="name"placeholder="Please enter a name"></div><div><label for="inputfile">File input</label><input type="file" id="inputfile"></div><div><label><input type="checkbox">Please check</label></div><button type = "submit">送信</button> </form>
ディスプレイ効果は次のとおりです。
注：デフォルトでは、Bootstrapの入力、Select、およびTextareaの幅は100％です。インラインフォームを使用する場合、フォームコントロールに幅を設定する必要があります。
水平フォーム：他の2つのフォームとは異なり、次の手順に従って水平形式を作成する必要があります。
•class .form-horizontalを親<フォーム>要素に追加します。
•クラス.Form-Groupを使用して、タグとコントロールを<div>に配置します。
•ラベルにクラス.Control-Labelを追加します。
例えば：
<form role = "form"> <div> <label for = "firstName"> name </label> <div> <入力タイプ= "text" firstName "placeholder ="> </div> </div> <div> <label = "lastName"> last </label> <input = "id =" lastname "pleashharmam名前 "> </div> </div> <div> <label> <input type =" checkbox "> remember me </label> </div> </div> <div> <div> <button =" submit "> login </button> </div> </div> </form>
上記は、エディターが紹介した7番目のブートストラップフォームレイアウトの例の詳細な説明（3つのフォームレイアウト）の完全な説明です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！