What is bootstrap responsive

In bootstrap, responsiveness means that the same page has different layouts under different screen sizes and can be compatible with devices of different resolutions. Responsive web design allows users to browse the website through devices of various sizes. A good visual effect can be achieved by using a grid system and dividing a row into 12 equal grids.

The operating environment of this tutorial: Windows 10 system, bootstrap version 5, DELL G3 computer

What is bootstrap responsiveness

Response Style layout refers to the same page having different layouts under different screen sizes, which can be compatible with devices of different resolutions

The traditional development method is to develop one set for the PC and another set for the mobile phone, and use It is enough to develop a responsive layout. The disadvantage is that CSS is relatively heavy.

Implementation: Relying on the grid system, a row is evenly divided into 12 grids, and you can specify how many grids an element occupies

What is responsive web design

Responsive Web design is a method that allows users to obtain good visual effects when browsing the website through devices of various sizes. For example, you first browse a website on a computer monitor, and then browse it on a smartphone. The screen size of the smartphone is much smaller than the computer monitor, but you do not feel any difference. The user experience of the two is almost the same, which means that the website Great job on responsive design.

We have implemented responsiveness into our fluid layout examples and invite you to browse them on different screen sizes. You can resize your browser with the Window Resize extension for Chrome or FireFox.

How Responsive Web Design Works

In order to apply responsive web design, you need to create a CSS that contains styles that adapt to various device sizes. Once a page is loaded on a specific device using various fonts and web development techniques such as media queries, the device's viewport size is first detected and device-specific styles are loaded.

In-depth study of CSS for responsive web design

We will learn how to implement "responsive design" through the study of 'bootstrap-responsive.css' Different. Before this, you must add the following line of code to the head area of ​​the web page:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The meta tag of the viewport overrides the default viewport and helps load styles related to the specific viewport.

width attribute sets the screen width. It contains a value such as 320 for 320 pixels, or 'device-width' to tell the browser to use the native resolution.

The initial-scale property is the initial scale of the viewport. When set to 1.0, the native width of the device is rendered.

Of course, you have to add Bootstrap's responsive CSS as shown below:

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Now, if you look for the responsive CSS file, you will find that, after some common declarations (from Line numbers 10 to 22), there are various fields starting with '@media'. This is how to write styles that work across a variety of devices.

The first area starts with '@media (max-width: 480px)' and sets styles for devices with a maximum width of 480 pixels.

The second area starts with '@media (max-width: 767px)' and sets styles for devices with a maximum width of 767 pixels.

The third area starts with '@media (min-width: 768px) and (max-width: 979px)' to set styles for devices with a minimum width of 768 pixels and a maximum width of 979 pixels.

The next area is to style devices with a maximum width of 979 pixels. So it starts with '@media (max-width: 979px)'.

The last two areas start with '@media (min-width: 980px)' and '@media (min-width: 1200px)' respectively. The former one is to set styles for devices with a minimum width of 980 pixels. , the latter is to set styles for devices with a minimum width of 1200 pixels.

So, the basic function of this style sheet is to use the 'min-width' and 'max-width' attributes to determine the style to be used based on the maximum and minimum width of the device.

Related recommendations: bootstrap tutorial

The above is the detailed content of What is bootstrap responsive. For more information, please follow other related articles on the PHP Chinese website!