Bootstrap 4雖然說效能比較佳,但是使用起來的直覺性還是比不上Bootstrap 3,但世界就是不斷往前的推進,這篇文章就是單純的把適性化(Responsive)系統的Grid顯示或隱藏整理成矩陣表,供給日後使用時可參考。
Extra small (<576px) |
Small (≥576px) |
Medium (≥768px) |
Large (≥992px) |
Extra large (≥1200px) |
|
---|---|---|---|---|---|
.d-none .d-sm-block | Hidden | Visible | Visible | Visible | Visible |
.d-none .d-md-block | Hidden | Hidden | Visible | Visible | Visible |
.d-none .d-lg-block | Hidden | Hidden | Hidden | Visible | Visible |
.d-none .d-xl-block | Hidden | Hidden | Hidden | Hidden | Visible |
.d-none | Hidden | Hidden | Hidden | Hidden | Hidden |
.d-sm-none | Visible | Hidden | Hidden | Hidden | Hidden |
.d-md-none | Visible | Visible | Hidden | Hidden | Hidden |
.d-lg-none | Visible | Visible | Visible | Hidden | Hidden |
.d-xl-none | Visible | Visible | Visible | Visible | Hidden |
※ 如果是表格的話,可以把block關鍵字取代成table-cell關鍵字,例如:「.d-none .d-md-table-cell」。