bootstrap自適應指的是什么

這篇文章主要介紹“bootstrap自適應指的是什么”，在日常操作中，相信很多人在bootstrap自適應指的是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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自適應指的是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！