Twitter Bootstrap Mobile

Question

我有一个使用Bootstrap构建的网站,并且想要制作移动版本.唯一的问题是我想要创建的布局会有很大差异.例如.

桌面版本在中心的主页面上有一个巨大的图像,而移动版本则没有.

这是我可以在Bootstrap中实现的,还是我必须使用其他方法来提供两种截然不同的布局？

Answer 1

是的,您可以使用响应式实用程序类.例如:

<img src="image.png" class="hidden-phone" title="Main image" />

这张图片在手机上不可见.

UPDATE

这是旧的Bootstrap版本,最新见

http://getbootstrap.com/css/#responsive-utilities

Answer 2

来自@AlecTMH的建议很好,而且很容易做到.您的另一个选择是使用CSS和@media查询.

您可以为不同的屏幕宽度指定不同的值,例如

@media (max-width: 480px) {
  body{
  background-image: url('smartphone-background.jpg');
  }
}

@media (max-width: 767px) {
  body{
  background-image: url('tablet-background.jpg');
  }
}

或者您可以使用CSS属性display:none; 隐藏某些屏幕尺寸的对象.

所有方法都运行良好,有些方法在不同情况下更合适或更容易使用.

祝好运