Bootstrap 5 是一個流行的前端框架,提供了不同斷點(breakpoint)的功能,以便在不同螢幕尺寸下進行響應式設計。以下是 Bootstrap 5 斷點的完整文件:
超小尺寸斷點(Extra Small):
小尺寸斷點(Small):
- CSS類:
col-sm-
- 範圍:576px至767px
中等尺寸斷點(Medium):
- CSS類:
col-md-
- 範圍:768px至991px
大尺寸斷點(Large):
- CSS類:
col-lg-
- 範圍:992px至1199px
超大尺寸斷點(Extra Large):
- CSS類:
col-xl-
- 範圍:1200px及以上
除了上述的列格子斷點,Bootstrap 5 還包含其他一些全域斷點,如下所示:
手機尺寸斷點(Mobile):
- 範圍:小於576px
- CSS媒體查詢:
@media (max-width: 575.98px) { ... }
平板尺寸斷點(Tablet):
- 範圍:576px至991px
- CSS媒體查詢:
@media (min-width: 576px) and (max-width: 991.98px) { ... }
桌面尺寸斷點(Desktop):
- 範圍:992px至1199px
- CSS媒體查詢:
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
大型桌面尺寸斷點(Large Desktop):
- 範圍:1200px及以上
- CSS媒體查詢:
@media (min-width: 1200px) { ... }
這些斷點讓你能夠根據設備的不同,為你的網頁設計提供不同的佈局和樣式。