[Bootstrap] 表示/非表示の制御 Display property
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」では非表示となります。
コメント ※ハンドルネームでお願いします