How to set the mobile element to be hidden in bootstrap

Bootstrap sets the method to hide elements on the mobile side: first open the corresponding code file; then use Bootstrap's grid system; and finally use "visible-xs-block" to set the display and hide on ultra-small devices and mobile phones.

The operating environment of this tutorial: Windows 7 system, bootstrap version 3. This method is suitable for all brands of computers.

Recommended: "bootstrap Tutorial"

Bootstrap Control the hiding and display of elements on the mobile and web pages

Look at the effect first

• PC, display 3 pictures

• Mobile version, only one page is displayed

The solution is to use Bootstrap’s grid system.

• visible-md-block indicates that it can be displayed on early and medium-sized desktop computers (≥992px)

• visible-lg-block indicates that it can be displayed on large-sized devices The device desktop computer (≥1200px) can display

• visible-xs-block means that the ultra-small device mobile phone (

Code:

 <p class="container">
    <p class="row">
        <p class="col-md-3 visible-md-block visible-lg-block">
            <a >
                <img  class="img-responsive lazy"  src="/static/imghwm/default1.png"  data-src="images/tm-sigma-00.jpg"      style="max-width:90%" alt="How to set the mobile element to be hidden in bootstrap" >    
            </a>
        </p>
        <p class="col-md-6 visible-xs-block visible-md-block visible-lg-block">
            <a >
                <img  class="img-responsive lazy"  src="/static/imghwm/default1.png"  data-src="images/tm-sigma-00.jpg"    data-preview- data-preview-group="1"   style="max-width:90%" alt="How to set the mobile element to be hidden in bootstrap" > 
            </a>
        </p>
        <p class="col-md-3 visible-md-block visible-lg-block">
            <a >
                <img  class="img-responsive lazy"  src="/static/imghwm/default1.png"  data-src="images/tm-sigma-00.jpg"      style="max-width:90%" alt="How to set the mobile element to be hidden in bootstrap" >    
            </a>
        </p>
    </p>
    </p>

                 

For more programming-related knowledge, please visit: Programming Learning! !

The above is the detailed content of How to set the mobile element to be hidden in bootstrap. For more information, please follow other related articles on the PHP Chinese website!