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.
The layout of a form is divided into two types: automatic layout and customized layout:
Automatic layout is to automatically use different bootstrap rasters based on the length of the array in the second-level configuration item in the configuration item. Automatic layout can be achieved by setting autoLayout to true.
Automatic layout is to determine the grid used according to autoLayout. By setting autoLayout:'1,2,1,2,2,4', it means that the first and second columns occupy 3 grids, and the third column accounts for 6 grids.
The automatic layout code is as follows (https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form2-auto-layout.html):
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Automatic layout</title><link rel="stylesheet" href="../css/bootstrap.css"><script src="../lib/jquery.js"></script><script src="../lib/bootstrap.js"></script><!--Tools--><script src="../scripts/global.js"></script><!--Plug-in--><script src="../scripts/plugin.js"></script></head><body><div><div><label>Automatic layout</label></div><div><form action="#" id="formContainer"></form></div><div><label>Introduction</label></div><div><label>Introduction</label></div><div><h3>The so-called automatic layout is: to automatically use different rasters according to the number of individual configuration groups. For example: the number of items in the array is 2, then use 2, 4, 2, 4 layout</h3><p>Rely on bootstrap raster styles and only supports 12-segment formats. If you configure 5 items, it is not supported</p></div></div><script>$(function () {var eles=[[{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:{type:'text',name:'DisplayName',title:'display name:'}},{ele:{type:'datetime',name:'FromeDate',title:'valid period:'}},{ele:{type:'datetime',name:'ToDate',title:'~'}}]];//Hidden form elements are mainly used for editing, the background can be distinguished from var hides = [{ id: 'GUID' }];var bsForm = new BSForm({ eles: eles, hides: hides, autoLayout:true }).Render('formContainer');});</script></body></html>Running renderings:
You can see that the first and 2 items in my configuration file are equipped with 2 columns, and the third item is configured with 3 columns, so the first and second items of the div.form-group generated is used: 2,4 The third item is used: 1,3 From the interface, the ui display is very unfriendly, so autoLayout: true is generally used in special scenarios and when each item is equal.
Custom layout code (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 layout</title><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><!--Tools Methods--><script src="../scripts/global.js"></script><!--Plugin--><script src="../scripts/plugin.js"></script></head><body><div><div><label>Custom layout</label></div><div><form action="#" id="formContainer"></form></div><div><label>Introduction</label></div><div><label>Fixed layout, that is, layout according to the configured layout</h3><p>If you configure autoLayout:1,2 1,2 raster will be displayed</p><p>If you configure autoLayout:1,2,2,4 the first element will be layouted using 1,2, and the second one will be layout using 2,4. If there is no 2,4 system will automatically look for 1,2</p></div><script>$(function () {var eles=[[{ele:{type:'text',name:'UserName',title:'UserName',title:'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:{type:'text',name:'DisplayName',title:'display name:'}},{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: 'GUID' }];var bsForm = new BSForm({ eles: eles, hides: hides, autoLayout: '1,2,1,2' }).Render('formContainer');});</script></body></html>The renderings are as follows:
note: If the page has 4 columns, but the configured autoLayout is insufficient, the following part will use the previous layout, that is, the first column is used as the default configuration column.
The above is the full description of the BootStrap smart form practical series (IV) form layout introduction that the editor introduced to you. 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!