Is bootstrap responsive?

If you want to know more about bootstrap, you can click: Bootstrap Tutorial

What is responsive web design?

Responsive web design is a method that allows users to browse the website through devices of various sizes to obtain good visual effects. 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.

How does responsive web design work?

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.

Dive into CSS for responsive web design?

We will learn about how "responsive design" implements nuances by studying 'bootstrap-responsive.css'. Before this, you must add the following line of code to the head area of ​​the web page:

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

The 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 , after some public declarations (from line numbers 10 to 22), there are various areas 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)', with a minimum width of 768 pixels and device styles with 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. One is to set the style for devices with a minimum width of 980 pixels, and the latter is to set a style for devices with a minimum width of 1200 pixels.

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

Explanation

In order to make the layout more responsive, Bootstrap does three things:

　1 . Modified the width of the columns in the grid.

　2. Whenever necessary, it uses stack elements instead of floating elements. If you still don't know what a stack element is, the following form from w3.org may provide some help:

The root element (html) forms the root of the stack context, and other stack contexts are generated from any positioned elements. (Including relatively positioned elements, which have a calculated value of 'z-index' rather than 'auto'). The stack context is not required relative to the containing block.

　3. Render the title and text size correctly.

Develop mobile-friendly layouts faster.

#Bootstrap has several useful classes for developing mobile-friendly layouts. These classes can be seen on 'responsive.less'.

.visible-phone, visible on phones with a width of 767px and below, hidden on tablets with a width of 979px to 768px, hidden on desktops, this is the default.

.visible-tablet, hidden on mobile phones with a width of 767px and below, visible on tablets with a width of 979px to 768px, hidden on desktops, this is the default.

.visible-desktop, hidden from view on mobile phones with a width of 767px and below, hidden from view on tablets from 979px to 768px, visible on desktop, which is the default.

.hidden-phone, hidden from view on phones with a width of 767px and below, visible on tablets from 979px to 768px, visible on desktops, this is the default.

.hidden-tablet, visible on mobile phones with a width of 767px and below, hidden on tablets with a width of 979px to 768px, visible on desktop, which is the default.

.hidden-desktop, visible on mobile phones with a width of 767px and below, visible on tablets with a width of 979px to 768px, hidden on the desktop, which is the default.

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