ブートストラップとは何ですか？
Bootstrapは、WebアプリケーションとWebサイトの迅速な開発のためのフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。
歴史
ブートストラップは、TwitterのMark OttoとJacob Thorntonによって開発されました。 Bootstrapは、2011年8月にGitHubでリリースされたオープンソース製品です。
ブートストラップパッケージの内容
基本構造：ブートストラップは、グリッドシステム、リンクスタイル、背景を備えた基本構造を提供します。これについては、ブートストラップの基本構造セクションで詳細に説明します。
CSS：Bootstrapには、グローバルCSS設定、基本的なHTML要素スタイルの定義、拡張クラス、および高度なグリッドシステムの機能が付属しています。これについては、ブートストラップCSSセクションで詳しく説明します。
コンポーネント：ブートストラップには、画像、ドロップダウンメニュー、ナビゲーション、警告ボックス、ポップアップボックスなどを作成するための12を超える再利用可能なコンポーネントが含まれています。これについては、レイアウトコンポーネントセクションで詳しく説明します。
JavaScriptプラグイン：Bootstrapには、1ダース以上のカスタムJQueryプラグインが含まれています。すべてのプラグインを直接または1つずつ含めることができます。これについては、ブートストラッププラグインセクションで詳しく説明します。
カスタマイズ：ブートストラップコンポーネント、より少ない変数、およびjQueryプラグインをカスタマイズして、独自のバージョンを取得できます。
この章では、フォームを生成した後にモデルデータをフォームに表示する方法を紹介します（通常はページの編集に使用されます）
コードは次のとおりです（接続アドレス：https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form4initdata.html）：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> data binding </title> <meta name = "viewport" content = "width =" device-width、hirting-scale = 1 "> <link rel =" styleheet " rel = "styleSheet" href = "../ css/site.css"> <script src = "../ lib/jquery.js"> </script> <script src = "../ lib/bootstrap.js"> </script> <！ - ツールメソッド - > <スクリプトsrc = src = "../ scripts/plugin.js"> </script> </head> <body> <div> <div> <div> <abow> data binding </label> <div> <button id = "btnsubmit">フォームを送信</button> </div> </div> <div> <form action = "＃" " id = "formcontainer"> </form> </div> <div> <div> <abow> introdution </label> </div> <div> <abole> introling </label> </div> <div> <h3>フォームデータバインディング</h3> <blockquote> <p> bind json形式のモデル、フォームを使用します。実際の環境では、サーバーと対話してデータを取得する必要があります。構成オブジェクトでは、コールバックメソッドが必要です。フォームの確認や日付プラグインのサポートの追加など、フォームの他の操作を返す方法で実行できます。 username： '}、ele：{type：' text '、name：' username '、title：' username： '、required：true}}、{ele：{type：' radio '、nam e： 'sex'、title： 'gender：'、items：[{text： 'male'、value：1}、{text： 'femal'、value：2}]}}}、{ele：{type： 'checkbox'、名前： 'Plant'、Title： 'Platform：'、items：[{text： 'app'、value： 'app'}、{text： 'web'、value： 'web'}]}}} ]、[{ele：{type： 'select'、name： 'province'、title： 'province：'、withnull：true、items：[{text： 'guangdong'、balue： 'gd'}、{balue： 'hunan'、value： 'hn'}}}}、{ele：{pre： '<input：' <input type = "Radio"> '}、type：' text '、name：' displayname '、title：' display name： '}}、{ele：' search '、title：' product '、id：' productname '}}期間： '}、{ele：{type：' dateTime '、' todate '、title：'〜 '}、]; }）。render（ 'formcontainer'、function（bf）{var Model = {PrimaryKey：1、username： 'xxg'、sex：1、plant：['app'、 'web']、untion： 'gd'、displayname： 'test'、crowtname： 'noteb ook '、fromedate：' 2015-06-10 '、Todate：' 2015-08-08 '}; bf.initformdata（model）;}）; $（ "＃btnsubmit"） （）{var postdata = bsform.getformdata（）; alert（ "取得した式データは："+json.stringify（postdata））;}）}）; </script> </body> </html>ここでは、JSSを使用してJSONタイプモデルが作成されます。実際の開発では、サーバーと対話してモデルを取得します。モデルは、フォームプラグインのinitformdataメソッドを介してフォームに表示されます。
レンダリングは次のとおりです。
定義されたデータは、フォームで正常に表示されます
注：チェックボックスの複数の選択の場合、返す必要があるのは配列です
上記は、編集者が紹介したBootstrap Smart Form Practicalシリーズ（VI）フォーム編集ページのデータバインディングの完全な説明です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！