Knowledge Notes | Bootstrap—Responsive Layout

Bootstrap—Responsive layout, one page fits all

Principles of Responsive Development

Use media queries to set the layout and style for devices of different widths to adapt to the purpose of different devices

Equipment division	Size range	Set width	Column prefix
Ultra small screen (mobile phone)	<768px	100%	.col-xs-
Small screen device (tablet)	>=768px ~ < 992px	750px	.col-sm-
Medium screen (desktop)	>=992px ~ < 1200px	970px	.col-md-
Widescreen device (large desktop)	>=1200px	1170px	.col-lg-3

Responsive requires a parent as the layout container to match its elements to achieve the effect of change. The principle is to change the size of the layout container through media queries on different screens, and then change the arrangement and size of the child elements inside. So that you can see different page layout and style changes on different pages

@media screen and (max-width:767px) {//小屏设备下的布局为100%
            .container {
                width: 100%;
            }
        }

@media screen and (min-width:768px) {//中屏设备下的
            .container {
                width: 750px;
            }
        }

Bootstarp front-end development framework-based on HTML, CSS, JS, simple and flexible, making WEB development faster

• Framework: a set of architecture, complete webpage functional solutions, pre-made style libraries, components and plug-ins

• Advantages: Standardized coding specifications provide a set of intuitive and powerful components, constantly update and iterate, and improve development efficiency

• Four steps: 1. Create folder structure 2. HTML skeleton 3. Import related file style 4. Write content

• It is used directly through the class name. If you want to add your own style, you just use style to make appropriate changes directly

  Container-fluid class flow layout container, 100% width, independent mobile development

Grid system

• Divide the page layout into columns of equal width, modularize the page layout through the definition of the number of columns, and the system divides it into 12 columns uniformly

• The existing rows have more columns, and the specific division of the columns needs to add the column prefix, .col-lg-3 (how many equal parts of each column in 12 copies)

  • The sum of the number of columns should be equal to 12. The column is exactly equal to 12 to fill the entire container, if it is not enough, there will be blanks, if the number of columns added exceeds 12, the extra column will be displayed on a new line
  • You can also add "class= col-lg-3 col-md-4" at the same time

• There is a padding value of 15px left and right in each column. The principle is to give 33.3% of the width distance and float to the left. If you directly give this +margin border, there will be overflow and fall. We need to add another box to the column and set it Padding

• Column nesting problem

  • Put two boxes directly in the column, there is a problem that the top grid cannot be displayed
  • If we add a row box before the column, the padding of the parent element can be cancelled, and the height will consciously be the same as the parent height

• Column offset problem

  • In order to realize that the content inside can be distributed separately, the right box is shifted to the right, and the blank content can be displayed in the middle.

  • col-md-offset-4 to achieve the right offset, the left box adds a margin value

• Column sorting problem

  • col-lg-push-8 Push the box on the right col-lg-pull-4 Pull the box on the left

• Column hidden display problem

  • hidden-xs/sm/md/lg can hide content under different circumstances
  • visible-xs/sm/md/lg displays content under different circumstances