ブートストラップは、垂直形式、インライン形式、および水平形式の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タグにclass.form-inlineを追加する必要があります
<form role = "form"> <div> <label for = "name"> name </label> <input type = "text" id = "name" placeholder = "を入力してください"> </div> <div> <div> <ラベル= "入力ファイル"> label> <入力タイプ= "ファイル" ID = "入力ファイル"> </div> <div> <div> <div> <fid> <> <putmen 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> <ラベル=" lastName "> last </label> <input =" id = "pleashhame" pleash "pleash" pleash "> </div> </div> <div> <div> <label> <入力タイプ= "チェックボックス">私を覚えてください</label> </div> </div> </div> <div> <div> <button type = "submit"> login </button> </div> </div> </form>
ディスプレイ効果は次のとおりです。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。