css - 推特引导移动

Question

我有一个用 Bootstrap 构建的网站，也想制作一个移动版本。唯一的问题是我想要创建的布局会有很大的不同。例如。

桌面版在主页的中心有一个巨大的图像，而移动版则没有。

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

Answer 1

是的，您可以使用响应式实用程序类。例如：

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

此图像在手机上不可见。

更新

这是旧的 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; 隐藏特定屏幕尺寸的对象。

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

祝你好运

Answer 3

我知道问题是关于 Bootsrap 和 CSS 的。但是，鉴于您的陈述

桌面版在主页中心有一个巨大的图像

我会考虑@David Taiaroa 的解决方案，或者只是提供与服务器完全不同的内容。响应实用程序类使用它在display: none隐藏图像时仍会加载它。如果是huge图片，这可能会影响您移动设备上的加载时间（请参阅显示：无；作者 Laura Kalbag）。

实用程序类更适用于不会对您网站的加载时间产生大影响的小内容。对于像高像素图像甚至图像轮播这样的大元素，最好使用像@David Taiaroa 建议的媒体查询，或者提供完全不同的内容。