什麼是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

@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中文網其他相關文章！