這篇文章主要介紹了bootstrap能不能支持手機(jī)端，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
bootstrap支持手機(jī)端；Bootstrap的響應(yīng)式CSS能夠自適應(yīng)于臺式機(jī)、平板電腦和手機(jī)；并且自Bootstrap3起，框架包含了貫穿于整個庫的移動設(shè)備優(yōu)先的樣式。
bootstrap響應(yīng)式布局
Bootstrap 提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin 用于生成更具語義的布局。
首先柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局。bootstrap根據(jù)不同屏幕尺寸，選擇不同的柵格選項(xiàng)。一共有四種柵格選項(xiàng)，超小屏（手機(jī)）、小屏（平板）、中屏（桌面）、大屏（超大桌面）。柵格系統(tǒng)分為12列，即每行最多可容納12列。若里，一個.row內(nèi)包含的列（column）大于12個（即，一行中的柵格單元超過12個單元），則會自動排版，總之，一行只能最多12列，具體分析往后閱讀。
原理：
通過CSS3 Media Queries（媒體（設(shè)備）查詢），媒體查詢是讓頁面內(nèi)容在不同的媒體環(huán)境下運(yùn)行時(shí)可以展示不同的樣式（這個樣式當(dāng)然是由我們來書寫規(guī)定的）。
@media是CSS3中規(guī)定的屬性，它可以實(shí)現(xiàn)針對不同媒體設(shè)備來設(shè)置不同的樣式的目的。而且就算是在同一設(shè)備中它也可以在你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。
應(yīng)用：
Bootstrap主要用到min-width、max-width，以及and語法，用于在不同的分辨率下設(shè)置不同的CSS樣式。
@media的語法
重慶分公司
重慶分公司
@media mediatype and|not|only (media feature) {
CSS-Code;
}其中mediatype有print（打印設(shè)備）、screen（用于電腦屏幕，平板電腦，智能手機(jī)等）、speech（應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備）；media feature則是用來規(guī)定如較大寬度或者最小寬度。
我們來看看bootstrap中布局容器的例子：
Bootstrap 需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個 .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;
}
}
……感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享bootstrap能不能支持手機(jī)端內(nèi)容對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，詳細(xì)的解決方法等著你來學(xué)習(xí)!
