HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The following classes will be based on the device (screen size) to the display element.
class | description |
---|---|
.show-for-small-only | Only display elements on a small device (screen width less than 40.0625em) |
.show-for-medium-up | Display elements on the medium and above devices (screen width greater than 40.0625em) |
.show-for-medium-only | Show only on medium-sized device element (screen width between 40.0625em to 64.0625em) |
.show-for-large-up | In large equipment and more display elements (screen width greater than 64.0625em) |
.show-for-large-only | Only displayed on large equipment element (screen width between 64.0625em to 90.0625em) |
.show-for-xlarge-up | Display elements on the larger and more equipment (screen width greater than 90.0625em) |
.show-for-xlarge-only | Only displayed on the larger and more equipment elements (screen width between 90.0625em to 120.0625em) |
.show-for-xxlarge-up | On the large equipment and more display elements (screen width greater than 120.0625em) |
The following example demonstrates all of the above .show-
visibility class.
<p class="show-for-small-only">你在小型设备上。</p> <p class="show-for-medium-up">你在中型、大型、更大型、超大型的设备上。</p> <p class="show-for-medium-only">你在中型设备上。</p> <p class="show-for-large-up">你在大型、更大型、超大型的设备上</p> <p class="show-for-large-only">你在大型设备上。</p> <p class="show-for-xlarge-up">你在更大型、超大型的设备上。</p> <p class="show-for-xlarge-only">你在更大型设备上。</p> <p class="show-for-xxlarge-up">你在超大型设备上。</p>
The following classes will be based on the device (screen size) to hide elements.
class | description |
---|---|
.hide-for-small-only | Only hide elements on a small device (screen width less than 40.0625em) |
.hide-for-medium-up | Hide elements in the medium and above devices (screen width greater than 40.0625em) |
.hide-for-medium-only | Only hide elements on a midrange device (screen width between 40.0625em to 64.0625em) |
.hide-for-large-up | Hide elements in large and more equipment (screen width greater than 64.0625em) |
.hide-for-large-only | Only hide elements on large equipment (screen width between 90.0625em to 64.0625em) |
.hide-for-xlarge-up | In the larger and more equipment hidden element (screen width greater than 90.0625em) |
.hide-for-xlarge-only | Only hidden element (screen width 90.0625em between 120.0625em) on the larger and more equipment |
.hide-for-xxlarge-up | Hidden element on the large and more equipment (screen width greater than 120.0625em) |
<p class="hide-for-small-only">你不在小型设备上。</p> <p class="hide-for-medium-up">你不在中型、大型、更大型、超大型的设备上。</p> <p class="hide-for-medium-only">你不在中型设备上。</p> <p class="hide-for-large-up">你不在大型、更大型、超大型的设备上。</p> <p class="hide-for-large-only">你不在大型设备上。</p> <p class="hide-for-xlarge-up">你不在更大型、超大型的设备上。</p> <p class="hide-for-xlarge-only">你不在更大型设备上。</p> <p class="hide-for-xxlarge-up">你不在超大型设备上。</p>
The following classes will be based on the device (screen size) to hide elements.
We can set an element in different directions, whether to show or hide. Laptops and other desktop devices generally horizontal, but mobile phones and tablet devices can be horizontal or vertical, we can hide and display the element according to the user's mobile phone to get directions:
class | description |
---|---|
.show-for-landscape | Display elements in the transverse (longitudinal hide) |
.show-for-portrait | Display elements (lateral hidden) in portrait orientation |
The following example shows the contents of the text according to the direction of use:
You can according to whether the device supports touch to display hidden element.
class | description |
---|---|
.show-for-touch | Displayed on a touch screen device support (not supported on devices hidden) |
.hide-for-touch | In support touch devices hidden (not displayed on supported devices) |
The following examples according to whether the device supports touch to display the text: