Bootstrap bootstrap grid system _javascript techniques for automatic adaptation of PC, Tablet and mobile phone

Grid system in English as "grid systems", also some people translated as "mesh system", the use of fixed lattice design layout layout, its style neat and concise, in the Second World War after the great popularity, has become today's publication design one of the mainstream style.

In 1692, the newly crowned French king, Louis 14, felt that French printing was passable, and ordered the establishment of a Royal Special Committee for the management of printing. Their first task is to design a scientific, reasonable, and functional new font. The Committee was led by the mathematician Nicolas Gazon (Nicolas Jaugeon), who based on the Roman, uses the square as the design basis, each typeface square divides into 64 basic square units, each square unit again divides into 36 small lattice, thus, a printing page has 2,304 small lattice composition, In this rigorous geometry grid network design font shape, layout, test communication function efficiency, this is the world's first font and layout of the scientific experiment activities, but also the first prototype grid system.

I define the Web grid system as follows: a regular grid array to guide and standardize the layout of the page and the distribution of information. The Web grid system is developed from the planar grid system. For web design, the use of raster system, not only can make the information of the Web page more beautiful and easy to read, more usability. Moreover, for front-end development, the Web page will be more flexible and standardized.

Bootstrap provides a set of responsive, mobile device-priority streaming grid systems that automatically divide the system into up to 12 columns as the screen or viewport (viewport) dimensions increase. It contains predefined classes that are easy to use, as well as powerful mixin for generating more semantic layouts.

That is to say bootstrap divides the width of an element into 12 parts. We arrange the elements in this row divided into 12 parts.

I. BASIC OBJECTIVES

Make two lines that change the width of each cell within the device because of the difference between the cells:

On the phone small screen, uplink a accounted for 2 B accounted for 10, AB shares the 12, the downlink a accounted for 1 B 1 share 10, ABC shares this 12.

On the flat screen, up a accounted for 8 B accounted for 4, AB shares the 12, the downlink a accounted for 10 B for 1 C accounted for 1, ABC shared this 12.

On the PC's big screen, uplink a accounted for 4 B accounted for 8, AB shares the 12, the downlink a accounted for 1 B for 10 C accounted for 1, ABC shared this 12.

Second, the production process

First in the Web folder to configure the bootstrap, in the official website (click to open the link) to download components can be used in the production environment of the bootstrap version (click to open the link), BOOTSTRAP3 2 is not compatible, it is recommended to use BOOTSTRAP3 directly according to its development documents. After the bootstrap decompression, the resulting 3 folders Css,fonts,js copied to the site directory below. If this is Eclipse's JSP Web project, put them under the Webroot folder.

After the code below, please see the comments:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">