The grid system is "grid systems" in English, and some people translate it as "grid system". It uses a fixed grid design layout. Its style is neat and concise. It became very popular after World War II and has become one of the mainstream styles of publication design today.
In 1692, Louis XIV, the newly ascended French king, felt that France's printing level was unsatisfactory, so he ordered the establishment of a Royal Special Committee to manage printing. Their first task is to design new fonts that are scientific, reasonable, and value functional. The committee was led by mathematician Nicolas Jaugeon. They were based on Roman bodies and used squares as the design basis. Each square grid was divided into 64 basic square units, and each square unit was divided into 36 small grids. In this way, a printing layout consists of 2,304 small grids. In this rigorous geometric grid network, the shape of the font, the layout arrangement, and the effectiveness of the communication function were designed. This is the earliest activity in the world to conduct scientific experiments on fonts and layouts, and it is also the earliest prototype of the grid system.
The definition of the web page raster system is: using a regular grid array to guide and standardize the layout and information distribution in the web page. Web raster systems are developed from planar raster systems. For web design, the use of grid systems can not only make the information on web pages more beautiful and easy to read, but also more usable. Moreover, for front-end development, web pages will be more flexible and standardized.
Bootstrap provides a responsive, mobile-first streaming grid system. As the screen or viewport size increases, the system will automatically be divided into up to 12 columns. It includes easy to use predefined classes, and also powerful mixins for generating more semantic layouts.
In other words, Bootstrap divides the width of an element into 12 parts. We arrange the elements in this row that are divided into 12 parts.
1. Basic Objectives
Make the following two rows, and the width of each cell in these two rows will change due to different devices:
On the small screen of the mobile phone, the upward A accounts for 2 parts B accounts for 10 parts, the downward A accounts for 1 part B accounts for 10 parts C accounts for 1 parts, and the ABC shares these 12 parts.
On the medium screen of the tablet, upward A accounts for 8 parts B accounts for 4 parts, AB shares these 12 parts, downward A accounts for 10 parts B accounts for 1 part C accounts for 1 part, ABC shares these 12 parts.
On the large screen of PC, upward A accounts for 4 B accounts for 8 shares, AB shares these 12 shares, downward A accounts for 1 B accounts for 10 C accounts for 1, ABC shares these 12 shares.
2. Production process
First configure Bootstrap in the web folder, and download the components on the official website (click to open the link). The Bootstrap version used in the production environment (click to open the link). Bootstrap3 is not compatible with 2. It is recommended to use Bootstrap3 directly according to its development documents. After decompressing Bootstrap, copy the obtained 3 folders css, fonts, and js to the site directory. If it is Eclipse's JSP Web Project, put them under the WebRoot folder.
The code is as follows, please see the comments for details:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><!--Web encoding, external files to be used, automatically adapt to the screen --><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/bootstrap.css" rel="stylesheet" media="screen"><meta name="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no"><title>Grid system</title></head><body><!--Using Bootstrap If you do not use the panel, put the elements into a container that accounts for 100% of the screen --><!--class="container" will automatically center --><div><!--Define a line --><div><!--xs represents the small screen of the mobile phone, md represents the screen in the tablet, and lg represents the large screen of the PC --><!--The sum of the elements of the same pair must be equal to 12, otherwise an error occurs, such as col-xs-2+B of A is equal to 12 --><!--bg-warning is the background color that defines a light yellow color --><div>A</div><div>B</div></div><div><!--The truth here is the same as above, col-xs-1+B of col-xs-1+C of col-xs-10 is equal to 12 --><div>A</div><div>B</div><div>C</div></div></body></html>