bootstrap支持手機端。Bootstrap的響應式CSS能夠自適應于臺式機、平板電腦和手機；且自Bootstrap3起，框架包含了貫穿于整個庫的移動設備優先的樣式。

bootstrap響應式布局

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口(viewport)尺寸的增加，系統會自動分為最多12列。它包含了易于使用的預定義類，還有強大的mixin 用于生成更具語義的布局。

首先柵格系統用于通過一系列的行(row)與列(column)的組合來創建頁面布局。bootstrap根據不同屏幕尺寸，選擇不同的柵格選項。一共有四種柵格選項，超小屏(手機)、小屏(平板)、中屏(桌面)、大屏(超大桌面)。柵格系統分為12列，即每行最多可容納12列。若里，一個.row內包含的列(column)大于12個(即，一行中的柵格單元超過12個單元)，則會自動排版，總之，一行只能最多12列，具體分析往后閱讀。

原理：

通過CSS3 Media Queries(媒體(設備)查詢)，媒體查詢是讓頁面內容在不同的媒體環境下運行時可以展示不同的樣式(這個樣式當然是由我們來書寫規定的)。

@media是CSS3中規定的屬性，它可以實現針對不同媒體設備來設置不同的樣式的目的。而且就算是在同一設備中它也可以在你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

應用：

Bootstrap主要用到min-width、max-width，以及and語法，用于在不同的分辨率下設置不同的CSS樣式。

@media的語法@media mediatype and|not|only (media feature) {

CSS-Code;

}

其中mediatype有print(打印設備)、screen(用于電腦屏幕，平板電腦，智能手機等)、speech(應用于屏幕閱讀器等發聲設備)；media feature則是用來規定如最大寬度或者最小寬度。

我們來看看bootstrap中布局容器的例子：

Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。

如下固定寬度布局

...

或者 流式布局

...

在bootstrap的css文檔中@media屬性1591~1605行

@media (min-width: 768px) {

.container {

width: 750px;

}

}

@media (min-width: 992px) {

.container {

width: 970px;

}

}

@media (min-width: 1200px) {

.container {

width: 1170px;

}

}

……

以上代碼實現了隨瀏覽器寬度的變化container容器的寬度也進行變化。

更多web前端知識，請查閱 HTML中文網 ！！

總結

以上是生活随笔為你收集整理的html支持移动端吗,bootstrap支持手机端吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。