Bootstrap コンテナーでセルを非表示

レスポンシブ Web ページのデザイン

プレビュー

このトピックではスマートフォンとデスクトップで異なる外観のナビゲーションを提供するレスポンシブ ヘッダーを作成します。

前提条件

ブラウザー ビューポートおよびスマートフォンのデフォルトのレスポンシブ レイアウトを持つスクリーンから開始できます。詳細については、「レスポンシブ Web ページ レイアウトの作成」を参照してください。

概要

以下は手順です。

  1. 行に要素を追加。
  2. 行でセルを非表示。
  3. 非表示にしたセルを表示にするインタラクションを追加。
  4. デスクトップ ブレークポイントでセルを表示するために変更。
  5. スクリーン プレビュー を実行。

詳細手順

(a-1) 1.行に要素を追加

  1. 最初のセルにタイトルを追加し、セルの列スパンを 6 に設定します。

    例のタイトルはカスタム フォント設定 (Roboto、サイズ 20、太字、パープル) があり、余白は 15 に設定されます。

  2. セルが隣に表示されるため、2 番目のセルの列スパンを 6 に設定します。

  3. サイズ変更した第 2 のセルにアイコンを追加します。

    メニュー アイコンを選択し、タイトルと同じパープル色を設定し、右揃えします。

    上余白を 15 に設定するには、ドロップダウンでカスタム オプションを選択し、上余白に値を入力します。下余白はデフォルトで 15 に設定されます。

(a-2) 2.スマートフォン ブレークポイントでセルを非表示

行の第 3 セルの列スパンは 12 のため、以前の手順のセルの下に表示されます。ナビゲーション ボタンのある非表示セルになります。

  1. ボタンを追加し、上余白を 10 に設定します。

    例で白背景、パープル テキスト、Roboto フォント、サイズ 16 が設定し、境界線が表示されないために太さが 0 に設定されます。

  2. このボタンを 4 回コピーします。

  3. セルの表示ステートを非表示に設定します。

    セルをクリックして選択し、プロパティ パネル の レスポンシブ オプション セクションから 表示 を非表示に設定します。

  4. 行を選択し、非表示セルのハイライト オプションをチェックします。

    非表示にしたセルは青い背景で表示され、ブレークポイントはグレーで表示されます。

(a-3) 3.非表示にしたセルを表示するインタラクションを追加

  1. メニュー アイコンをクリックし、切り替え オプションがチェック済みの新しいステートへのタップ インタラクションを追加します。詳細については、「インタラクションの追加」を参照してください。

  2. 新しいステートで、プロパティ パネル のセルの レスポンシブ オプション セクションで 表示 を変更すると表示します。

    アイコンを十字を表示するよう変更できます。以前の手順で設定した 切り替え オプションは、アイコンにクリックするとボタンを非表示にします。

    以下の画像は、この変更を適用した後の インタラクション エクスプローラー です。

(a-4) 4.デスクトップ ブレークポイントでセルを表示するための変更

  1. 開始ステートで、レスポンシブ ブレークポイント ピッカー を使用して、デスクトップ ブレークポイントに切り替えます。

  2. メニュー アイコンのセルを選択して非表示にします。

  3. ナビゲーション ボタンのセルを非表示にします。

    セルをクリックして選択し、表示ステートは携帯ブレークポイント (XS) から継承されます。デスクトップ (MD) で表示に設定します。

  4. タイトルのセルおよびナビゲーションのセルの列スパンを隣に表示されるために変更します。

    タイトル セルの列スパンを 2 に設定し、ナビゲーション セルの列スパンを 10 に設定します。

  5. すべてのボタンを選択し、列スパンを 2 に設定します。

(a-5) 5.スクリーン プレビューを実行

  1. [スクリーンの実行] ボタンをクリックすると、プロトタイプをプレビューします。

  2. プレーヤー ツールバー で「自動調整」 オプションを選択します。

  3. デザインしたブレークポイントを確認するには、ブラウザーをサイズ変更します。

関連トピック