What is Bootstrap?
Bootstrap is a front-end framework for the rapid development of web applications and websites. Bootstrap is based on HTML, CSS, and JAVASCRIPT.
history
Bootstrap was developed by Twitter's Mark Otto and Jacob Thornton. Bootstrap is an open source product released on GitHub in August 2011.
Contents of the Bootstrap package
Basic structure: Bootstrap provides a basic structure with a grid system, link style, and background. This will be explained in detail in the Bootstrap Basic Structure section.
CSS: Bootstrap comes with the following features: global CSS settings, definition of basic HTML element styles, extensible class, and an advanced grid system. This will be explained in detail in the Bootstrap CSS section.
Components: Bootstrap contains more than a dozen reusable components for creating images, drop-down menus, navigation, warning boxes, pop-up boxes, and more. This will be explained in detail in the Layout Components section.
JavaScript Plugin: Bootstrap contains more than a dozen custom jQuery plugins. You can include all the plugins directly or one by one. This will be explained in detail in the Bootstrap plug-in section.
Customization: You can customize Bootstrap components, LESS variables, and jQuery plug-ins to get your own version.
This chapter introduces how to display a model data into a form form after generating a form (usually used to edit pages)
The code is as follows (connection address: https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form4-initData.html):
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Data binding</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../css/bootstrap.css"><!--Custom site style--><link rel="stylesheet" href="../css/site.css"><script src="../lib/jquery.js"></script><script src="../lib/bootstrap.js"></script><!--Tool Methods--><script src="../scripts/global.js"></script><!--Plugin--><script src="../scripts/plugin.js"></script></head><body><div><div><label>Data Binding</label><div><button id="btnSubmit">Submit the form</button></div></div><div><form action="#" id="formContainer"></form></div><div><div><label>Introduction</label></div><div><label>Introduction</label></div><div><h3>Form Data Binding</h3><blockquote><p>Bind json format model to form, using simulated model data here. In the actual environment, it should interact with the server to get data. In the configuration object, a callback method is required. Some other operations of the form can be done in the return method, such as adding form verification and adding date plug-in support ====</p><p>note: The data source of the check box is in an array form</p></blockquote></div><script>$(function () {var eles=[[{label:{text:'custom username:'},ele:{type:'text',name:'UserName',title:'Username:',required:true}},{ele:{type:'radio',name:'sex',title:'gender:',items:[{text:'male',value:1},{text:'female',value:2}]}},{ele:{type:'checkbox', name:'plant',title:'using platform:',items:[{text:'APP',value:'app'},{text:'web',value:'web'}]}} ],[{ele:{type:'select',name:'province',title:'Province:',withNull:true,items:[{text:'Guangdong',value:'GD'},{text:'Hunan',value:'HN'}]}},{ele:{pre:{text:'<input type="radio">'},type:'text',name:'displayName',title:'display name:'}},{ele:{type:'search',title:'Product',id:'ProductName'}}],[{ele:{type:'datetime',name:'FromeDate',title:'Validation period:'}},{ele:{type:'datetime',name:'ToDate',title:'~'}},]];//Hidden form elements are mainly used for editing. The background can be distinguished. 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:'Notebook',FromeDate:'2015-06-10',ToDate:'2015-08-08'};bf.InitFormData(model);});$("#btnSubmit").bind('click',function () {var postData=bsForm.GetFormData();alert("The obtained expression data is:"+JSON.stringify(postData));})});</script></body></html>Here, a json-type model is created using js. In actual development, you will interact with the server to get a model. The model is displayed in the form form through the InitFormData method of the form plug-in.
The renderings are as follows:
The defined data is displayed successfully in the form
note: In case of multiple selections for check boxes, what needs to be returned is an array
The above is the complete description of the data binding of the BootStrap smart form practical series (VI) form editing page introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!