媒體查詢
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) { ... }