媒體查詢

Bootstrap 中的媒體查詢允許你根據視口大小移動,顯示和隱藏內容。以下媒體查詢在 LESS 檔案中用於在 Bootstrap 網格系統中建立關鍵斷點:

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

偶爾會將這些擴充套件為包含最大寬度以將 CSS 限制為更窄的裝置集:

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }