ブートストラップとは何ですか？
Bootstrapは、WebアプリケーションとWebサイトの迅速な開発のためのフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。
フォームのレイアウトは、自動レイアウトとカスタマイズされたレイアウトの2つのタイプに分割されます。
自動レイアウトは、構成アイテムの2番目の構成アイテムの配列の長さに基づいて、異なるブートストラップラスターを自動的に使用することです。 AutoLayoutをTrueに設定することにより、自動レイアウトを実現できます。
自動レイアウトは、AutoLayoutに従って使用されるグリッドを決定することです。 autolayout： '1,2,1,2,2,4'を設定することにより、最初の列と2番目の列が3つのグリッドを占めることを意味し、3番目の列が6グリッドを占めます。
自動レイアウトコードは次のとおりです（https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form2-auto-layout.html）：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>自動レイアウト</title> <link rel = "styleSheet" href = "../ css/bootstrap.css"> <スクリプトsrc = " src = "../ lib/bootstrap.js"> </script> <！ - > <script src = "../ scripts/global.js"> </script> <！ - script src = "../ scripts/plugin.js"> </script> </head> <div div div div div div div div div div div div div> </</</< action = "＃" id = "formcontainer"> </form> </div> <div> <abole> introduting </label> </div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <h3>いわゆる自動レイアウトは次のとおりです。たとえば、配列内のアイテムの数は2で、2、4、2、4レイアウトを使用します</h3> <p>は、ブートストラップラスタースタイルに依存し、12セグメント形式のみをサポートします。 5つのアイテムを構成する場合、サポートされていません</p> </div> </div> <script> $（function（）{var ELES = [{ELE：{type： 'text'、name： 'username'、title： 'username：'、required：true}}、{ele：{type： 'radio'、name： 's ex '、title：' gender： '、items：[{text：' male '、value：1}、{text：' femal '、value：2}]}}、]、[{ele：{type：' checkbox '、名前： 'Plant'、タイトル： '使用プラットフォーム： '、アイテム：[{text：' app '、value：' app '}、{text：' web '、value：' web '}]}}、{ele：{type：' select '、name：' bevince '、' utute： '、withnull：true、items：[{text：' guangdong '、value：' gd '' hunan '、 ： 'hn'}]}}]、[{ele：{type： 'text'、name： 'displayname'、title： 'display name：'}}、{ele：{type： 'datetime'、name： 'fromedate'、title： 'valid期間： '}}、{ele：{type：' datetime '、name：' todate '、title：'〜 '}}}}}}}}}}}}}]]; //編集には主に使用されます= [{id：' guid '}]; var bsform = new bsform（{eles：eles：ele bsform（ }）。render（ 'formcontainer'）;}）; </script> </body> </html>ランニングレンダリング：
構成ファイルの最初のアイテムと2つのアイテムに2列が装備されており、3番目のアイテムには3列で構成されているため、div.form-group生成の最初と2番目のアイテムが使用されます。
カスタムレイアウトコード（https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form2-fix-layout.html）：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> customレイアウト</title> <link rel = "styleSheet" href = "../ css/bootstrap.css"> <！ - customサイトスタイル - > src = "../ lib/jquery.js"> </script> <script src = "../ lib/bootstrap.js"> </scrip> <！ - ツールメソッド - > <スクリプトsrc = "../ scripts/global.js"> </script> <！ - プラグイン - > <> <> <> < src = "../ scripts/plugin.js"> </script> </head> <body> <body> <div> <div> <div> <abol>カスタムレイアウト</label> </div> <div> <form action = "＃" id = "formcontainer"> </formレイアウト</h3> <p> autolayoutを構成する場合：1,2 1,2ラスターが表示されます</p> <p> autolayoutを構成する場合：1,2,2,4は1,2を使用してレイアウトされ、2番目の要素は2,4を使用してレイアウトされます。 2,4システムがない場合、システムは自動的に1,2 </p> </div> <script> $（function（）{varを探しますELES = [{ELE：{type： 'text'、name： 'username'、title： 'username'、title： 'username'、title： 'username：' neclue：true}}、{ele：{ty PE： 'Radio'、name： 'sex'、title： 'gender：'、items：[{text： 'male'、value：1}、{text： 'fame'、value：2}]}}}}}}}}}}}}}}}}名前： 'Plant'、タイトル： '使用プラットフォーム： '、項目：[{text：' app '、value：' app '}、{text：' web '、value：' web '}]}}、{ele：{type：' select '、name：' provi nce '、title：' province： '、withnull：true、items：[{text：' guangdong '、value：' gd '}、{text：' hunan '、value：' hn '}]}}} ]、[{ele：{type： 'text'、name： 'displayname'、title： 'display name：'}}、{type： 'datetime'、name： 'fromedate'、 'validation inpering：'}}、{ele：{type： 'dateTime'、 'dodate'、 '〜編集背景はvar hides = [{id： 'guid'}]; var bsform（{eles：eles、hides：hides、autolayout： '1,2,1,2'}）。レンダリングは次のとおりです。
注：ページには4つの列があるが、構成されたAutoLayoutが不十分な場合、次の部分は以前のレイアウトを使用します。つまり、最初の列はデフォルトの構成列として使用されます。
上記は、編集者が紹介したBootstrap Smart Form Practicalシリーズ（IV）フォームレイアウトの紹介の完全な説明です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！