Bootstrap-friendly layout for mobile devices and bootstrap-Layout

Source: Internet
Author: User

Bootstrap-friendly layout for mobile devices and bootstrap-Layout

Bootstrap has several useful classes for developing mobile device-friendly la S.

. Visible-phoneIt is visible on the phone whose width is 767px and below. It is invisible to the tablet whose width is 979px to 768px, and invisible to the desktop. This is the default value.

. Visible-tabletHidden and invisible on the cell phone whose width is 767px and below, visible on the tablet from 979px to 768px, invisible on the desktop, which is the default value.

. Visible-desktopHidden and invisible on the cell phone whose width is 767px or lower, hidden and invisible on the tablet from 979px to 768px, which is the default value on the desktop.

. Hidden-phoneHidden and invisible on the cell phone whose width is 767px and below, visible on the tablet from 979px to 768px, and visible on the desktop, which is the default value.

. Hidden-tablet, Visible on the phone whose width is 767px and below, hidden and invisible on the tablet from 979px to 768px, and visible on the desktop, which is the default.

. Hidden-desktop, Visible on the phone whose width is 767px and below, visible on the tablet from 979px to 768px, invisible on the desktop, which is the default.


We directly go to the Code:

<! Doctype html> 

For the effect, switch Dreamweaver to the design mode, and then switch different devices, such:


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.