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.
Let’s get to the topic below. For details, please see below:
The code is as follows (link address: https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form1-basic.html):
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Basic Configuration</title><link rel="stylesheet" href="../css/bootstrap.css"><script src="../lib/jquery.js"></script><script src="../lib/bootstrap.js"></script><!--Tool Methods--><script src="../scripts/global.js"></script><!--Plug-in--><script src="../scripts/plugin.js"></script></head><body><div><div><label>Basic configuration</label></div><div><form action="#" id="formContainer"></form></div><div><label>Introduction</label></div><div><label>Introduction</label></div><div><h3>Supported form elements include: text, select, radio, checkbox, datetime, search, textarea, custom</h3></div></div><script>$(function () {var eles=[{ele:{type:'text',name:'UserName',title:'Username:'}},[{ele:{type:'radio',name:'sex',title:'gender:',items:[{text:'male',value:1},{text:'female',value:2}]}},{ele:{type:'checkbox', name:'plant',title:'user 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:'datetime',name:'FromeDate',title:'Validation period:'}},{ele:{type:'search',name:'selectName',title:'Select:'}},{ele:{type:'textarea',name:'address',title:'Address:'}},{ele:{pre:{text:'<input type="radio" />'},type:'text',name:'pre',title:'fork front:'}},{ele:{next:{text:'<input type="radio" />'},type:'text',name:'next',title:'after behind:'}},{ele:{pre:{text:'<input type="checkbox" />'},next:{text:'$'},type:'text',name:'pre&next',title:'fork front and back:'}},];//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>It is mainly the following js section, and form form is generated through this section js
Running renderings:
Get the results shown in the figure
The above is the full description of the BootStrap smart form practical series (II) 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 you in time. Thank you very much for your support to Wulin.com website!