Bootstrap responsive design
Brief introduction
This tutorial shows you how to use responsive design the page layout. In the course, you will learn Responsive Web Design. With the popularity of mobile devices, how to let users browse through mobile devices to your site to get a good visual effects, already is an inevitable problem. Responsive Web design is an effective way to achieve this purpose.
What is Responsive Web Design
Responsive Web design is by allowing users to access a variety of sizes of devices to browse the site a good visual effectiveness. For example, on a computer monitor that you visit a Web site, and then browse on smart phones, smart phone's screen size is much smaller than a computer monitor, but you did not feel any difference between the user experience is almost the same, indicating that the site in response design does a good job.
We have our fluid layout examples of the application of the response performance , and invites you to browse at different screen sizes. You can use Chrome or FireFox to adjust the browser window resizing expansion.
Click here, you can view Bootstrap responsive design examples .
Responsive Web Design Works
Responsive Web design in order to apply, you need to create a variety of devices to adapt to the size of the CSS styles include. Once the page is loaded on a specific device, use a variety of fonts on the page and Web development technologies such as media queries (Media Queries), this time, will be the first test of the viewport size of the device, and then loads the style device-specific.
Depth study of Responsive Web Design CSS
We will 'bootstrap-responsive.css' learning how to learn "responsive design" is to achieve nuance. Prior to this, you must add the following line of code in the header area of the page:
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
viewport meta tag, overrides the default viewport and help load a specific style associated viewport.
width property to the screen width. It contains a value, such as 320, represents 320 pixels, or a value of 'device-width', used to tell the browser to use the original resolution.
initial-scale property is the ratio of the initial viewport. When set to 1.0, the device will show the original width.
Of course, you must add the Bootstrap Responsive CSS, as follows:
<Link href = "assets / css / bootstrap-responsive.css" rel = "stylesheet">
Now, if you find responsive CSS file, you will find that in some public statements back (from the line number 10-22), to a variety of area '@media' began. This is how to write a style suitable for a variety of devices.
The first area to '@media (max-width: 480px )' began as a maximum width of 480 pixels style device settings.
The second area to '@media (max-width: 767px )' began as a maximum width of 767 pixels style device settings.
The third area to '@media (min-width: 768px ) and (max-width: 979px)' started as a minimum width of 768 pixels and a maximum width of 979 pixels style device settings.
The next area is the maximum width of the device settings style 979 pixels. So it is '@media (max-width: 979px )' start.
The last two areas, respectively '@media (min-width: 980px )' and '@media (min-width: 1200px )' start, before a device is set to a minimum width of 980 pixels in the style, the latter is the smallest width set the style for the device 1200 pixels.
Therefore, the fundamental role of this stylesheet is by using the 'min-width' and 'max-width' property to determine the style used in accordance with the maximum width and a minimum width of the device.
Explanation
In order to make the layout more responsive, Bootstrap do three things:
1. Modify the width of the columns in the grid.
2. As long as there is a need, it uses elements of the stack, rather than floating element. If you do not know what is the stack element, the following forms from w3.org may provide some help:
Root element (html) to form a stack root context, the other stack context generation (including relatively positioned elements, there is a 'z-index' calculated value instead of 'auto') by an arbitrary element positioning. Context stack relative to the block contains not required.
3. To correctly render the title and text of their size.
Faster development for mobile devices friendly layout
Bootstrap class has several useful for the development of mobile-friendly layout. These classes can be seen in 'responsive.less' on.
.visible-phone, a width of 767px and less visible on the phone, on the 979px to 768px Tablet hidden from view, hidden from the desktop, which is the default.
.visible-tablet, a width of 767px and below the hidden cell phone is not visible, 979px to 768px visible on the plate, not visible on the desktop to hide, which is the default.
.visible-desktop, hidden on a width of 767px and below the phone is not visible, hidden on 979px to 768px Tablet invisible, visible on the desktop, which is the default.
.hidden-phone, a width of 767px and hide on the following phone is not visible, on the 979px to 768px Tablet visible, visible on the desktop, which is the default.
.hidden-tablet, a width of 767px and less visible on the phone, on the 979px to 768px Tablet hidden invisible, visible on the desktop, which is the default.
.hidden-desktop, at a width of 767px and below the phone's visibility on 979px to 768px Tablet visible, hidden from the desktop, which is the default.
Click here to download the tutorial to use all the HTML, CSS, JS and image files.