TwitterのBootstrapは、現在最も人気のあるフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。シンプルで柔軟で、Web開発をより速くします。
自分のバックグラウンドを改訂するとき、私は一般的なレイアウトでブートストラップを使用しましたが、残りのフォームパーツを使用しない理由はありませんでした。フォームの美化とレイアウトのために、ブートストラップも非常に優れており、大気の境界線、多機能ボタン、マクロフォームレイアウトがあり、すべてが完全で完璧です！
通常のフォーム
フォーム要素をフォームグループクラスにラップする必要があります。フォームグループクラスは一般に<div> ... </div>に保存され、フォーム要素名のコンテンツは一般にラベルラベルに配置され、入力ラベルクラス名はフォームコントロールです。チェックボックスとラジオの要素を独自のDivに記述する必要があることは注目に値します。
たとえば、次のフォーム
<form> <div> <label for = "emblyinputemail1">電子メールアドレス</label> <入力タイプ= "emailinputemail1" placeholder = "email"> </div> <div> <label for = "emblyinputpassword1" for = "exampleInputFile">ファイル入力</label> <入力タイプ= "パスワード" id "id =" exampleinputpassword1 "placeholder =" placeholder "> </div> <div> <label for =" emblyinputfile ">ファイル入力</label> <入力タイプ="ファイル "id =" emblyinputfile "> <p> <p> </p> </p type = "チェックボックス">私をチェックアウト</label> </div> <button type = "submit"> submit </button> </form>
実行後の効果
水平排出フォーム
フォーム要素を水平に排出する必要がある場合は、class.form-inlineをフォームに追加できます。このフォームは、一般に、要素が少ない場合に適しています。
例えば
<form> <div> <label for = "emblyinputemail3">電子メールアドレス</label> <input = "emailinputemail3" placeholder = "email"> </div> <div> <label for = "exampleinputpassword3" type = "チェックボックス">私を覚えておいてください</label> </div> <button type = "submit"> signin </button> </form>
通常のフォーム +要素水平放射
このフォームは最も一般的に使用されています。通常のユーザーが情報を登録して記入すると、多くの場合、次のフォーム効果が表示されます。
このフォームの実装では、.form-horizontalクラスを使用し、要素の各行は<div> ... </div>に包まれています
Form> <div> <label for = "inputemail3"> email </label> <div> <input Type = "email" id "inputemail3" placeholder = "email"> </div> </div> <div> <label for = "inputPassword3" <ラベル> <入力タイプ= "チェックボックス">私を覚えておいてください</label> </div> </div> </div> </div> <div> <div> <button = "submit"> sign in </button> </div> </div> </form> </form>
また、フォームレイアウトを実行すると、グリッドレイアウトにCOL-SMおよびCOL-SMオフセットを使用することもできます。
上記は、編集者によって導入されたブートストラップ形式の包括的な分析です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！