什麼是bootstrap自適應

在bootstrap中，自適應指的是根據螢幕大小把裝置分為超小螢幕、中螢幕、中螢幕、大螢幕四種，網頁會根據裝置螢幕不同，將網頁分為12列，將瀏覽器以行列形式去劃分實現自適應；自適應不管螢幕有多大，都盡量不換行，只是橫向縮放。

本教學操作環境：Windows10系統、bootstrap5版、DELL G3電腦

什麼是bootstrap自適應

#bootstrap自適應:

Bootstrap根據螢幕大小把裝置分為超小螢幕,小螢幕,中等螢幕,大螢幕四種並把螢幕分為12列

對應螢幕寬度為:

• 超小螢幕(手機):0-768px 對應設定class=col-xs-number

• ##小螢幕(平板):768-992px 對應設定class=col-sm-number

• 中螢幕(電腦):992-1200px 對應設定class=col-md-number

• #大螢幕(電腦):1200px-? 對應設定class=col-lg-number

在chrome瀏覽器，elements視窗中會發現當螢幕寬度小於768時，

只有com-xs-12生效。

自適應:網頁適應不同裝置,用bootstrap框架

原理:是媒體(裝置/瀏覽器)查詢@media only screen 查詢裝置的寬度

#bootstrap是自適應的；自適應指的是不管螢幕有多大，都盡量不換行，只是橫向縮放，而bootstrap是透過柵欄系統實現自適應的；柵欄系統透過定義容器的大小，將其分為12等份，將瀏覽器以行列形式去劃分實現自適應。

範例如下：

@media only screen and (min-width:0px) and (max-width:480px){
body{
background-color:red;
}
}
@media only screen and (min-width:481px) and (max-width:720px){
body{
background-color:green;
}
}
@media only screen and (min-width:721px){
body{
background-color:blue;
}
}

相關推薦：

bootstrap教學

以上是什麼是bootstrap自適應的詳細內容。更多資訊請關注PHP中文網其他相關文章！