Bootstrap - responsive layout

Posted by miniu on Mon, 03 Jan 2022 07:28:25 +0100

@

1. Principle of responsive development

Media query is used to set the layout and style for devices with different widths, so as to adapt to different devices.

Division of equipment:

Equipment division Dimension interval
Ultra small screen (mobile phone) < 768px
Small screen device (flat panel) >= 768px ~ < 992px
Medium screen (desktop display) >=992px ~ < 1200px
Widescreen device (large desktop display) >= 1200px

2. Responsive layout container

The response requires a parent as the layout container to match the child elements to achieve the change effect.

The principle is to change the size of the layout container through media query on different screens, and then change the arrangement and size of sub elements inside, so as to see different page layout and style changes on different screens.

General division of dimensions of parent container layout Center

  • Ultra small screen: set the width to 100%
  • Small screen: set the width to 750px
  • Medium screen: width set to 970px
  • Large screen: width set to 1170px

However, we can also define the division according to the actual situation


3. Bootstrap

① Bootstrap introduction

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS and JAVASCRIPT
, it is simple and flexible, making Web development faster.

Framework: as the name suggests, it is a set of architecture. It has a relatively complete web page function solution, and the control is in the framework itself, including prefabricated style libraries, components and plug-ins. Users should develop according to some specification specified in the framework.

  • Official website

    Chinese official website

    Official website

    Recommended use

  • advantage

    1. Standardized html+css coding specification
    2. It provides a set of simple, intuitive and powerful components
    3. It has its own ecosystem and is constantly updated and iterated
    4. It makes the development easier and improves the efficiency of development

  • edition

    • 2.x.x: the maintenance is stopped, the compatibility is good, the code is not concise enough, and the function is not perfect enough.
    • 3.x.x: it is currently used most and stable, but IE6-IE7 is abandoned. It supports IE8, but the interface effect is not good. It is used to develop WEB projects with responsive layout and mobile device priority.
    • 4.x.x: the latest version, which is not very popular at present

② Bootstrap usage

  1. Import bootstrap file

    bootstrap/
		css/..
		fonts/..
		js/..

  2. Create html skeleton structure

    <!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!--Require the current page to use IE The browser uses the highest version of the kernel to render-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--Viewport settings: the width of the viewport is consistent with the equipment, and the default zoom scale is and PC The end is consistent, and the user cannot scale by himself-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- Above 3 meta label*must*Put it first, anything else*must*Follow! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--solve ie9 The following browser pairs html5 The new label is not recognized and causes CSS Problems that don't work-->  
    <!--solve ie9 The following browser pairs css3 Media Query Unrecognized -->  
    <!--[if lt IE 9]>		
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

    CSS hack

  3. Import related style files

    <!-- Bootstrap Core style-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

  4. Writing content

    • Directly use the predefined style of Bootstrap
    • Modify the original Bootstrap style and pay attention to the weight

The key to learning Bootstrap well is to know what styles it defines and what effects these styles can achieve


③ Layout container

Bootstrap needs to wrap a for page content and grid system container, which provides two classes for this purpose

  1. container class
    • Container fixed width for responsive layout
    • The width of large screen (> = 1200px) is 1170px
    • The width of the middle screen (> = 992px) is set to 970px
    • The width of small screen (> = 768px) is set as 750px
    • Ultra small screen (100%)
  2. Container fluid class
    • Flow layout container 100% width
    • A container that occupies all viewport s

④ Grid system

brief introduction

Also known as "grid systems" and "grid systems", it refers to dividing the page layout into equal width columns, and then modularizing the page layout through the definition of the number of columns.

Bootstrap provides a responsive, mobile device first streaming grid system

The grid system will automatically divide the current container into 1 ~ 12 columns of equal width according to the width of the current container. With the increase of the size of the screen or viewport, the width of the container will also increase, and the width of each column will also increase adaptively


Grid option parameters

The grid system is used to create a page layout by combining a series of row s and column s, and your content can be put into these created layouts.

Ultra small screen Small screen Middle screen Large screen
. container maximum width Automatic (100%) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Number of columns 12 12 12 12

  • Rows can remove the 15px margin of the parent container. Each child element under the container (the proportion of elements in the number of columns can be different) has a padding of about 15 pixels by default

  • xs-(extra small): ultra small

    Small - (small): small

    md-(medium): medium

    lg-(large): Large

    Note: the proportion of the number of columns of elements set on this screen is the same on a screen wider than this screen.

    <div class="container">
	<div class="row">
        <div class="col-xs-4"></div>
        <div class="col-xs-4"></div>    
   	    <div class="col-xs-4"></div>
    </div>
</div>
Known: under the ultra small screen, 3 are displayed in parallel div，So, it is also displayed in small screen, medium screen, large screen and lower screen.

  • If the total number of columns of elements in the container is greater than 12, the elements of the redundant "column" will be arranged in another row as a whole; If it is less than 12, it will not fill the width of the container and a blank will appear

  • You can specify the class names of multiple devices for a column at the same time to divide the number of copies. For example, class="col-md-4 col-sm-6"


Grid nesting

The built-in grid system of the grid system nests the content again. A simple understanding is that a column is divided into several small columns. We can add a new one The row element and a series col - * - * (number of columns) element to existing col - * - * element.

<!-- Column nesting -->
 <div class="col-sm-4">
    <div class="row">
         <div class="col-sm-6">Small column</div>
         <div class="col-sm-6">Small column</div>
    </div>
</div>

[external chain image transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-xgyqeye2-1632677072914) (mobile Web development. assets/image-20210426164045896.png)]

The above effect will lose its effect on a screen smaller than the small screen.


Column offset

use. Col MD offset - * class can offset the column to the right. These classes actually increase the left margin for the current element by using the * selector.

 <!-- Column offset -->
  <div class="row">
      <div class="col-lg-4">1</div>
      <div class="col-lg-4 col-lg-offset-4">2</div>
  </div>

Column sorting

By using col-*-push - * (number of columns) and The column - * - pull - * (number of columns) class can easily change the order of columns.

 <!-- Column sorting -->
  <div class="row">
      <!-- push Shift right -->
      <div class="col-lg-4 col-lg-push-8">left</div>
      <!-- pull Shift left -->
      <div class="col-lg-8 col-lg-pull-4">right</div>
  </div>

Responsive tools

In order to speed up the development of mobile device friendly pages, we can easily display or hide page content for different devices by using media query function and these tools.

Class name Ultra small screen Small screen Middle screen Large screen
.hidden-xs hide so so so
.hidden-sm so hide so so
.hidden-md so so hide so
.hidden-lg so so so hide

Visible - *: opposite to the hidden effect, it means visible.

Refer to the Bootstrap documentation for more information



Hot Topics

©2025 Programmer Think