[Bootstrap] 表示/非表示の制御 Display property

Bootstrap

Bootstrapでサイトを作る際、ブレークポイントで表示/非表示を分ける事も出来ますが、プロパティーを記述する事で表示/非表示を分ける事も出来ます。

使い方はいたって簡単!クラスに追加するだけです。class=”d-sm-none” 的な感じで。

sm
≥576px
md
≥768px
lg
≥992px
xl
≥1200px
横幅の最大 540px 720px 960px 1140px
Screen Size Class
全サイズ非表示 .d-none
xsだけ非表示 .d-none .d-sm-block
smだけ非表示 .d-sm-none .d-md-block
mdだけ非表示 .d-md-none .d-lg-block
lgだけ非表示 .d-lg-none .d-xl-block
xlだけ非表示 .d-xl-none
全サイズ表示 .d-block
xsだけ表示 .d-block .d-sm-none
smだけ表示 .d-none .d-sm-block .d-md-none
mdだけ表示 .d-none .d-md-block .d-lg-none
lgだけ表示 .d-none .d-lg-block .d-xl-none
xlだけ表示 .d-none .d-xl-block

例えば、class=”d-lg-none ”とした場合、「lgサイズ」と「xl」では非表示となります。

参考にさせて頂いたサイト

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください