html支持移动端吗,bootstrap支持手机端吗？
bootstrap支持手機(jī)端。Bootstrap的響應(yīng)式CSS能夠自適應(yīng)于臺式機(jī)、平板電腦和手機(jī)；且自Bootstrap3起，框架包含了貫穿于整個(gè)庫的移動設(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列。若里，一個(gè).row內(nèi)包含的列(column)大于12個(gè)(即，一行中的柵格單元超過12個(gè)單元)，則會自動排版，總之，一行只能最多12列，具體分析往后閱讀。
原理：
通過CSS3 Media Queries(媒體(設(shè)備)查詢)，媒體查詢是讓頁面內(nèi)容在不同的媒體環(huán)境下運(yùn)行時(shí)可以展示不同的樣式(這個(gè)樣式當(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)包裹一個(gè) .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;
}
}
……
以上代碼實(shí)現(xiàn)了隨瀏覽器寬度的變化container容器的寬度也進(jìn)行變化。
更多web前端知識，請查閱 HTML中文網(wǎng) ！！
總結(jié)
以上是生活随笔為你收集整理的html支持移动端吗,bootstrap支持手机端吗？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： AngularJS中的过滤器（filte
- 下一篇： iOS CAGradientLayer颜