製品版のみの機能

グリッド - Twitter Bootstrap

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。

このサンプルは、レスポンシブ Web デザイン モード機能について紹介します。Twitter Bootstrap Framework ユーティリティ クラスを使用してプロファイルをアクティブにします。Twitter Bootstrap レスポンシブ CSS クラスを使用します。このクラスは CSS 3 メディア クエリを使用しています。
サンプルが表示されるデバイスのフォーム ファクター (携帯、タブレット、デスクトップ) に基づいて、表示する列のセットを変更します。
Phone モードの場合、会社名の列のみを表示します。その他の列がこのプロファイルで Twitter Bootstrap の hidden-sm-down CSS クラスを使用して非表示されます。
Tablet モードの場合、会社名、名前、場所、市の 4 つの列を表示します。その他の列は、このプロファイルで Twitter Bootstrap の hidden-md-down CSS クラスを使用して非表示にされます。
Desktop モードの場合、顧客 ID、会社名、名前、連絡先、場所、市、国名の 7 つの列を表示します。このプロファイルではすべての列が表示されます。

コード ビュー

クリップボードへコピー