Lightning でスマホとパソコンの表示切り替えについて

[yunahana]

トップページのヘッダー画像は、パソコンとモバイル用画像の設定ができますが、通常の固定ページでの長い文章を、スマホでは短くして表示させたいと思っています。
画像もスマホでは小さい画像にしたいと考えています。

スマホのみ表示、パソコンのみ表示など、Lightningにも、そのような機能がありますでしょうか？
また、何か方法がありましたらご教授頂けると助かります。

どうぞよろしくお願いいたします。

当サイト環境
・BizVektor・Lightningのバージョン：Lightningバージョン: 5.1.2
・Lightning Child Sampleバージョン: 0.1.2
・選択しているデザインの種類：Lightning-FortかLightning-Pro
・拡張デザインスキンであればバージョン：こちらはよく分かりません。

[Vektor,Inc]

Lightning は Bootstrap3 というCSSフレームワークを利用していますので、Bootstrapのclassを追加する事で端末サイズに応じた表示切り替えは可能です。

例

<div class="visible-xs-block">スマホのみ</div>

使えるclass名は下記を参照してください。
https://getbootstrap.com/docs/3.3/css/#responsive-utilities

ただし、これは現在のBootstrapよりも前の記述方法なので、Lightning が Bootstrap4などに切り替えたときに修正が必要になる可能性がありますので、心の片隅に覚えておいてください。

[yunahana]

Vektor,Inc 様

ご教授、本当にありがとうございます。
参考URLもありがとうございました！
Lightning が Bootstrap4などに切り替えになった時を見逃したり、ど忘れしたりするのが怖いですが、
この機能はとても必要なので、助かりました。

本当にありがとうございました！

追伸
スマホ、パソコンと切り替え出来る機能が増えたLightningを心待ちにしたいと思います。

[投稿者]

投稿