twitter-bootstrap-3 - Bootstrap 根据设备更改镜像

Question

我想在不同的设备中显示不同的图像(不是背景图像)。是否可以像下面这样使用 bootstrap 3.x？

大屏幕用

<img src="large-image.jpg" />

中型设备

<img src="medium-image.jpg" />

用于小型设备

<img src="small-image.jpg" />

等等。

提前致谢。

注意最后我自己找到了一个很好的解决方案。请参阅下面接受的答案。

Answer 1

试试这个:

<div class="row">
    <div class="col-xs-12 hidden-sm hidden-md hidden-lg">  
        <img class="img-responsive" src="layouts/layouts.PNG" />    <!--Mobile-->
    </div>
    <div class="hidden-xs col-sm-12 hidden-md hidden-lg">
        <img class="img-responsive" src="layouts/05.png" />   <!--Tab-->
    </div>
    <div class="hidden-xs hidden-sm col-md-12 hidden-lg">
        <img class="img-responsive" src="layouts/06.png" />   <!--Desktop-->
    </div>
    <div class="hidden-xs hidden-sm hidden-md col-lg-12">
        <img class="img-responsive" src="layouts/Layout_100.png" />  <!--Large-->
    </div>
</div>

希望这可能会有所帮助!!