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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.