什麼是Bootstrap？
Bootstrap 是一個用於快速開發Web 應用程序和網站的前端框架。 Bootstrap 是基於HTML、CSS、JAVASCRIPT 的。
歷史
Bootstrap 是由Twitter 的Mark Otto 和Jacob Thornton 開發的。 Bootstrap 是2011 年八月在GitHub 上發布的開源產品。
Bootstrap 包的內容
基本結構：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。這將在Bootstrap 基本結構部分詳細講解。
CSS：Bootstrap 自帶以下特性：全局的CSS 設置、定義基本的HTML 元素樣式、可擴展的class，以及一個先進的網格系統。這將在Bootstrap CSS 部分詳細講解。
組件：Bootstrap 包含了十幾個可重用的組件，用於創建圖像、下拉菜單、導航、警告框、彈出框等等。這將在佈局組件部分詳細講解。
JavaScript 插件：Bootstrap 包含了十幾個自定義的jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。這將在Bootstrap 插件部分詳細講解。
定制：您可以定制Bootstrap 的組件、LESS 變量和jQuery 插件來得到您自己的版本。
本章介紹如何在生成表單後，將一個model的數據展示到form表單中(一般用於編輯頁面)
代碼如下(連接地址：https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form4-initData.html)：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>數據綁定</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../css/bootstrap.css"><!--自定義站點樣式--><link rel="stylesheet" href="../css/site.css"><script src="../lib/jquery.js"></script><script src="../lib/bootstrap.js"></script><!--工具方法--><script src="../scripts/global.js"></script><!--插件--><script src="../scripts/plugin.js"></script></head><body><div><div><label>數據綁定</label><div><button id="btnSubmit">提交表單</button></div></div><div><form action="#" id="formContainer"></form></div></div><div><div><label>介紹</label></div><div><h3>表單數據綁定</h3><blockquote><p>將json格式的model綁定到表單中,此處使用模擬的model數據，實際環境中應該是與服務器交互取到數據，在配置對象的是需要一個回調方法，在回到方法裡面可以做表單的一些其他操作，如添加表單驗證、添加日期插件的支持====</p><p>note:複選框的數據源為數組形式</p></blockquote></div></div><script>$(function () {var eles=[[{label:{text:'自定義用戶名:'},ele:{type:'text',name:'UserName',title:'用戶名:',required:true}},{ele:{type:'radio',name:'sex',title:'性別:',items:[{text:'男',value:1},{text:'女',value:2}]}},{ele:{type:'checkbox', name:'plant',title:'使用平台:',items:[{text:'APP',value:'app'},{text:'web',value:'web'}]}} ],[{ele:{type:'select',name:'province',title:'省份:',withNull:true,items:[{text:'廣東',value:'GD'},{text:'湖南',value:'HN'}]}},{ele:{pre:{text:'<input type="radio">'},type:'text',name:'displayName',title:'顯示名稱:'}},{ele:{type:'search',title:'產品',id:'ProductName'}}],[{ele:{type:'datetime',name:'FromeDate',title:'有效期:'}},{ele:{type:'datetime',name:'ToDate',title:'~'}},]];//隱藏表單元素主要用於編輯時候後台可以區別開來var hides = [{ id: 'primaryKey' }];var bsForm = new BSForm({ eles: eles, hides: hides, autoLayout: '1,3' }).Render('formContainer',function(bf){var model={primaryKey:1,UserName:'xxg',sex:1,plant:['app','web'],province:'GD',displayName:'TEST',ProductName:'筆記本',FromeDate:'2015-06-10',ToDate:'2015-08-08'};bf.InitFormData(model);});$("#btnSubmit").bind('click',function () {var postData=bsForm.GetFormData();alert("獲取到的表達數據為:"+JSON.stringify(postData));})});</script></body></html>此處使用js創建了一個json類型的model，實際開發情況下會跟服務器交互得到一個model，通過表單插件的InitFormData方法將model顯示到form表單中
效果圖如下：
定義的數據成功顯示到表單中
note:針對複選框多選的情況下，需要返回的是一個數組
以上所述是小編給大家介紹的BootStrap智能表單實戰系列(六)表單編輯頁面的數據綁定的全部敘述，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！