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.
The above are all for the following text. Here are the knowledge of block form configuration , as follows:
I believe my friend must have encountered a situation where an editing page has many blocks. The smart form plug-in has supported this situation for you.
The code is as follows (link address: https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form2-group-layout.html):
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Group form</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>Group form</label></div><div><form action="#" id="formContainer"></form></div><div><label>Introduction</label></div><div><label>Introduction</label></div><div><h3>The only difference is that the grouping configuration item is the form of 'group:config item'</h3></div></div><script>$(function () {//Note that when configured as a group form, the configuration item is a json object instead of an array var eles={'User information':[[{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'}]}} ] ],'Other information':[{ele:{type:'text',name:'DisplayName',title:'Displayname:'}},[{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:true }).Render('formContainer');});</script></body></html>Running effect diagram: (The current configuration item has two parts: user information and other information)
The above is the full description of the BootStrap smart form practical series (III) block form configuration 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!