Bootstrap Intelligent Form Combat Series (iv) Form layout introduction _javascript Tips

What is Bootstrap?

Bootstrap is a front-end framework for rapid development of Web applications and Web sites. Bootstrap is based on HTML, CSS, and JAVASCRIPT.

the layout of a form is divided into two types: Automatic layout and custom layout.

Automatic layout is the automatic use of different bootstrap grids based on the length of the array in the second-level configuration item in the configuration item, which can be automatically laid out by setting AutoLayout to True

Automatic layout is based on AutoLayout to determine the use of the grid, by setting AutoLayout: ' 1,2,1,2,2,4 ' means that the first to second column occupies 3, the third column occupies 6 lattice

The Automatic layout code looks like this (https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form2-auto-layout.html):

<! DOCTYPE html>  

Run Effect chart:

I can see that the first and 2 items in my profile are equipped with 2 columns, and the third item is configured with 3 columns, so the first and second items of the generated div.form-group are used: 2,4 the third use: 1,3 the UI looks friendly from the interface, So autolayout:true is generally used for special scenarios and where each item is equal.

Custom Layout Code (https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form2-fix-layout.html):

<!
DOCTYPE html>  

The effect chart is as follows:

Note: If the page has 4 columns, but the AutoLayout of the configuration is not sufficient, the following section will use the previous layout, the first column as the default configuration column.

The above is a small series to introduce the Bootstrap intelligent form of the actual Combat series (iv) Form layout of all the description, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!