css - Twitter Bootstrap Mobile

Question

Bootstrapで構築されたWebサイトがあり、モバイルバージョンも作成したいと考えています。唯一の問題は、作成したいレイアウトが大きく異なることです。例えば。

デスクトップ版は中央のメインページに巨大な画像がありますが、モバイル版はそうではありません。

これはBootstrapで実現できることですか、それとも他の方法を使用して2つの大きく異なるレイアウトを提供する必要がありますか？

Answer 1

はい、レスポンシブユーティリティクラスを使用できます。例えば：

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

この画像は携帯電話には表示されません。

アップデート

これは古いBootstrapバージョン用でした。最新のバージョンについては

http://getbootstrap.com/css/#response-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が提案したようなメディアクエリを使用するか、まったく異なるコンテンツを提供するのが最適です。