"CSS" bootstrap automatically adapts to the grid system of PC, tablet and phone

Grid system in English as "grid systems", but also translated into "grid system", the use of fixed grid design layout, its style neat and concise, after the Second World War is popular, has become the main style of publication design today.

In 1692, the newly-ascended King of France, Louis 14, felt that France had a poor level of printing and ordered the establishment of a Royal Special Committee to manage printing. Their first task is to design a scientific, rational, and functional new font. The committee was led by mathematician Nicolas Gazon (Nicolas Jaugeon), who, based on basic, uses squares as the basis for design, each of which is divided into 64 basic square units, each of which is divided into 36 smaller squares, so that a printed layout has 2,304 small squares, In this rigorous geometric grid network design font shape, layout, test to convey the effectiveness of the function, which is the world's first font and layout of scientific experiments on the activity, but also the earliest embryonic grid system.

My definition for the Web grid system is: 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 a planar grid system. For web design, the use of grid system can not only make the information of Web page more beautiful and readable, but also more usability. And, for the front-end development, the Web page will be more flexible and normative.

Bootstrap provides a responsive, mobile-first streaming raster system that is automatically divided into up to 12 columns as the screen or viewport (viewport) size increases. It contains pre-defined classes that are easy to use, and powerful mixin for generating more semantic layouts.

That is to say, bootstrap divides the width of an element into 12 parts. In this we are divided into 12 parts of the line arrangement element.

I. BASIC OBJECTIVES

Make the following two lines, because the width of each cell will change depending on the device:

On the phone's small screen, the uplink a accounted for 2 copies of B accounted for 10 copies, AB shared the 12, downlink a accounted for 1 parts B accounted for 1 parts C accounted for 10 parts, ABC shared these 12 copies.

On the flat-screen medium screen, the uplink a accounted for 8 copies B accounted for 4 copies, AB shared these 12, the downlink a accounted for 10 parts B accounted for 1 parts C accounted for 1 parts, ABC shared these 12 copies.

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

Second, the production process

First configure the bootstrap in the Web page folder, on the official website (click Open link) to download the components, for the production environment bootstrap version (click to open the link), BOOTSTRAP3 is not compatible with 2, it is recommended to use BOOTSTRAP3 directly according to their development documents. After bootstrap decompression, the resulting 3 folders Css,fonts,js copied to the site directory. If you are the JSP Web project for Eclipse, put them under the Webroot folder.

Follow the code below and see the notes for details:

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

"CSS" bootstrap automatically adapts to the grid system of PC, tablet and phone